1. Home
  2. Docs
  3. Pro Modules
  4. Variation Swatches

Variation Swatches

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 to attribute name to edit an exists attribute or in the Add New Attribute form, you will see the default Type selector.
  3. Click to that Type selector to change attribute’s type. Besides default options Select and Text, there are more 3 options Color, Image, 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 attribute to start editing terms.
  6. Start adding new terms or editing exists terms. There is will be a new option at the end of the form that let you choose the color, upload image or type the label for those terms.

Step 2: Enable Attribute Variation in 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 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 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 variation like the following.

You can see the above image that BlueGreen, and Red color variation is there. From this screen, you can add variation image, variation price, and other variation specific details. When you have done with 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.

Was this article helpful to you? Yes No

How can we help?