Actualizado el 12/12/2016

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.

Zerif Lite - Pestañas de producto WooCommerce

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í:

Zerif Lite - Pestañas de producto WooCommerce con borde

Tutorial original en inglés: How to add borders to WooCommerce product page tabs in Zerif

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en Electromecánica, Periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)