[Resolved] Woocommerce single product page tabs

[David]

Hi Tom and team,

firstly great to see woo addon in place. Great that the lightbox zoom is working correctly and that you incorporated the show zero review stars 😉 The update has allowed me to remove a few lines of my own custom code, knowing its in your capable hands for support is a real bonus.

Anyhow – i noticed that the Tab’s showing descriptions and reviews on the single product page has changed – the tab names are now centred and there is no border formatting. Can you direct me to the classes i can use to format these tabs?

On another point do you know how to add additional tabs to the single product page?

Great work as usual! Loving GP more and more!

David

[Tom]

Hi David,

Any examples of the style you’re going for?

I believe the content/amount of tabs is controlled by WooCommerce.

[David]

Hi Tom

for the current theme – it is a solid colour background with white out text for the selected tab. Preferably all tabs aligned left.

FYI i found the following for adding additional tabs (without another plugin!):

Editing and adding tabs to woocommerce

regards

David

[Tom]

You could do something like this:

@media (min-width:769px) {
    ul.tabs.wc-tabs {
        float: left;
        width: 200px;
        margin-right: 40px;
    }

    ul.tabs.wc-tabs li {
        display: block !important;
        margin: 0 !important;
    }

    ul.tabs.wc-tabs li:not(:last-child) {
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        float: right;
        width: calc(100% - 240px);
    }

    .upsells, .related {
        clear:both;
    }
}

[David]

Hi Tom thanks again.
This code, like all the others i have tried doesn’t change anything on the tabs. Its odd as it has definitely changed since the latest GP update. Very weird. I am using the statement child theme (solely to stop my changes being overwritten – installed this before i knew you had a blank child theme) would this cause any other issues?

regards

David

[Tom]

Hmm, I tested it and it works. Can you link me to the page (with the CSS added)?

[David]

Ill send link by email. thanks

[Tom]

Can you try adding the CSS to the top of your custom CSS? It’s possible there’s a syntax error in there causing it not to render.

[David]

Hi Tom

yes that worked thank you! So would this mean there is a syntax error in some of the other code i have written?

David

[Tom]

Yep, try putting it all in this: https://jigsaw.w3.org/css-validator/#validate_by_input

[David]

Thanks Tom – yes found two errors – one was an unknown parameter which strangely still worked, and wasn’t conflicting. The other is : Parse Error [empty string] in the following code – which is one of your codes for changing woo products to two columns. Any ideas?

@media (max-width: 768px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product, 
    .woocommerce-page[class*=columns-] ul.products li.product,
    .woocommerce[class*=columns-] ul.products li.product {
        width: 48%;
        float: left;
        clear: both;
        margin: 0 1% 2.992em;
    }

[Tom]

It’s missing a closing }.

You can remove that CSS and do it using the add-on now though 🙂

[David]

Oh yeah – doh!
And of course!

Thanks for the support – learnt something new today!

Case closed…..

[Tom]

Glad I could help 🙂

[Author]

Posts