Click here to Skip to main content
15,562,816 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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!

What I have tried:

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");
            }
        });

    }
Posted
Updated 26-Aug-22 0:17am

1 solution

/***Variable Images***/
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='attribute_pa_farben'] div").click(function() {
             
            var choice = jQuery(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;
                        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
                        });
 
                    }
                }
            }
        });
 
    }
});
 
Share this answer
 
Comments
Dave Kreskowiak 26-Aug-22 8:14am    
Doing someone's homework for them is never is good idea.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900