How To Set Up WooCommerce Image Swatches For Image Variation

Now that you know how to setup Color Swatches for WooCommerce Variation Swatch. In this lesson, you will learn how you can setup Image swatches for WooCommerce product variations.

To set set up images swatches, follow the steps below.

1. Enable Dropdown To Button Swatches
2. Go To Your Created Attributes
3. Assign Your Desired Attribute As Image Type
4. Set Color Swatches For Variation Terms

1. Enable Dropdown To Button Swatches #

Click on the Controls tab on the left.

Here, turn On the Dropdown To Button Swatches option.

Then save settings. Now you will see that the variations on product pages will be displayed in the form of button swatches.

2. Go To Your Created Attributes #

Go to Dashboard > Products > Attributes and you will find the list of attributes you have already created in your store.

On the right side, you can see the list of created attributes you have.

3. Assign Your Desired Attribute As Image Type #

Now, hover your mouse on the attribute name.

You will get the options to Edit or Delete.

Click on Edit and it will take you to the Edit attribute page.

Once you are on the Edit Attribute page, you will see you have a field for Type.

Click on it and choose the option “Image”.

Then click on the Update button below.

4. Set Variation Terms For WooCommerce Image Swatches  #

Go back to Dashboard > Products > Attributes.

Now, Click on to Configure Terms to place your desired Image.

It will take you to the following page.

Hover your mouse on one Image term and you will find the option to Edit.

Click on to Edit, it will take you to the edit page.

Here, below you will see that you have the option to upload or add an image.

Click on “Upload/Add Image”.

Choose an appropriate image then click on the Update button below.

Once updated, go back and you will see that a preview of the image is there just beside the name of the variant term.

Do the same for the rest of the variants and that’s it. Now your products will have image variation swatches instead of dropdown selection for these variants.

Here’s an example of how it looks.