---
title: "Zerif Lite: ¿Cómo añadir bordes a las pestañas de la página de productos de WooCommerce?"
url: https://caribdis.net/2016/05/24/zerif-lite-anadir-bordes-las-pestanas-la-pagina-productos-woocommerce/
date: 2016-05-24
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "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..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WooCommerce"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 223
---

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

Continuamos con la colección de tutoriales para el tema **Zerif Lite**, de [**ThemeIsle**](https://caribdis.link/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](//caribdis.net/wp-content/uploads/2016/05/zerif-woo-tabs.jpg)](https://caribdis.net/wp-content/uploads/2016/05/zerif-woo-tabs.jpg)

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](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/).

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](//caribdis.net/wp-content/uploads/2016/05/zerif-woo-tabs2.jpg)](https://caribdis.net/wp-content/uploads/2016/05/zerif-woo-tabs2.jpg)

**Tutorial original en inglés: [How to add borders to WooCommerce product page tabs in Zerif](http://docs.themeisle.com/article/43-add-borders-to-woocommerce-product-page-tabs)**