Snippet: Change product image when only ONE attribute is clicked

A very common scenario is to change clothing images but not require them to pick a size. This is normally a premium feature of other color swatch plugins!

Here is my attempt at making the first attribute automatically change to the variation image even if the other attributes are not selected. Change the var nthAttributeToSwitchImage = 1; if you want something other than the first attribute to change the image.

Followed the post on https://stackoverflow.com/questions/63525264/woocommerce-change-product-image-when-only-one-attribute-is-selected

although the StackOverflow suggested using the “wc_additional_variation_images_frontend_image_swap_done_callback” event example doesn’t exist with woodmart so I had opted for a simple javascript timeout. I also did a hack for waiting until the swatch dom elements exist because they seem created from

This code isn’t perfect, in fact, it’s very hacky but I am providing it for free. Please feel free to improve it and post it!

Just add this code to your on document ready section of Theme Settings -> Custom JS section. Screenshot:

The latest version of the javascript code snippet can be found here: https://gist.github.com/BHare1985/f9c409c825822b769c06397bfc8b84cc

Hello,

Thank you very much for sharing your snippet here. We are sure it will be useful for other clients.

Kind Regards

[Author]

Posts