- This topic has 8 replies, 2 voices, and was last updated 5 months, 3 weeks ago by
David.
-
AuthorPosts
-
November 17, 2019 at 2:57 am #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!November 17, 2019 at 3:29 am #1065374Marcel
Here is a live example of how I would like to be: https://www.kustomdesigns.com.au/?product=mx-jersey
November 17, 2019 at 8:45 am #1065635Tom
Lead DeveloperLead DeveloperWe 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-developmentNovember 18, 2019 at 3:02 am #1066218Marcel
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.
November 18, 2019 at 4:59 am #1066305David
StaffCustomer SupportHi 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/November 18, 2019 at 8:25 am #1066612Marcel
Hello David,
I just filled out my website address, so you should see now, as admin, the URL.
Thank you!November 18, 2019 at 8:37 am #1066622David
StaffCustomer SupportOk – 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/August 5, 2022 at 3:30 pm #2304729Marcel
Thank you, Tom and David!
August 6, 2022 at 2:33 am #2304955David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.