[Woocommerce] Change image in archive based on attribute click

Hi everyone, how do I create a colour selector that changes the product image?

I use Woocommerce and the plugin YITH Color and Label Variations Pro.

The selector works on individual pages but does not produce anything on archive and shop pages.

I have activated all the settings in both Wc and the YITH plugin to enable the functionality also in archive pages but it does not work.

The interesting fact is that with a basic WordPress theme like Twenty Twenty everything works correctly.

If you don’t know how to solve this, do you at least have any idea where I should look? Obviously I have already searched the bricks forum and the WooCommerce documentation.

Do you have any examples of a bricks + WC site that has this functionality?

Thanks everyone

Solved. I have changed the plugin. instead of Yith color and label variations i have choose Variation Swatches For WooCommerce Pro by getwooplugins and it works with no extra settings

hello, after we put the variation on the archive page,
whan we click the swatch, how to swatch the feature image?

oh!! get it,

set the archive product wrapper class to the getwoo option

1 Like


I have a question about variation swatches. I have the pro version of the variation Swatches by getwooplugins and I am trying to show color swatches on archive pages.

How did you manage to display your variations in the query loop?

Thank you!

Sorry for the late reply @timchen got the solution right. However, I attach a screen of the settings for the archive pages. You have to use that classes or replace them with yours costum css.

1 Like