Variation Swatches for WooCommerce has a few exclusive features to display product variants.
One of them is to set up WooCommerce color swatches on your product pages to give your customers a visual idea of the product color variations.
To set up WooCommerce color swatches, follow these simple steps below:
1. Enable Dropdown To Button Swatches #
Click on the Controls tab on the left.
Here, turn On the Dropdown To Button Swatches option.
Then click on the Save Settings button.
After that, the variations on your product pages will be displayed in the form of button swatches.
2. Go To Created Attributes #
Now, go to the Dashboard, click on the Products tab, and select Attributes.
Here you will find the list of attributes you have already created in your store, and the option to add new attributes.
On the right side, you can see the list of created attributes you have.
3. Change Your Desired Attribute As Color 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 “Color”.
Then click on the Update button below.
4. Set Swatch Colors From the Color palette For WooCommerce Color Swatches #
Go back to Dashboard > Products > Attributes.
Now, Click on to Configure Terms to place your desired color.
It will take you to the following page.
Hover your mouse on one color term and you will find the option to Edit.
Click on to Edit it will take you to the edit page.
Here, you will find an option to choose a color.
Click on “Select Color” and you will get the option to assign a color.
Choose an appropriate color and click on Select Color again.
Then click on the Update button below.
Once updated, go back and you will see that a preview of the color is there just beside the name of the respective color variant term.
Do the same for the rest of the color variations and that’s it.
Now your products will have WooCommerce color swatches instead of dropdown selection for color variants.
As you can see, it’s really simple.
Follow this guide to learn more about WooCommerce variation swatches.
