How to setting variable products – colour and size in woocommerce

Google+ Pinterest LinkedIn Tumblr

Most of the Woo-commerce site had products with different style Like image Zooming option, Image change option, image overlay options are used. But most of the client want to add Variants option like COLOUR and SIZE.

Variable products in Commerce allow you to create specific products that have several variations, for example, different colors, sizes, prices, and other variable data. Here We are going to learn how add variant to the product and also a particular products.


Before creating your variable product, you will need to create the attributes. Go to Products > Attributes. You will get this screen. When you click on #2 to add terms, the next screenshot shows you what that will look like.


Attribute Terms

After add Attributes have add Attribute Terms for each attribute. For example add Different sizes for Size attributes from the previous image which we mentioned 2 point.


Creating the Variable Product

Go the Products – Add New product or u can edit existing products. then select the Product data – select Variable product option


Adding Attributes to Products

Select the Attributes option and add the attributes to the product which we previously created.

Adding Attributes to Products

Add Attributes Option

Select values of the size.

1.Check the option of Visible on the product page.

2. Check the Used for variation

Adding Attributes to Products

You may select one of the following or you can also select all for the following option. Then you can add additional Attributes and Terms to this specific product.

Adding Attributes to Product


Now We need to add variant for products.

  1. If we have a lot of variants option then it will give bulk variant edit option in drop down.
  2. There we can set the  default attribute that will show in drop down.
  3. Link all variants. it may easy to get all variants automatically.

Setting up the Variations

Setting is nothing but enable option in the products like we set up the screen above.

Creating the Variable Product

Note this small box. Click on this to add the specific image for that variation.

After Set up everything will now show

1. The pricing will now show the range of all variations.

2. A drop down menu of the attribute Sizes and its terms. Notice here that on the screenshot above on first creating variations, the fact that I kept the Sizes and Colours to default, the drop-downs will say Choose an option…

3. And the drop down for the Attribute Colours.

Creating the Variable Product

I'm Rajasekar - Web developer, Freelancer, Blogger and Owner of DeveloperDesks. From India lives in Bahrain. I love to do coding, Creating websites and trying different with code and designs. You Can Hire Me