Category: Web Design

WooCommerce, an extension for WordPress makes it simple to sell online. What’s a bit painful though is overriding the styles if you’re creating your own theme.

Specifically the tabs, they are painful.

Here’s a small snipper to restyle the woocommerce tabs and take away that rounded look to them.

Manipulate the colours in this code as you see fit. Make sure you place the css after WooCommerce styling.

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
display:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
border-radius:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active
{

background:blue;
color:#fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li{
background:transparent;

border:0;

a {
padding:1rem;
}
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs
{
border-bottom:1px solid #999
}