This in-depth guide will provide you with everything you need to know to set up a WooCommerce variable product. We’ll go through what a variable product is, step-by-step instructions on how to set one up (in detail), and how to master variable products with some WooCommerce product variations plugins.
The plugins mentioned in this guide are available as part of our All Access Bundle, offering a massive 91% discount:
If you want to jump to certain points in the article, just click on one of the following links:
What is a WooCommerce variable product?
A variable product is a type of product in WooCommerce which allows you to select options, like color and size. These options are known as “attributes” and you can create as many as you like.
As a customer, once you’ve selected all of the product options, you can add the product to your cart. The product which you add to your cart is known as a “variation”.
A variation is a final product choice, comprised of a combination of attributes belonging to a variable product.
For example, if your store stocks shoes, they most likely vary in size and color. A variable product allows you to have drop downs on your product page to allow customers to pick which variation they’d like.
How to add a variable product in WooCommerce
Now we’ve outlined the basics of WooCommerce variable products, it’s time to put that knowledge into action.
The following are step-by-step instructions you can follow to start creating variable products in your WooCommerce store.
1. Add global product attributes
Your first step is to create some global product attributes, these can then be applied later to any new or existing products. Before we get into how to create global attributes though, let’s outline what they are.
There are two different types of attributes in WooCommerce:
Don’t forget: attributes are configurable properties of a variable product, like color and size.
Custom product attributes – these are created per-product and should be used when the attribute is specific to only this product, and not used on any other product in your store. Also, note that you can’t filter products on the shop page by custom product attributes.
Global product attributes – these are best used when they apply to more than one product in your store and if you want to use them for filtering on the shop page. For example, size and colour are usually set up as global attributes, because the values are shared across multiple products.
To set up a WooCommerce variable product, we need to first define any global attributes. If your attributes only apply to one product (custom product attributes), skip to section 3; Add attributes to your product.
Go to Products > Attributes
In the ‘Add new attribute’ section on the left, enter the name of your attribute in the ‘Name’ field (e.g. ‘Color’)
Click ‘Add attribute’
Your new attribute will now appear in the table to the right.
Now we need to add the attribute terms. These are specific values of an attribute, like red or blue.
Click ‘Configure terms’ in the ‘Terms’ column of your attribute
In the ‘Add new Color’ form on the left, enter the name of your first term (e.g. ‘Red’)
Click ‘Add new Color’
Keep repeating for each term until you’re done
By this point, you should know what global attributes are, have your global attributes set up and have some terms in place. Once you’re satisfied with your results, we can move onto the next step.
2. Select your product type and create your product
Once you’ve added any global product attributes, you’re ready to configure your variable product. In this section, we’ll take you through setting up the basics of your WooCommerce variable product.
To add a WooCommerce variable product, you must first set the product type to ‘Variable product’:
Go to Products > Add New
Scroll down the page to the ‘Product Data’ section
Select Variable product from the dropdown
3. Add attributes to your product
Your variable product has been set up and is now ready for you to start adding the attributes we set up earlier. In this section, we’ll outline how to add global attributes to your product, as well as creating custom ones.
Firstly, let’s add the attributes we set up earlier to your product.
Click the ‘Attributes’ tab in the ‘Product Data’ section.
If you’re adding global attributes:
In the ‘Custom product attribute’ dropdown, select one of the attributes you created and click ‘Add’.
Click the ‘Value(s)’ menu and select any attribute values you’d like to display as options for the product (you can select more than one).
If you’re adding custom product attributes:
In the ‘Custom product attribute’ dropdown, keep this selected and click ‘Add’.
Enter the name of your attribute in the ‘Name’ field (e.g. ‘Color’).
In the ‘Value(s)’ section, enter the name(s) of your terms (e.g. ‘Red’).
Make sure to separate each term with a pipe symbol ‘|’.
Make sure that ‘Used for variations’ is checked for each attribute you want to include as a dropdown on the product page.
Then click ‘Save attributes’.
Iconic tip: Oftentimes, displaying these product options to your customers in a dropdown isn’t the best user experience for your customer. For example, wouldn’t it be better to display product colors as color swatches?
Using WooCommerce Attribute Swatches makes it easy to display your product options as color swatches, image swatches, text buttons, and a radio button list. You can also charge additional fees based on the selected attribute values, and use the swatches in your product filters.
Download WooCommerce Attribute Swatches
Display variable product options as color swatches, image swatches, text buttons, or radio buttons. Help your customers make a purchasing decision.
At this point, you should have added either global or custom product attributes to your product and made them more user-friendly with WooCommerce Attribute Swatches.
Now let’s move onto adding WooCommerce variations to your product.
4. Add WooCommerce variations to your product
The following is broken down into sections. Here we’ll cover how to create a single ‘catch-all’ variation, how to manually create multiple variations and how to create variations in bulk. But first, let’s talk about what a variation is:
A variation is the final product that your customer will add to their cart. It is a product in itself, tied directly to the attribute choices your customers make. For example, a Small, Red T-Shirt is the final selected variation of a variable product.
Note: It’s important to make sure your variations all have a price and are ‘In stock’. If not, they won’t show on the product page for your customers.
Let’s take a look at how you create variations, now that you’ve added the attributes.
4.1. Create a single ‘catch-all’ variation
You can go as in-depth as you like when defining variations.
You could create a single variation for your variable product which covers all combinations of the selected attributes.
This is ideal if you don’t need to:
Track stock per variation
Change the price based on the selected variation
Change the product image based on the selected variation
Or your variations don’t have unique SKU numbers
To create a single ‘catch-all’ variation:
Click to edit your variable product
In the ‘Product Data’ section, click the ‘Variations’ tab on the left
In the drop-down select ‘Add variation’ and click ‘Go’
When your variation is created, leave the attribute dropdowns on ‘Any…’
Click the row to expand the variation details
Ensure you have entered a ‘Regular Price’ for the variation
Ensure the variation is set to ‘In Stock’
Click ‘Save changes’
Now when your customers select the product options on the product page, this is the variation they will be adding to their cart.
4.2. Manually create multiple variations
However, it’s common for variations to require their own stock settings or product imagery.
In this case, you’d need to create multiple variations. One for each variation which requires different settings.
The process is much the same as before, however this time, you want to select the attributes for each variation, rather than leaving them as ‘Any…’.
Iconic tip: By default, WooCommerce only allows you to give each variation one image. This image is then displayed when your customer selects the product options.
This isn’t always enough for the majority of store owners.
Fortunately, our WooThumbs plugin allows you to add multiple images to each variation.
Now your customers can see a full gallery of images related specifically to the variation they’ve selected.
Download WooThumbs for WooCommerce
Help customers make a buying decision with more than 1 image per product variation.
If you want to create a variation for every possible combination of attributes, then you can run a bulk process to create them.
Click to edit your variable product
In the ‘Product Data’ section, click the ‘Variations’ tab on the left
From the ‘Add variation’ dropdown, select ‘Create variations from all attributes’ and click ‘Go’
This will create a maximum of 50 variations at a time. Click to run it again until no more variations are created
If you’ve created a large number of variations and don’t want to set a price for each one, one-by-one, WooCommerce has you covered.
Again, click the ‘Add variation’ dropdown.
Select ‘Set regular prices’.
Enter your price and click ‘OK’.
Note: If your prices differ between variations, then you’ve no choice but to enter the price individually for each variation.
It’s worth taking a look at the other options in the ‘Add variation’ dropdown to see which other actions might save you some time.
By this point you should have added variations to your product by either creating a single ‘catch-all’ variation, manually creating multiple variations or creating variations in bulk. You also know how to add multiple images to each variation with WooThumbs.
Now it’s time to give your shop a boost and improve the standard way of showing WooCommerce variations with a plugin.
5. Display WooCommerce variations on the shop page
We’ve gone through how to set up a WooCommerce variable product, now let’s talk about having a little more control over product variations. Here we’re going to outline how to improve WooCommerce’s standard product display with a product variations plugin.
Usually, a WooCommerce variable product is shown as only one item on the shop page, with a generic image to cover all possible combinations of the product. This means the customer will only see a small amount of what your shop has to offer. With WooCommerce Show Single Variations, you can display each variation of a variable product as though they are separate products.
As well as this, you can decide which variations to show on the shop page and customise their titles for better customer experience.
This means when your customers are filtering or browsing your product collection, the products they see are highly relevant in terms of selected options, product imagery, and product titles.
There you have it, your product variations should now be displaying each variation of a variable product as though they are separate products. This not only enhances product browsing but improves customer experience too.
In this guide, you have learned the basics of what a WooCommerce variable product is, step-by-step instructions on how to set one up and improve your store’s customer experience using the variable product plugin Show Single Variations.
Once you get used to it, WooCommerce variable products are fairly easy to set up and use. This guide should have helped you get to grips with them.