WooCommerce is the best free eCommerce plugin for WordPress that allows you to sell anything online. In this tutorial we can check how to sell a product in different sizes and colors in WooCommerce.
Product variation in WooCommerce allows you to add different flavours of the same product. For example if you add a T-shirt as a product and you have different size of the same product like Small, Medium and Large etc instead of adding them as separate products you can add them as variety to the first product.
Attributes
Before creating your variable product, we need to create the attributes. For that go to Products > Attributes. I created a size attribute with values of small , medium , and large.
Attribute Terms
Click Configure terms in the same row as Styles and add L(Large) , M (Medimum), S (Small)
Once you add them, it will appear on your attribute page.
Variable Product
For creating Variable Product, go to Products and click on Add New. Below your description, you need to assign the product data to Variable Product.
Add Attributes to Products
Then you have to add Attributes to Products. Click Attributes > Custom product attribute > Select Size > Click Add
Add values for attribute and click Save Attributes. Make sure that you check Visible on the product page and Used for variation options so customers can choose variables on the website.
Product Variations
Now you have to create variations of your product. Click on Variations tab > Create variations from all attributes > Go.
As you see in the screenshot below, you can add the pricing, specs details and image of each variation by clicking the arrow.
This is how variable product displays on the website
