Variation Swatches

WooCommerce Variation Swatches provides a much nicer way to display variations of variable products. You can present product colors, sizes, styles, and many things in a better way which is not supported by WooCommerce.

After enabling this add-on, variable products will still show dropdowns. You need to configure product attributes.

Step 1: Create Attribute Variations

1. Log in to your WordPress dashboard, navigate to the Products menu, and click Attributes.
2. Click on to attribute name to edit an existing attribute or in the Add New Attribute form, you will see the default Type selector.
   
3. Click on that Type selector to change the attribute type. Besides default options Select and Text, there are more than 3 options Color, Image, and Label to choose.
4. Select the suitable type for your attribute and click Save Change/Add attribute
5. Go back to manage the attributes screen. Click the cog icon on the right side of the attribute to start editing terms.
   
6. Start adding new terms or editing existing terms. There will be a new option at the end of the form that let you choose the color, upload images or type the label for those terms.
   

Step 2: Enable Attribute Variation in WooCommerce Variable Product

It’s time to enable color swatch inside a variable product. To enable color swatch in your desired product. Get into your desired product edit mode. Make sure you have a variable product selected from Product Data.

After selecting the Variable product from Product data dropdown, head to the Attributes Tab. Click on Custom product attribute dropdown. In this dropdown, you can see all your globally created attributes. As we’ve only created a color attribute, it’s now showing the color attribute.

Now select the Color attribute and click on Add. You can see the following screens appears afterward.

If you want to select all available variations of the color attribute, click on Select all button. If you want to deselect all selected variations at once. Click on Select none. Button. Add all variations by selecting Select All button, checked Used for variations settings, and click on Save Attributes button. Check the following screenshot for guideline.

Now get into Variations tab. Click on Add Variation dropdown. Here you will notice two options. First one is Add Variation and the second one is Create variations from all attributes. 

In this tutorial, I am going to select Create variation from all attributes and click Go button. It’ll add all available variations like the following.

You can see in the image above that Blue, Green, and Red color variations are there. From this screen, you can add variation images, prices, and other specific details. When you have done adding all your required details in each variation, click the Save Changes button.

Remember! Don’t forget to add the price in each variation, otherwise, variation won’t be visible on the product frontend.

This feature changes the URL each time users select a variable, helping users share the variation with other people.

Add product variation gallery images

With this feature, you can create additional images for each variation. After adding variations to your products, you will go to each variation and see the Add product variation gallery images option as the image shown below:

You click on the option and upload gallery images for your product variation. The number of images is not limited.

Update the change and you will have the image gallery for your variations as in the image below:

On the single product page, you also can change the gallery layout by going to Customize.

Then, select WooCommerce > Product Single > Product Images > Gallery Layout.

There are four pre-made layouts for you to choose from. Select the one you want to set for your variation image gallery.

Here is the horizontal layout:

And this is the column layout: