Change product image by selecting only one attribute in woocommerce variable products

Question

0.00/5 (No votes)

See more:

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 22-Mar-22 12:29pm

riad Jamil

Updated 25-Aug-22 23:17pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Member 15748502 · Answer 1 · 2022-08-25T23:17:00

/***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
                        });
 
                    }
                }
            }
        });
 
    }
});