How to setup variation swatches in WooCommerce

In this tutorial, we are going to learn how we can set variation swatches for our products on our WooCommerce website.

First, let’s know what are the variation swatches, let’s say you have a shirt as a product and you also different sizes and colors of that same product so those different products are the variations of your product(shirt).

By default in WooCommerce, your product variation shows in drop-down options as you can see in the image above.

With variation swatches, you can set beautiful icons or dedicated buttons to switch between those different variations. You can see the swatches in the image above.

Variation swatches will increase user experience on your website and help you make a high conversion rate. The easier it is to find something in the store higher the chances of people actually buying that stuff.

Now you know enough about variation swatches, now let’s know how you can actually set up variation swatches on your WooCommerce website.

To add variation swatches to our website we will use a free plugin Variation Swatches for WooCommerce, this is one of the best free plugins to add variation swatches on WordPress. You already know how you can install a plugin if not follow this tutorial.

Variation Swatches Setup

  1. To add variation swatches on your website first we will add product attributes. To add attributes navigate to Products>Attributes.
  2. Now type attribute names such as color, size, or fabric and slug and choose the type of attribute and click on Add Attribute. You can create multiple attributes make as many as needed.
  3. After that click on configure terms. To set the terms in the attribute.
  4. Now to add color configure color attribute term and add colors. You can add multiple colors.
  5. Similarly, you can add different terms for different attributes such as size fabric and etc.
  6. Now to set the variations on products go to your product section and select or add a new product.
  7. Now from Product data select the variable product.
  8. Now click on attributes to add different attributes for your product.
  9. You can select the attributes which you have created and then click on Add.
  10. Now fill in the values of the attributes you only select the options you have for the product. Like if your product is available in two colors only select those two colors. And you must tickmark Used for variations or else it won’t be available for variations.
  11. Similarly, you can add multiple attributes and values to your products. Such as size fabrics and so on.
  12. Now go to Variations and select Create variations from all attributes or you can also add attributes one by one.
  13. Now all the variations have been added for the product, now fill in the details for every product price is required or variation won’t get visible on the website. You can set a different image for variations, different prices, stock value sale prices, and more.
  14. After filling in everything click on Save Changes.
  15. Now on your product page, you can see different swatches for variable products.

Now you know how you can use variations swatches on your WooCommerce website. If you face any issues while setting variation swatches let me know in the comment below.

Have questions or confused about something WordPress Related? Join Our Discord Server & ask a Question

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Scroll to Top