[Support request] Woocommerce Sticky Product Tab

[Leon]

Hi Tom

Do you have any plan on giving it an option to sticky the woocommerce product tab in GPP? Or do you have a solution for that please?

The sticky navigation will really help with navigation. Like this: https://www.anker.com/products/variant/lc90-flashlight/T1420011

Thank you
Leon

[Tom]

That’s a good idea.

For now, you can do this:

.woocommerce div.product .woocommerce-tabs ul.tabs {
    position: sticky;
    top: 0;
    background: #fff;
}

[David]

You will need to add the -web-kit prefixes for Safari =)

.woocommerce div.product .woocommerce-tabs ul.tabs {
    position: sticky;
    position: -webkit-sticky;    
    top: 0;
    background: #fff;
}

And the Top position you may need to set to the height of your navigation if you are using sticky nav

[Leon]

Hi Tom and David,

I added that code and it works.

A bit problem: if you are reading half way through the long description and then clicked other tabs, you will be at the bottom position of that tab (have to scroll up for the tab content). This is the live site: https://www.weservicers.com/service/guangzhou-translator-business-assistant, is there a way to make it that when you click a tab, it shows the first line of the tab content?

Also, is there a way to disable sticky nav on some pages (say single product page). I guess there could be a way to do so with conditional tags, but I’m not capable of handing this yet.

Thank you
Leon

[David]

Hi Leon, to make it jump to the top of the container would require another solution. I will have a look to see what else can be done.

You could hide the Sticky Nav on the product pages like so:

.single-product .navigation-stick {
    display: none;
}

Or alternatively you could just set the sticky navigation on scroll up in the customiser

[Leon]

Hi David,

Thanks again. If you’ve found a way, kindly let me know.

Best
Leon

[Dominik]

Hi there,

did somebody found a solution for this?
We do have a similar problem – our WooCommerce Tabs are sticky on mobile…and if you scroll down a long tab and then switch to another tab…it is on the bottom position of that tab.

Thanks and best regards,
Dominik

[Leo]

I don’t believe so unfortunately.

[nik9]

Hi there,

But is this code still working?
We do not get this sticky with this CSS here:

.woocommerce div.product .woocommerce-tabs ul.tabs {
    position: sticky;
    position: -webkit-sticky;    
    top: 0;
    background: #fff;
}

[David]

Hi there,

position: sticky; will only work if the element it is applied to sits in a Container that is taller than it.

[Author]

Posts