Anyone have suggestions for making WooCommerce product gallery not terrible?

Support
#1

I’ve been using Pro for probably 8 years now and keep waiting for better WooCommerce support, and still it’s super lacking. I mostly use other themes for ecommerce stores now but still end up with the odd one built on Pro. So I’m curious if anyone has successfully made the WooCommerce gallery, specifically the thumbnails, not look terrible. I’ve tried just adding css to modify the existing thumbnails, but that hasn’t worked out particularly well and still isn’t as well implemented as most other themes with good WooCommerce support. I’ve wondered if maybe I can achieve something using loopers and an ACF gallery, but I’d get stuck on making the “main image” area change depending on which thumbnail was clicked.

Any tips, previous experience, or tips are extremely welcome! I know my way around Pro well enough but am far from an expert, so I defer to the pros here. Thanks all

#2

Hello @ckelson,

Thank you for the inquiry.

If you need the thumbnail to activate or display a specific image, try using the default sliders, then utilize the slider triggers. To learn more about this feature, please watch this short video.

– https://www.youtube.com/watch?v=do45n9xMUVo

This documentation should also help.

– https://theme.co/docs/sliders#custom-attributes

Another option is to use third-party plugins such as the following.

– https://wordpress.org/plugins/woo-variation-gallery/

Let us know if you need more info.

Best regards,
Themeco

#3

Excellent, thanks Ismael, the slider triggers is a great resource, and one that I haven’t tried yet. First question about its functionality is if it’s possible to have the custom attributes act dynamically according to how many images are in the ACF gallery. For example, if I have 5 images in the gallery, then set up my loopers correctly, there will be 5 thumbnails. But how can I edit the value of each of those thumbnails’ custom attributes so they direct to the right slider image? Does that make sense? So that if thumbnail 2 is clicked, it will show slide 2, and so on and so forth. If there’s more than 5 images in the gallery, there will be more thumbnails, but I’ll need the custom attribute value to update automatically according to the number of images in the gallery.

That all sounds confusing, but hopefully you understand what I’m trying to ask. I’ll dig into it and figure it out myself if possible, but if you have any other feedback on the above it would be greatly appreciated. Thanks again Ismael

#4

Hey Cameron,

The Looper Dynamic Content will do the job. Insert the Index Number Dynamic Content inside your Looper Consumer, for example, and you’ll get the number for each item.

image

image

#5

Success! That did the trick beautifully. Thumbnails are pulled in from the ACF gallery and change the main image stacked slider appropriately.

image
image1494×994 325 KB

Currently I just have the thumbnails as repeating divs in a column. I had hoped to make the thumbnails a slider, but couldn’t figure out how to have the main image be a stacked slider and the thumbnails an inline slider, and allow the data-x-slide-goto attribute to control both sliders. Or have the pagination control both.

I tried playing with data-x-slider-id to see if I could do anything with that, but to no avail. Any recommendations are welcome, though already the tips have been extremely helpful, so thanks!

#6

Hey Cameron,

Thanks for the updates. If you want to know more about how Slide Triggers work, check out this video:
https://www.youtube.com/watch?v=do45n9xMUVo

And we also have a tutorial on how you can create two sliders where the first one displays the thumbnails and the second displays the larger image like a product gallery:
https://www.youtube.com/watch?v=40Z5V7FBx4A

Best Regards.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.