[Support request] product gallery layout

[Ewa]

Hello,

I looked through the forum but I didn’t find such thread so I decided to ask here.

Is there any possibility you could help me or at least give some direction where to search in order to change the product gallery layout from default to something exactly like this: https://checklista.pl/sklep/wzory-cv-do-pobrania/cv-zielone/
I would like to have all the product gallery images displayed vertically one after another – as fixed on scrolling.
If you could give me any suggestions I would be grateful.

[David]

Hi there,

the Niche Site in the GP Site Library has that layout:

https://gpsites.co/niche/product/happy-ninja-2/

If its for a new shop then you can start there 🙂

[Ewa]

Thank you. Is there a chance I could copy some php code from that Niche Site to my theme (also GP theme but different one) or that would be complicated?

[David]

Of course – heres a reply providing the required codes and how to add them:

https://generatepress.com/forums/topic/modify-niche-template-from-the-site-library-single-product-page/#post-1512549

And heres an article on the Hook Element just in case:

https://docs.generatepress.com/article/hooks-element-overview/

[Ewa]

Many thanks! It worked fine. Just two more questions regarding this.
1. Is it possible that the short description is sticky only while the gallery is being scrolled? I mean, I would like the long description (summary) takes the entire width and not just the half as it is right now: https://di-strategies.com/p/resume-template-word-cognitive/

2. Is it possible that all of this works on mobile as well?

[Ewa]

Regarding first question – its already solved. I just changed the hook to ‘woocommerce produt meta end’ and it made it work 😉

Anyway still would like it to work on mobile – could you help please?

[David]

It is possible – but i am not sure how it will behave – as there is very little room to accommodate the stacked gallery and the content on phone. Do yo still want the gallery left / summary right ? Or just the gallery stack followed by the summary

[Ewa]

just the gallery stack followed by the summary, like here on mobile:
https://checklista.pl/sklep/wzory-cv-do-pobrania/cv-zielone/

[David]

OK couple of things:

1. in the hook element – this line:

<div class="woo-gallery-stack hide-on-mobile">

Remove the hide-on-mobile class.

2. Then you need to remove the Single Product image using this PHP Snippet:

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

How to add PHP: https://docs.generatepress.com/article/adding-php/

[Ewa]

it works 🙂 Thanks a lot, great support!

[David]

Awesome – glad to be of help!

[Author]

Posts