[Support request] Woocommerce Sticky Product Tab

Home Forums Support Woocommerce Sticky Product Tab

This topic contains 5 replies, has 3 voices, and was last updated by  Leon 1 year, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 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

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.