Woocommerce CSS personalizados TABs de Productos con bordes

por | May 6, 2020 | Utilidades Woocommerce

Muchas veces queremos personalizar los estilos nativos en Woocommerce, en este caso los TABS que muestran la descripción, valoración y otros personalizados, con estos CSS podrás personalizar desde tu CHILDTHEME.

Estilo del TAB con bordes

.woocommerce .woocommerce-tabs {
border: 0 !important; /* remove border */
}
/*** REMOVE COLOR BEHIND TABS AND CENTER ALIGN ***/
.woocommerce div.product .woocommerce-tabs ul.tabs {
background: transparent !important;
text-align: center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs:before {
border-bottom: 0 !important;
}
/*** REMOVE BORDER ON TABS ***/
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: 0 !important;
}
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {
border-bottom: 0 !important;
margin: 0 4px !important; /* this adds gaps between the tabs if you want them */
}
/*** BACKGROUND COLOR OF NON ACTIVE TABS ***/
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: #333 !important;
font-size: 16px;
}
/*** NON ACTIVE TAB TITLE COLOR ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a {
color: #999 !important;
}
/*** BACKGROUND COLOR OF ACTIVE TAB ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active {
background-color: #00707a !important; /* this color should match the panel background color below */
border: 0 !important;
}
/*** ACTIVE TAB TITLE COLOR ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a {
color: #fff !important;
}
/*** MAIN ACTIVE PANEL ***/
.woocommerce div.product .woocommerce-tabs .panel {
background-color: #00707a;
color: #fff;
font-size: 16px;
border: 0;
}
/*** CHANGE COLOR AND CAPITALIZE H2 TITLE ON MAIN PANEL ***/
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs h2 {
text-transform: capitalize;
color: #00BFBF;
}
/*** COLOR OF TEXT INSIDE OF PANELS ***/
.woocommerce #reviews #comments ol.commentlist li .meta,
.woocommerce table.shop_attributes th {
color: #fff;
}
/*** REVIEW COMMENT FIELDS ***/
.woocommerce-tabs #commentform input[type="email"],
.woocommerce-tabs #commentform input[type="text"],
.woocommerce-tabs #commentform input[type="url"],
.woocommerce-tabs #commentform textarea{
background: #fff;
color: #333;
}
/*** MEDIA QUERIES FOR MOBILE (YOU MIGHT NOT NEED THIS SEE BELOW) ***/
@media only screen and (max-width: 767px) {
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {
margin: 0 auto !important; /* you only need this if you have gaps between tabs */
max-width: 90%; /* you only need this if you want the tabs to be skinnier on mobile */
}
}

Otras publicaciones en el Blog

× ¿Cómo lo podemos ayudar?