This relates to an online clothing store. We have variable products set up with colour and size attributes, for example a product might have 2 variations; Green/Any Size and Black/Any Size.

There is an image of the product in the corresponding colour for each variation, but at the moment the image doesn't switch unless a colour AND size is selected (I'm aware this is how Woo works out of the box). We would like to make it so that the image switches when JUST a colour is selected. I have come accross this code on SO and another site. It allows a product variation image to change when only the one main attribute is selected (e.g. color), rather than having to select all variation attributes (e.g color and size) in order for the image to change.

This code was written to work with a plugin, however the person who wrote it mentioned changing line 6 in order to use without plugins. Can someone help me to adjust this code to my ecommerce store? I know that this can be easly done by someone who understand JS, but since I am not a developer it's really hard for me. I hope someone could help!

var image_to_show = '';
    var variations = JSON.parse($(".variations_form").attr("data-product_variations"));
    if(variations) {
        var first_attr = Object.keys(variations[0].attributes)[0];
        // when swatch button is clicked
        $("ul[data-attribute_name='"+first_attr+"'] li").click(function() {
            var choice = $(this).attr("data-value");
            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;
                        found = true;
                    }
                }
            }
        });

        // after woo additional images has changed the image, change it again
        jQuery(".variations_form").on("wc_additional_variation_images_frontend_image_swap_done_callback", function() {
            if(image_to_show.length) {
                $(".attachment-shop_single").attr("src", image_to_show).removeAttr("srcset");
            }
        });

    }