Variable Products

A variable product in WooCommerce is one that has “variables” – also known as options. If you are selling books you might be offering the same book as a hard cover or soft cover, shoe sellers will stock the same shoe in different sizes. These are when you would use variable products.

On the add/edit product page we can change the product from a ‘Simple product’ to a ‘Variable product’ in the product data section:

Variable product option in product data section


Variable products need variations. The first step is create ‘Attributes’ which can be thought of as the title for your group of variations. ‘Sizes’ and ‘color’ would be examples of attributes.

There are two kinds of attributes: global and custom. Global attributes can be used on any product, custom attributes only on the product in which they are created.

Creating global attributes

For our sample online computer store almost all our computers will be offered with a choice of hard drive size, so we want to make ‘Hard Drive’ a global attribute to make it available to use in any product. This is not done on the add/edit product page but under ‘Products’ then ‘Attributes’ in the main left hand menu:

Attributes form

In our case we will just enter a name into this form – the slug will be automatically created. When you click ‘Add attribute’ the attribute is added to the listing on the right hand side of the same page.

The next part is to create the different hard drive options, and we will do this by clicking on ‘Configure terms’:

Attribute list

An important thing to remember when adding terms is that you will get to choose which term (option) is added to each product when we add the variations to the product, so we can add all our hard drive options here even though some of our computers may not have that option.

We fill in the name and description and let the slug be automatically generated:

Term form

As we add each term they will appear on the list to the right of the same page:

Term list

With ‘Hard drive’ added as a global attribute, if we go to a product add/edit page we will see ‘Hard Drive’ listed on the ‘Attributes’ area of the Product Data area:

Available attributes

To add the global attributes we select the one we want from the list the ‘Add’. Once the Attribute is listed we then need to load the terms by clicking ‘Select all’:

Attribute terms

These will show up in the ‘Value(s)’ box, and we can delete any we don’t want for this product. Then we need to click the ‘Save attributes’ button:

Attribute terms loaded

Creating Custom attributes

In our sample store only one computer will offer a choice of monitor size. Since we won’t need this attribute on any other product we will create a custom attribute. With ‘Custom product attribute’ selected click ‘Add’ and the form to add the attribute will appear:

Custom attribute form

We add the attribute name and the three values we will offer, each value divided by the vertical pipe character, then click ‘Save attributes’:

Custom attribute options added


We now have two attributes available to use:

Two Attributes added

Clicking on each opens up the full details box (and they can be edited further here if needed:

Attribute details showing

If you have not done already, change the product type from simple to variable. A new tab will appear on the left, ‘Variations’:

Switched to variable product

Click on the ‘Variations’ tab, and in our case we want to create variations from all our attributes, so we select that option then ‘Go’:

Create variations option

A warning box will appear noting that many variations may be created. For example, if you have two attributes with three terms and one with four you would create 36 variations (3 x 3 x 4)!

Warning box

We had two attributes with three terms so this creates 9 variations (3 x 3):

Variations after creation

As it notes at the top of the list, none will show up yet in our store as none of the variations have a price added to them. We need to click on each variation this which will open up the full form and add the details we want:

Variable product details form

Changes to how products are displayed

After we have entered all our variation details and saved the product, how it displays to the website user will change (and will differ depending on your theme). On the shop page the price is now shown as a range covering all the variations, and the ‘Add to cart’ button is now replaced by a ‘Select options’ button which will take the user to the product page. Here is our example variable product next to a simple product:

Shop display

On the product page itself there will now be options for the customer to select the variation they want:

Product page options

When they make their choice the price for that combination will appear:

Product options selected

The Cart, Checkout and all the order emails will show the choices made so you will know exactly what to supply to your customer:

Cart page


Once you get used to creating attributes and terms offering your inventory as variable products is a very simple task. If you need help with this, or any WordPress/WooCommerce aspect, get in touch with Nerd Crossing who have many years experience of problem solving and customization of this platform,