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:

Attributes

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:

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’:

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:

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

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:

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’:

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:

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:

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

Variations

We now have two attributes available to use:

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

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

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’:

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)!

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

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:

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:

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

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

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

Summary

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,