Variation images not displayed at product page., but works in the quick preview

We’ve set up some products with variations and assigned images to the variations accordingly.
Now, image change on the variation selection works on some products and does not on the others.
The products that have been dublicated (via WooCommerce products panel) retain the same problem.
Now the weird part: although variation image change does not work on the product page itself, it still works perfectly on the quick preview window.

Please help us fixing this issue.

In addition this, the search function on the mentioned product pages does not work as well.
The modal popup search form does not appear.

Hi great123,

Thanks for reaching to us.

1. Variations images

Please edit Product Attribute and enable Change product image on attribute click option https://prnt.sc/OFlxnJhoLRbm

Then, edit the terms of the attribute and upload Image Swatch.
https://prnt.sc/ryIZHQaYZSkQ.

Enable the Additional variations images option in Theme Settings > Shop > Variable products: https://take.ms/aRzS2 and upload appropriate images to the variations: https://take.ms/MiDHc Then the images will change by clicking on the swatches.

Or you can increase the AJAX variation threshold option in Theme Settings > Shop > Variable products https://gyazo.com/11ddf67a9d8c4d28de3c88163f847bf7

You can read more here https://xtemos.com/docs-topic/variable-products-and-swatches/ and https://xtemos.com/docs-topic/attribute-swatches/

2. Search functionality

There are many errors in Console log related to JS. https://ibb.co/qd7rSGt

You should Purge cache from plugins / CDN or disable it and check again, deactivate all plugins (except Required Plugins) and then reactivate them one by one. This makes it very easy to isolate the plugin causing problems.

Kind Regards,

[great123]

Thank you for the reply.
However I must say, that the angle from which you approached my problem is wrong.

We don’t need to modify or apply any new logic concerning how variations work, because it is already setup the right way, and works on the other products. The variations are based on a product-specific attribute, and do not require any setup elsewhere than the product page itself.

Both the variation image change problem and the search bar occured from the same single origin. Because it is unique to the very products I’ve mentioned. Neither of the problems occured on other products. That’s why I wanted for you to look into it.

Long story short — I’ve isolated the origins of the problem, and as weird as it sounds, it happened to be the image hotspot element later down in the product description. I present you the links below, for you to troubleshoot and pinpoint the exact cause of the problem yourselves.

• This reply was modified 2 hours, 6 minutes ago by great123.

The most likely culprit of the “Uncaught TypeError: h is not iterable” from the imagesloaded.js is because the image-hotspot elements are not assigned with any actual products. I’m not entirely sure of this. But will try and experiment with this later on.

[Author]

Posts