Home » WooCommerce » How to add product variations in WooCommerce

How to add product variations in WooCommerce

If you run an online store you probably have some products with variations. For example – phones or other gadgets in multiple colors. WooCommerce allows setting product variations but it might look a bit complicated if you never set product variations before.

Today I’ll show you how to create variable product in WooCommerce, and will show you how to setup each variation to make sure that prices, images and other product data would match the exact variation of the product.

How to add product variations in WooCommece store

In the example we’ll create a variable product – an iPhone with 3 different colors. Customer will be able to select the color in the product page.

First step you need to do before adding product variations for a product is to create variation names in WooCommerce:

Go to Products >> Attributes in your WordPress admin panel, and create a new Attribute. Enter name Color, and hit Add attribute.

woocommerce how to add attributes

Once you add new attribute it will be visible on the right side of the page. Click on it’s name to add variation titles.

woocommerce attributes

Once you open the attribute you can add variations for it. Add name, and hit Add new [your attribute name].

add product colors in woocommerce

Once you add all the variations you need it’s time to add variable product in WooCommerce. Open the product you want to add variations to, and change Product Type to Variable product.

create variable product in woocommerce

Then click Attributes tab. Select Custom product attribute -> Color, and click Add button.

woocommerce product variable

Click on the Value field, and select all the colors you have. Make sure you also check Used for variations checkbox, and hit Save Attributes.

variable product in woocommerce-

Now you’ll be able to create variations from previously added attributes. Open Variations tab on the left, select Add variation, and click Go.

woocommerce product with options

Select one of the colors, and click on it to expand and show it’s settings.

Now you can add data for selected product varation:

  • add regular price or sale price for product variation (variation prices can be different)
  • manage it’s stock individually (if needed)
  • add an image which displays the exact product variation
  • add weight, dimensions, stock status, SKU and other information
woocommerce add product variations

Once you add all the information you can click Add variation >> Go again, and add another product variation.

Once you add all product variations you may close their settings, and change their order by dragging them up or down. Variation order will be shown in the same order as you see in in Product Data section.

woocommerce reorder product variations

Best WordPress hosting 2024

Don’t forget to Save changes to make sure that all the data and variation order is saved.

woocommerce add variable product

That’s it – now you have variable product in your WooCommerce store.


Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials

Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK