Woocommerce product image sticky

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

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

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.

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

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

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.

Thank you, Tom and David!

You're welcome