Change image based on color

Hello,
First of all, Thank you for this great theme.
Based on the woocommerce default behavior I know that when you have 2 attributes like (color + size ) until all these two attributes will not be selected the variation image will not be changed. So, my question is below:

In the attribute swatches, I’ve chosen color as a default Grid swatch attribute to display and on the main shop page, I can choose the color and the variation image will be changed.
My question: Is it possible to do the same on the product page? If yes, then please share the snippet or code.

Thank you.

Hello,

Thank you very much for choosing our theme and for your warm feedback.

The swatches are just visual customization of the Woocommerce default attribute, so if the variation is created basing on size and color, you need to choose both to select and add to the cart.

If you want to select variation only by color, you need to create variation only on the color attribute.

If you have any questions please feel free to contact us.

Best Regards

Yes, I understand that, but I’m selling products that need two variations (color and size) but I want my customers to let them switch images based on color selection. In the same way, as it is done in the screenshot.
https://prnt.sc/1mzxr6s

Is it possible to do the same on the product page? I assume it’s is possible to implement with JS or JQuery.. but I’m not sure how 🙁

Hello,

Yes, that is possible. Please read and follow this detailed manual: https://xtemos.com/docs/woodmart/variable-products-swatches/

If you have any questions please feel free to contact us.

Best Regards

I have come across this code on SO and another site. It allows a product variation image to change when only 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. I have tried changing data-attribute_name to equal attribute_color, as it is named. I have called this code using the script tag in functions.php but not sure what else I should be doing.
How could I make this work?

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

    }

Hello,

Such kind of customization is not covered by our support. Please use global attributes, you can create more than one color attribute, for example, choose the color, Cloth color, and so on.
Then you can show or hide this attribute filter on the category page. You can show the Cloth color filter in the Cloth category only not to overload the sidebar.

If you have any questions please feel free to contact us.

Best Regards

May I have payable support in that case from your team? for this feature.

Hello,

Unfortunately, we do not provide paid support, you will have to find a developer or company who would help you.

If you have any questions please feel free to contact us.

Best Regards

Hello,

Please see https://xtemos.com/forums/topic/snippet-change-product-image-when-only-one-attribute-is-clicked/

Hello,

We do not guarantee custom snippets. This solution was suggested by one of the site owners and we have not tested it to suggest. You can try this solution.

Best Regards

[Author]

Posts