-
Posts
-
Hi,
We’re currently developing a site with WooCommerce using the Enfold builder. The product gallery in use is the Enfold slider, which at the moment displays all product sizes and variants as separate images.
We’ve been asked whether it’s possible to target and display the correct image when a user selects a specific option from the Size dropdown (for example, selecting a size updates the gallery to show the image for that size).
Is this functionality supported natively within the Enfold theme and WooCommerce, or would it require custom JavaScript? We’re also open to using an alternative gallery solution or plugin if that makes targeting the correct variation image easier or more robust.
A sample page is in the private environment.
Thanks in advance for your guidance.
Hey woogie07,
Typically if you use the default Enfold/Woo product page layout and choose the WooCommerce 3.0 product gallery in Shop Options > Product Gallery
It should work. But currently it looks like your page is using a custom layout using Enfold elements.
It might be possible to keep your layout if you use the dots in your slider instead of the next/prev button and some custom javascript, if you limit your slides to the same number as your variations options. Currently you have 33 slides but only 14 variations options. Perhaps a another plugin would help, but note that not all woo addon plugins work well with Enfold, so you would need to test.Best regards,
MikeHi
Thanks for the feedback.Are you saying that the default Enfold/Woo product page would enable the functionality we need?
eg. target and display the correct image when a user selects a specific option from the Size dropdown (for example, selecting a size updates the gallery to show the image for that size).
If we use the default page, will we lose the other builder elements on the that we already have eg. Avia layout Builder Table?You mentioned that we may be able to keep the layout but add Javascript – do you know what this would be and where to add?
Thanks
Hi,
Yes to the first two questions, as for the custom javascript it is a maybe, we would need to see a test page with the dots in your slider, and the same number of slides as your variations in the same order. Since there are no added classes to tell javascript the difference it needs to be setup so the first option is the first image in the slider & the last is the same as your last image. The dots in the slider link to the images, where the next/prev only link to the next image, not a specific image.
It may work similarly to this thread. But this thread is not your solution, we will need to examine and test on an example on your test page.Best regards,
MikeThanks
a/ If we reverts to the standard woo product page, are there ways of adding the extra enfold layout builder elements after eg. The table, the showrooms slider, the accordions. Or would all of these be lost?
b/ If we used the existing as you say and add javascript – could test this if I set you a test page and gave access? Id f the javascript worked, would it be added separately at page level, or could it be added once for all products pages?
Thanks
Hi,
a: yes all would be lost
b: if all of the products followed the same format ie: dots in your slider, and the same number of slides as your variations in the same order, I expect that one javascript script would work for all. As the example thread did
But we won’t be sure until we test on your text product.Best regards,
MikeHi Mike,
OK, what would you need to test? eg. a test page and login access,
or would you just prove the javascript code?Thanks
Hi,
A test product page to test the javascript code. We can inject the code in the browser , but only for desktop.Best regards,
MikeIf each product has different sizes and some not as many, would the script still work on variants?
Thanks
Hi,
I would expect the script to work on mobile also, but we will be testing on desktop to start.
The size of the images should not matter, but each product needs to have the same number of images as the variations.Best regards,
Mikeeach product will have different variations and number of images.
Does that make it not possible?
Thanks
Hi,
As I recommend, as long as each product has the same number of images as variations in the same order, the script I have in mind should work, but we wont know until we test it. A plugin is another option, but note that all third party woo plugins don’t play nice (work) with Enfold.Best regards,
MikeHi Mike,
Just to clarify — if one product has X variants with matching images, and another product has a different set of X variants with matching images, will that work?
For example:
Every product page will have different size variants with matching images.
Some product pages will have both colour and size variants.
If a product has both size and colour variants, will that work correctly as well?
Please confirm, and I’ll send over a test.
Thanks,
MarcusHi,
I think this will work, but we would need to test, please create two test pages, one of each example so we can check.Best regards,
MikeHi,
I have set up 2 x test pages in Private.
Can you set the test?
Extra images for gallery that are not sizes or colours eg. lifestyle images – if I wanted extra images in the gallery would this be possible, or would these need to be added as a separate gallery? If so, where would you suggest for best USX?
Thanks
Hi,
Thanks for the demos, I have a working script for the first product “Column Radiators Raw Steel III Horizontal” that contains only one dropdown options box. But your second page that has two dropdowns for color & size is not working because you don’t have enough images for each possibility, your only image are for “Brushed Bronze” and none for “Polished Stainless Steel”.
I’m not sure if this will work as the script may work better with one dropdown option per page. Can you have a different page for each? The slides only have the classes “slide-3”, etc not the variation that you may achive using the WooCommerce variation images built into WooCommerce instead of using the Enfold slider that is not built for this.Best regards,
MikeHi,
I’ve revised the test page for the Liberty radiator — the dropdowns now correctly match the finish and the corresponding image in the slider.
Some product pages will include both colour and size variants and will therefore require three dropdowns. Other pages will only have a size variant and will just need a single dropdown.
If this setup isn’t possible, is there a way to use the native WooCommerce variation images instead of the Enfold slider, while still keeping the other content elements on the page — effectively a hybrid approach?
I came across this support topic, which suggests it may be possible:
I can provide guest login access to the dev site if required.
Please advise.
Thanks
Hi,
Thank you for your patience, unfortunately you would not be able to have a hybrid approach. If you check the test page in the thread that you linked to, the images to not change when an option is selected. If you use the built-in native WooCommerce variation images instead, this should work, but you could not customize the rest of the product page.
If you only have one dropdown option, with the same number of images, like your “Column Radiators Raw Steel III Horizontal” then I have a working script, but it sounds like this won’t help you with all products, so you should try using the default native WooCommerce variation images instead.Best regards,
MikeThanks for your feedback.
Just to clarify — are you saying that if each product has one dropdown, and the images match the choices in that dropdown, then this will work (even if the number of images differs per variation)? But having two dropdowns (e.g., colour + size) won’t work with the current setup?
I agree that WooCommerce’s native variation handling is the better choice for image switching, but I’m concerned about losing the other layout elements we’ve built with Enfold’s Advanced Layout Builder. It feels like a real negative that Enfold doesn’t support WooCommerce variation images out of the box.
Do you know of any plugin or solution that would let me keep using Enfold’s builder and have a variation image gallery that works properly with WooCommerce variations? Something that bridges the gap between Enfold and variation images?
Thanks,
- You must be logged in to reply to this topic.