Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Change product image by selecting only one attribute in Woocommerce Variable Products

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 28
    Answer it

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

     

 0 Answer(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: