[Support request] Woocommerce Sticky Product Tab

Home Forums Support Woocommerce Sticky Product Tab

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #572351
    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

    GeneratePress 2.1.1
    GP Premium 1.6.2
    #572552
    Tom
    Lead Developer
    Lead Developer

    That’s a good idea.

    For now, you can do this:

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        position: sticky;
        top: 0;
        background: #fff;
    }
    #572561
    David
    Staff
    Customer Support

    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

    #572869
    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

    #572884
    David
    Staff
    Customer Support

    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

    #572958
    Leon

    Hi David,

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

    Best
    Leon

    #1472978
    Manuel

    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

    #1473406
    Leo
    Staff
    Customer Support

    I don’t believe so unfortunately.

    #1478234
    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;
    }
    #1478250
    David
    Staff
    Customer Support

    Hi there,

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.