[Support request] Custom CSS WooCommerce Product Tabs

[David]

Hello!

I’m looking to customize the Individual Product Tabs.

I think it is something important and it should be implemented in the design tabs > woocommerce.

– Change padding and margin between blocks
– Change background and tab colors

Is this possible to do?

I have marked the margins in red (they should be wider). And in blue, the areas that I want to change color

Thank you

IMAGE: https://ibb.co/0DCvjjf

[David]

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;
}

[Constance]

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

[Fernando]

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.

[Constance]

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?

[Leo]

Can you link us to the page in question?

[Constance]

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.

[David]

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;
}

[Constance]

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

[David]

Glad we can be of help!

[Author]

Posts