Woocommerce product image sticky

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

[Marcel]

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

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

[David]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marcel]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts