[Support request] Woocommerce Product Tabs Changed Style?

[John]

Hello

The Woocommerce product tabs have changed style on a client site. Appear to have move to the left. (The default position I appreciate). The font has changed. And the tabs now have a line border. Normal but different to what we had.

My question is could this be a Woocommerce Update? Would a Generate Press Theme Update cause minor design changes?
I use a Child Theme.

And where can I set the Product tabs Font and Styling. In Customiser?

We also had a Shop page set with some Beaver Builder Product sections. That seems to have reverted back to default Categories with product counts.

Any guidance would be much appreciated.

Thank you.

[David]

Hi there,

the tab positioning, i can’t see the CSS that i provided here on your site. It was in the additional CSS and there is nothing in the child theme style sheet. A theme or plugin update wouldn’t have changed this.

Did you update GP Premium to 1.8 recently as there was some minor style changes to the tab borders.
The customizer only provides Colors > Woocommerce controls for styling the tabs.

Regarding BB – nothing that GP would do could effect that.

[John]

Hi David,

Sorry – I meant to add the css you provided to move the tabs to the right – under the product description – worked great. But the client has said that is not what they meant. So I removed it from the additional CSS in customiser. The client maintains the tabs were centered. And that there was no tab borderlines.

GP Premium 1.8: Yes I did. So this might have resulted in minor style change to product tabs. Thanks. Good to know.

As a fix would it be possible to remove the tab border line Effect completely. So just text visible for each tab.?

Thanks John

[John]

Hi David

And assume Tab text (Font and weight) is also not something we can customise.

Thanks

John

[David]

So to remove the border:

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;
}

In that rule you can include a background-color: rgba(255,255,255,0); property if you wish.

To style the link fonts this is the selector you need:

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    /* tab styles in here */
}

[John]

Thank you David

I’ve implemented the remove tab lines. Worked Great. I will ask my developer guy to look at using the colour rule and font style for me if needed. It depends on the client.

Thanks again, appreciate the response.

John

[David]

Glad to be of help.

[Author]

Posts