Zerif Lite: ¿Cómo añadir bordes a las pestañas de la página de productos de WooCommerce?

5 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 24 de mayo de 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

Últimas entradas de Caribdis.Net (ver todo)

Se responden dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

5 Comentarios

  1. Verónica

    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.

    • Caribdis Diseño Web

      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__title para las mayúsculas.

      Saludos.

  2. Gerson

    Gracias por tu pronta respuesta. Saludos!

  3. Gerson

    Hola Ana,

    Y si quisiera agregar otra pestaña? Con otra característica del producto, por ejemplo? Gracias de antemano por tu atención.

    • Caribdis Diseño Web

      Hola, Gerson.

      Eso ya no depende del tema, sino más bien de un plugin. Fijate si este te sirve.

      Saludos.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!