The Ultimate Guide to Setting Up a WooCommerce Variable Product

WooCommerce Variable Product

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:

Instant Access to All of our WooCommerce Plugins

Save up to a massive 91% on our full collection of WooCommerce plugins. Everything you need for your WooCommerce store.

Get the bundle

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.

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.

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.

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

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

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

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.

  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 attributes 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).
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 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.

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.

Get the plugin

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:

  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 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…’.

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.

Download WooThumbs for WooCommerce

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

Get the plugin

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

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

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.

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

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 licence 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 variations and set their default visibility settings
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.

Download Show Single Variations

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

Get the plugin

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.

Round-up

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.

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 up to a massive 91% on our full collection of WooCommerce plugins. Everything you need for your WooCommerce store.

Get the bundle

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

Leave a Reply

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