Continuamos con la colección de tutoriales para el tema Zerif Lite, de ThemeIsle, y en este número diecisiete vamos a retocar un poco el aspecto de las pestañas de la información de producto en WooCommerce.
El estilo predeterminado no tiene bordes y está centrado en la pantalla.
Para darles una apariencia más parecida a “fichas”, con alineación a la izquierda, tendremos que modificar algunos estilos con CSS.
Ya que no necesitamos tocar nada de los archivos, podemos simplemente añadir el código en el recuadro CSS adicional del Personalizador. Si ya estamos trabajando con un tema hijo, lo añadiremos en la hoja de estilos custom.css. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.
Este es el código completo:
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: #fff;
z-index: 2;
border-bottom: 2px solid #FFF !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: 1px solid #d3ced2 !important;
background-color: #ebe9eb;
display: inline-block;
position: relative;
z-index: 0;
border-radius: 4px 4px 0 0;
margin: 0 -5px;
padding: 0 1em !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
list-style: none;
padding: 0 0 0 1em !important;
margin: 0 0 0.618em;
overflow: hidden;
position: relative;
text-align: left;
}
.tabs {
border-bottom: 0px !important;
}Con lo cual nuestras pestañas ahora se verán así:
Tutorial original en inglés: How to add borders to WooCommerce product page tabs in Zerif
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola! Gracias por compartir tu conocimiento.
Luego de verificar la compatibilidad actualicé a la última versión de woocommerce (3.0) y funciona bien pero se me cambió la letra del título de los productos en tres aspectos: se fue la mayúscula, cambió el color que era negro y aparece en negrita. Me gustaría dejar la letra en color negro y sin negrita, estuve intentando resolverlo mediante la consola que se abre con F12 para modificar mi archivo custom.css del tema hijo, pero no he logrado corregirlo, ¿Podrías ayudarme? Nuevamente gracias.
Hola, Verónica.
Vi que resolviste lo del color y negrita. Te faltaría agregar
text-transform: uppercase;en.woocommerce ul.products li.product .woocommerce-loop-product__titlepara las mayúsculas.Saludos.
Gracias por tu pronta respuesta. Saludos!
Hola Ana,
Y si quisiera agregar otra pestaña? Con otra característica del producto, por ejemplo? Gracias de antemano por tu atención.
Hola, Gerson.
Eso ya no depende del tema, sino más bien de un plugin. Fijate si este te sirve.
Saludos.