How to add color swatches to woocommerce product page?

how to add color option to woocommerce product

How to add color swatches to woocommerce product page?

In this post I will show how to create variations for your WooCommerce products.

Variations allow users to choose different options for a product. This means you can sell a product in different sizes and colors.

O1: Create Attribute

At the very beginning, we have to create color attribute and its variations globally. To create color attribute globally, navigate to Products >> Attributes. As we’ll create color attribute for our product. Fill the name field with your desired attribute name. In this tutorial, I’ve termed attribute name: Color.

You can leave Slug field empty. It automatically generates the slug for the attribute. From the Type dropdown select Color attribute type. When mandatory fields are filled, select Add Attribute button.

After creating attribute, you will notice a list is created in the right side. Check the following screenshot.

Step 02: Create Attribute Variations

The more variations you would add, they would get added to this list.  When an attribute is created, we need to create attribute variations. To create product variations, click on the Configure terms from the attribute list.

As we have created a Color attribute. We’ll add colors as variations inside the Color attribute. In this tutorial, we’ll add Green, Blue, and Red Variations. To create variation inside Color attribute. Fill the Name field with your desired variation name, leave the slug field empty, and select your desired color from the color picker.

Step 03: 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 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 allbutton. 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 Gobutton. It’ll add all available variations like the following.

You can see the above image that Blue, Green, and Red color variations are 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, variations won’t be visible on the product frontend.

If you can successfully add WooCommerce color variation swatches in OceanWP theme. You can see the following view in your product frontend.


1. Using Variation Swatches for WooCommerce” Plugin (FREE)

This free plugin is downloadable from the WordPress repository and has more than 10,000 active installations.

Once the plugin is installed, go to WordPress Dashboard > Products > Attributes and open one of the existing attributes, for example “Color” if you have it already.

The attribute edit page will now have a new select field called “Type”. You can now pick “Color” from the drop-down to indicate you want this attribute to show as a color-picker.

Edit attribute – Variation Swatches for WooCommerce

b) Edit Existing Attribute Terms

Now that the attribute has been assigned to a variation swatch (color), it’s time to assign the right color to each attribute term.

If you have red, blue and yellow, you will open each term and pick a color for each one (#ff0000, #0000ff and #ffff00 respectively).

Assigning colors to the Color Attribute terms – Variation Swatches for WooCommerce

c) Check Out the Single Product Page

That’s it really! Once you save the colors, the single product page will automatically show colors as swatches.

Final result with color swatches – Variation Swatches for WooCommerce


0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments