woocommerce product variations

WooCommerce Tutorials

How to Use Variable Products and Product Variations in WooCommerce

This in-depth guide will provide you with everything you need to know to use variable products and product variations in WooCommerce.

We’ll go through what a variable product is and how to optimise WooCommerce product variations for sales.

As well as step-by-step instructions on how to set one up on your WordPress site (in detail), and how to master variable products with some WooCommerce product variations plugins.

If you want to jump to certain points in the article, just click on one of the following links:

Optimize WooCommerce product variations for sales

WooCommerce product variations are a powerful tool in boosting the sales of your online store. But, in a standard WooCommerce install, they lack some of the amazing sales features that really give your store a boost.

The following plugins enhance WooCommerce product variations, here’s how:

Add variation swatches to WooCommerce

variation swatches woocommerce

Adding image and color swatches to your WooCommerce product variations makes for a much better and visual experience for your customers.

WooCommerce Attribute Swatches allows you to add these swatches image and color swatches, along with text and radio buttons to make shopping for your variations quicker and easier.

Start your 14-day free trial of WooCommerce Attribute Swatches

Start your free trial now and instantly add color and image swatches to your WooCommerce variations.

or learn more

Visual learner? See this technique in action in our video:

Add extra variation images to your WooCommerce products

additional variariation images woocommerce

In a standard WooCommerce install, you can only add one variation image to each variable product. This can be quite frustrating for WooCommerce store owners who want to add multiple variation images to their products.

WooThumbs for WooCommerce allows you to do just this, as well as customize your entire WooCommerce product gallery from image zoom to layout.

Start your 14-day free trial of WooThumbs for WooCommerce

Start your free trial of WooThumbs and instantly include additional variation images for your products in WooCommerce.

or learn more

Show variations on the WooCommerce shop page

variations on the shop page woocommerce

By default, WooCommerce shows your variable products as just that, products with multiple variations on the shop page.

But as a store owner, you might want to display each variation as an individual product on the shop page instead. This way you can display your whole product catalog, reduce clicks for customers and increase sales.

WooCommerce Show Single Variations allows you to do just this, allowing customers to filter by each variation and browse all products as if they were individual items.

Start your 14-day free trial of Show Single Variations

Start your free trial now and instantly show WooCommerce variations on the shop page.

or learn more

We go into each of these in more detail further down in the article, but for now, let’s get back to the basics.

What is a WooCommerce variable product?

A variable product is a type of product in WooCommerce which allows you to select options, like different colors, size, and SKU. 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 a new 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 t-shirts, they most likely vary in size and color. A WooCommerce variable product allows you to have drop-down menus on your product page to allow customers to pick which variation they’d like.

WooCommerce variable product

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.

Step 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.

Note: For a more in-depth look at attributes, see our WooCommerce product attribute guide.

There are two different types of attributes in WooCommerce:

Don’t forget: attributes are configurable properties of a variable product, like color, size, and SKU, allowing you to add a large number of product variations.

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 online store and if you want to use them for filtering on the shop page. For example, size and color are usually set up as global attributes, because the values are shared across multiple products on your WordPress site.

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.

  1. Go to Products > Attributes
  2. In the ‘Add new attribute’ section on the left, enter the name of your attribute in the ‘Name’ field (e.g. ‘Color’)
  3. Click ‘Add attribute
woocommerce variations

Your new attribute will now appear in the table to the right.

woocommerce product variations

Now we need to add the attribute terms. These are specific values of an attribute, like red or different colors.

  1. Click ‘Configure terms’ in the ‘Terms’ column of your attribute
  2. In the ‘Add new Color’ form on the left, enter the name of your first term (e.g. ‘Red’)
  3. Click ‘Add new Color
  4. Keep repeating for each term until you’re done
woocommerce display variations

By this point, you should know what global attributes are, have your global attributes set up, and have taken the time to configure terms. Once you’re satisfied with your results, we can move onto the next step.

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

  1. Go to Products > Add New
  2. Scroll down the page to the ‘Product Data’ section
  3. Select Variable product from the product data dropdown
variable product woocommerce

Step 3 – Add attributes to your product

Your WooCommerce 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 attributes.

Firstly, let’s add the attributes we set up earlier to your product.

  1. Click the ‘Attributes’ tab in the ‘Product Data’ section.
woocommerce variable product plugin
  1. If you’re adding global attributes:
    1. In the ‘Custom product attribute’ dropdown, select one of the attribute names you created and click ‘Add’.
    2. 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). This is how you can add product variations to your ecommerce options.
woocommerce variations plugin
  1. If you’re adding custom product attributes:
    1. In the ‘Custom product attribute’ dropdown, keep this selected and click ‘Add’.
    2. Enter the name of your attribute in the ‘Name’ field (e.g. ‘Color’).
    3. In the ‘Value(s)’ section, enter the name(s) of your terms (e.g. ‘Red’).
    4. Make sure to separate each term with a pipe symbol ‘|’.
  2. Make sure that ‘Used for variations’ is checked for each custom attribute you want to include as a dropdown on the product page.
  3. 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?

Fortunately, you can use our WooCommerce Attribute Swatches plugin to do this.

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.

Start your 14-day free trial of WooCommerce Attribute Swatches

Display variable product options as color swatches, image swatches, text buttons, or radio buttons. Help your customers make a purchasing decision.

or learn more

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 on and add different variations to your WooCommerce product.

Step 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 a final product that your customer will add to their cart. It is a single 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 product 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 product 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:

  1. Click to edit your variable product.
  2. In the ‘Product Data’ section, click the ‘Variations’ tab on the left.
  3. In the drop-down select ‘Add variation’ and click ‘Go’.
  4. When your variation is created, leave the attribute dropdowns on ‘Any…’.
  5. Click the row to expand the variation details.
  6. Ensure you have entered a ‘Regular Price’ for the variation.
  7. Ensure the variation is set to ‘In Stock’.
  8. Click ‘Save changes’.

Now when your customers select the product options from a dropdown menu 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, like the stock status or stock quantity, or simple 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…’.

select woocommerce variations

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. 

Image shows a new button in the backend which enables you to add multiple images to a variation

Now your customers can see a full gallery of images related specifically to the variation they’ve selected.

Start your 14-day free trial of WooThumbs for WooCommerce

Help customers make a buying decision with more than 1 image per product variation.

or learn more

4.3. Creating variations in bulk

If you want to create a variation for every possible combination of attributes, then you can run a bulk process to create them.

  1. Click to edit your variable product.
  2. In the ‘Product Data’ section, click the ‘Variations’ tab on the left.
  3. From the ‘Add variation’ dropdown, select ‘Create variations from all attributes’ and click ‘Go’.
  4. 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.

  1. Again, click the ‘Add variation’ dropdown.
  2. Select ‘Set regular prices’.
  3. Enter your price and click ‘OK’.

Note: If you have different prices between product 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. You can also set the sale price for individual variations here.

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 WordPress plugin.

Step 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 on the front-end with a product variations WordPress plugin.

WooCommerce Show Single Variations allows you to display individual product variations on the shop page.

Usually, a WooCommerce variable product is shown as only one item on the shop page front-end, with a generic screenshot 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 customize their titles for a 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.

To get started, purchase Show Single Variations from the Iconic store: iconicwp.com/woocommerce-show-single-variations

Or start your free trial:

Start your 14-day free trial of Show Single Variations

Use WooCommerce Show Single Variations to display each variation of a variable product as though they are separate products.

or learn more

Then follow these steps:

  1. Go to Plugins > Add New > Upload Plugin.
  2. Choose the zip file you downloaded, upload, and then click ‘Activate’.
  3. Once activated, you’ll need to enter your license key.
  4. Once done, you’ll be on the ‘general settings page’ page.
  5. Click the ‘Process Product Visibility’ button – this will go through all of your products and different variations and set their default visibility settings for the front-end.
woocommerce variable product plugin
  1. Navigate to ‘Products’ and then choose one of your variable products to edit.
  2. Click the ‘Variations’ tab and select a variation that you want to enable.
  3. Check any settings you want and simply save the variations.
woocommerce product variations plugin
  1. You’ll now see them appear throughout your store, based on your settings.

Now your customers can see a full gallery of images related specifically to the variation they’ve selected.

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 simple product browsing but improves customer experience too.

Manage your WooCommerce product variations

In this guide, you’ve 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 WordPress 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.

Plugins featured in this guide:

Interested in all three? Each plugin mentioned in this guide is available in our All Access Bundle with a huge 91% discount:

Instant Access to All of our WooCommerce Plugins

Save $1000s on our full collection of WooCommerce plugins. Everything you need for your WooCommerce store.

or learn more

If there’s anything we missed from this guide, be sure to leave us a comment and we’ll add it.


James is the founder of Iconic and an experienced WooCommerce plugin developer. He has been featured on numerous WordPress publications.

He is a keen photographer and currently shoots using his favourite mirrorless camera, a Fuji X-T20.

2 Responses

Mark Shade 1 year ago

What version of Woocommerce offers the variable products? I am on WooCommerce 3.8.1 in part because of other software on my domain that can't move up in versions of PHP or other stuff. I am on WP 5.5.1 for the same reasons.

When I go to products there is no option for what kind (variable or otherwise).

James Kemp admin 1 year ago

Hey, it's been in WooCommerce for a long time - I don't think I remember a version without it. There was a bug in Woo/WP recently which disabled the dropdown product type menu completely, so that could be the issue you're seeing.

Leave a Reply

Your email address will not be published. Required fields are marked *