Custom CSS WooCommerce Product Tabs

Hi there,

Tabs - the text colors can be changed in Customizer > Colors > Woocommerce. Make sure you have the Woocommerce module enabled.

To adjust the tab padding and background colors you can use this CSS:

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    padding: 0.5em 2.5em;
    background-color: red;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: green;
}

The margin between tab content titles and text are inherited from Customizer > Typography > Body / Headings

If you want to adjust them separately you can do this to add margin below a H2:

.woocommerce-tabs h2 {
    margin-bottom: 2em;
}

And this CSS will add top margin to a H2 that comes after a paragraph:

.woocommerce-tabs p + h2  {
    margin-top: 2em;
}

is it possible to add background colour to the tab panel contents? (currently using 3 tabs) The tabs info above worked great

Hi Constance,

It's possible through custom CSS.

You can try adding this through Appearance > Customize > Additional CSS:

.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li {
    background-color: #ff0000;
}

.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li.active {
    background-color: #0000ff;
}

Replace the color values in the code with your preferred color values.

Hi Fernando- Thank you for the response. This covers the entire tabs section, but what I was wondering is if the actual content of the tabs can have a background colour as well. The previous code worked perfectly for enabling background colour in active tabs, so could it also be used in the corresponding tab content below, like description?

Can you link us to the page in question?

Hi Leo:
Page is on staging and easier to send image than passwords for access. Either background colour (like the tab) or even just a stroke would likely work.

Hi there,

try this:

.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 20px;
    border: 1px solid #000;
    background-color: #f00;
}

Thank you David- you all are the best and I appreciate all the help and tips support has offered to users.

Glad we can be of help!