[Support request] Woocommerce product image sticky

Home Forums Support Woocommerce product image sticky

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1065363
    Marcel

    Hello,
    Based on Niche theme from your library, making short description sticky is a nice feature. I would like to ask for a hint from your side how could I make sticky the image on the single product page (I will use ONLY A IMAGE), but not the summary (short description). Willing to buy a coffee for you, because you’ll be so kind as to help.
    Thank you!

    #1065374
    Marcel

    Here is a live example of how I would like to be: https://www.kustomdesigns.com.au/?product=mx-jersey

    #1065635
    Tom
    Lead Developer
    Lead Developer

    We could use position: sticky for this, which would be easy. The issue there is that it will overlap the description/anything that’s full width below the product image.

    For example:

    .woocommerce div.product div.images.woocommerce-product-gallery {
        position: sticky;
        top: 0;
    }

    I’m not sure how your product page layout is set up, so maybe the above will work?

    Let me know ๐Ÿ™‚

    #1066218
    Marcel

    Yes, you are right: it works until the description starts overlapping the image. But I suppose it is possible that anything thatโ€™s full width below the product image could be pushed-up, the same as this product page looks like.

    #1066305
    David
    Staff
    Customer Support

    Hi there,

    the Niche theme uses GP Hooks to create a wrapper around the product gallery and the summary. Which is what contains the sticky description. So this could be switched around to make the gallery sticky instead.

    Do you have a site setup? Then i could step you through how to do it … should work ๐Ÿ™‚

    #1066612
    Marcel

    Hello David,
    I just filled out my website address, so you should see now, as admin, the URL.
    Thank you!

    #1066622
    David
    Staff
    Customer Support

    Ok – so next steps before i figure out the CSS is to:

    1. Appearance > Elements – remove or save as draft the Gallery Stack hook element
    2. Remove or comment out the Customizer > Additional CSS between:

    /* Stacked Gallery for desktop and sticky summary */ and /* Add some space above price tag */

    The only other thing will be to make sure your product description is significantly longer then the gallery – i can add some content in dev tools to test it out though.

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