Change product image by selecting only one attribute in Woocommerce Variable Products

If you have multiple attributes in a woocommerce variable product then you probably have noticed that by default it will not show variation product image unless you select all the attributes. This is some time not what you want specially if the first attribute is color since you want to show the that same color image as soon as that color is selected instead of requiring users to select size etc as well.

Below is a jquery snippet which will change product image as soon as the first attribute is selected. This code will need some tweaking and will not work right away. You will have to change the jquery selector to match your site code. You can message me through contact form if you need help with that.

jQuery( document ).ready(function() {
    var image_to_show = '';
	var full_image = '';
    var variations = JSON.parse(jQuery(".variations_form").attr("data-product_variations"));

    if(variations) {
        var first_attr = Object.keys(variations[0].attributes)[0];
        // when swatch button is clicked
        jQuery("div[data-attribute_name='"+first_attr+"'] div").click(function() {
			
            var choice = jQuery(this).attr("data-term");
            var found = false;
            // loop variations JSON
            for(const i in variations) {
                if(found) continue;
                if(variations.hasOwnProperty(i)) {
                    // if first attribute has the same value as has been selected
                    if (choice === variations[i].attributes[Object.keys(variations[0].attributes)[0]]) {
                        // change featured image
                        image_to_show = variations[i].image.src;
						full_image = variations[i].image.full_src;
                        found = true;
//Here we are changing image, in my case i have to change it at multiple places
//because of some plugins which client had installed.
//You may only have to replace it at 1-2 places. Just change the selector accordingly.
						jQuery(".woocommerce-product-gallery__wrapper a img").attr({
							"src": image_to_show,
							"data-o_src": image_to_show,
							"data-o_data-src": full_image,
							"data-src": full_image,
							"data-large_image": full_image	
						}).removeAttr("srcset");
						
						jQuery('.woocommerce-product-gallery__image a').attr({
							"href": image_to_show,
							"data-o_href": image_to_show
						});

                    }
                }
            }
        });

    }
});