Starting out with Variation Swatches for Woocommerce

Let’s start by understanding how to set this plugin up with step by step process.

Step 1: Setting up attributes of the products

In order to use this plugin to create different variants, you will need to set up the different attributes that you need as a differentiator between the variants. For example, color, sizes and labels. Follow the steps below to set up the product attributes:

• First, navigate to the WordPress dashboard
• Click on Products and select attributes

• To add an attribute, first give it a name (i.e colors)
• Enter the slug of the attribute (i.e colors)

• Select the type of the attribute. As of now there are three different types that are available inside the plugin and they are color, label and image.

• Select the shape of the attributes. There are 4 different types of shapes are available such as default, square, rounded corner and circle.

By default the swatches will be designed as you customize them from the settings page as shown in the image below. You can change the shape of the swatches to rounded corner, square and round as per the requirement.

By default the size of the swatches will be selected as 24px. You can change the size by clicking on the box and entering the value of the pixels as per your requirement.

Finally, click on the Add Attribute button to add the changes to the site.

Step 2: Configuring the terms of the Attributes

Once the attributes are added, you will need to configure the terms for each of the attributes. You will need to click on the configure terms button next to each attribute.

In this example, we are going to configure the color options for a particular attribute. There are 4 options that you can select from. These options are the name of the color, slug of the color, a short description of the color and a color selector to select the color. Once you have selected the options as per your requirements, click on Add New button at the bottom to add it to the list.

You can add as many attributes as you need based on the requirement. Once you have added the terms, the final screen would like the below image.

Step 3: Setting up product variations

Now that the product attributes are set, you will need to select the product variations in order to display the variation swatches on the front-end of your website.

• To select the product variations, please navigate to the Products and click on All Products.
• Click on Edit next to the product on which you would like to set up the variations

• Under product data, select the product type as the Variable Product

• Click on the Attribute tab and select the attributes that you would like to be included in the front-end and click on the Add button to get them added to the list

• Once the attribute is added click on the Select All button to add all the variants to the product.
• Ensure that the Used For Variation button is checked
• Click on the Save Attribute button to save the changes

• Once the attributes are saved, you will need to set the variation in the product. To do that, please navigate to the Variation Tab.
• Click on the Go button to create the variations
• This will add the variation to the product based on the attributes that you have selected earlier

• You can also set a custom image and price for this variant by opening the drop-down menu
• Select the variation by clicking on the drop-down menu
• Add a custom price for this variant by entering the amount in the Regular Price field
• Add an image by clicking on the image button
• Repeat the same process to another variants

Once you are done editing the field, click on Save Changes button at the bottom and update the product.