[Resolved] Expand product data tabs

[David]

Ok, i think we’re almost there.
Change this CSS:

.woocommerce div.product div.summary {
    grid-column: 2;
    grid-row: 1;
    margin-left: 80px;
    position: -webkit-sticky;
    position: sticky;
    top: 105px;
    bottom: 100px;
    padding-right: 80px;
}

to:

.woocommerce div.product div.summary-wrap {
    grid-column: 2;
    grid-row: 1;
    margin-left: 80px;
    position: -webkit-sticky;
    position: sticky;
    top: 105px;
    bottom: 100px;
}

[ustar]

Done.

But, no visible changes. ((
https://u-star.cz/produkt/convesrse-boty-one-star-ox-leather-black/

And product tabs goes under Summary after scrolling down and after up.

[David]

You still have this CSS which is NOT needed:

.woocommerce div.product div.summary {
    grid-column: 2;
    grid-row: 1;
    margin-left: 80px;
    position: -webkit-sticky;
    position: sticky;
    top: 105px;
    bottom: 100px;
    padding-right: 80px;
}

Maybe stuck in the cache if you have removed it.

[ustar]

Yes, you are right. It was in another section of Additional CSS.
Now i deleted it.

Please, take a look

https://u-star.cz/produkt/converse-boty-brea-neoprene-aqua/

Now needs to move Description and Additional info below product images and expand them.
And i don’t understand why code for functions.php doesn’t work…

[David]

Thats where they were the Description and Additional info were before we started this.
I thought you wanted them as part of the sticky summary ?

[ustar]

Sorry, maybe it is my bad explanation.

As i asked in my 1st message in this thread, “I’m trying to expand product data tabs automatically. To have all info about product already opened.
Description and Additional information.”

Then we have tried to make button “Full description” work again (scroll page to the Description).

[David]

Lol – no problems – more like me not reading it – at least if anyone needs to know how to do that its here 🙂

Ok so roll the changes back to how it was before. And apply just the CSS here to remove the tabs.

Then edit the hook you used to add the Jump Link – if that was imported in Merch it was called:

Single Product Jump to Description

Edit the href:

Change this

#tab-title-description

to

#tab-description

[ustar]

Now finally works ! ))))

One detail:
I’d like to keep names of tabs, i mean before description would be nice to see header “Description” and before additional info would be good to see header “Additional Information”.
Is it possible? i hope ))

I’d like to add some additional tab (or tabs) later with delivery and payment options for example under base tabs.

[David]

In your CSS you have this – which is hiding the titles:

.woocommerce-tabs h2 {
    display: none;
}

Delete that 🙂

[ustar]

How did you know this? ))

I have commented it.
Thank you! Amazing support ))))
Thanks again!

Regards, Sergey.

[David]

lol – it was in the code 🙂

You’re welcome – glad to be of help.

[Author]

Posts