This guide is your one-stop shop for all things WooCommerce product variations and variable products. Perfect for variable product beginners and anyone who needs a refresher.

We’ll go into detail on the following topics:

  1. What a WooCommerce variable product is – including product variations and attributes.
  2. How to create a variable product in WordPress/WooCommerce.
  3. How to display product variations on the shop page.
  4. How to improve your product variations with some variation plugins/add-ons.

So let’s get our foundations right first and outline what a WooCommerce variable product is.

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, sizes, and SKUs. These options are known as attributes, and you can create as many as you like.

As a customer, once you’ve selected all the product options, you can add this new product to your cart. The product you add to your cart is known as a variation. These variation products are essentially variants of the parent product.

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, allowing customers to choose 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 step-by-step instructions will help you create 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, let’s outline what they are.

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

  1. 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.
  2. Global product attributes 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 first need to 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 your attribute’s Terms column.
  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 on to 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. This section will 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 and create custom attributes.

First, 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: Often, 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.

attribute swatches on the product page

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.

WooCommerce Attribute Swatches

Turn your WooCommerce product options into color, image, or text swatches. Instantly enhance your customers’ online experience.

At this point, you should have added 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, create multiple variations manually, and create variations in bulk. But first, let’s talk about what a variation is:

A variation is a final product your customer will add to their cart. It is a single product tied directly to your customers’ attribute choices. For example, a Small, Red T-Shirt is the final selected variation of a variable product.

Note: It’s important to ensure your product variations have a price and are In stock. If not, they won’t show on the product page for your customers.

Now that you’ve added the attributes let’s look at how you create product variations.

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

WooThumbs for WooCommerce

Enable zoom, sliders, video, fullscreen, multiple images per variation, and customisable layout options for your product imagery.

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 many variations and don’t want to set a price for each 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, you’ve no choice but to enter the price individually for each variation.

It’s worth looking 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’ll outline how to improve WooCommerce’s standard product display on the front end with a product variations WooCommerce 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 product combinations. This means the customer will only see a small amount of what your shop offers. 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.

When your customers filter or browse your product collection, the products they see are highly relevant regarding selected options, product imagery, and product titles.

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

WooCommerce Show Single Variations

Display individual product variations of a variable product in your product listings. Make it easy for your customers to view and filter product variations.

Then follow these steps:

  1. Go to Plugins > Add New > Upload Plugin.
  2. Choose the zip file you downloaded, upload it, and click Activate.
  3. Once activated, you’ll need to enter your license key.
  4. Once done, you’ll be on the general settings 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 the variation 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 display each variation of a variable product as separate products. This not only enhances simple product browsing but improves customer experience too.

The best WooCommerce plugins to optimize WooCommerce product variations for sales

WooCommerce product variations are a powerful tool for boosting your online store sales. But, in a standard WooCommerce install, they lack some of the amazing sales features that 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 your customers a much better visual experience.

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.

WooCommerce Attribute Swatches

Turn your WooCommerce product options into color, image, or text swatches. Instantly enhance your customers’ online experience.

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’s image gallery. This can be quite frustrating for WooCommerce store owners who want to add additional variation images to their products.

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

WooThumbs for WooCommerce

Enable zoom, sliders, video, fullscreen, multiple images per variation, and customisable layout options for your product imagery.

Show variations on the WooCommerce shop page

variations on the shop page woocommerce

By default, WooCommerce shows your variable products as 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. You can display your whole product catalog, reduce customer clicks, and increase sales.

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

WooCommerce Show Single Variations

Display individual product variations of a variable product in your product listings. Make it easy for your customers to view and filter product variations.

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

Manage your WooCommerce product variations

In this guide, you’ve learned the basics of a WooCommerce variable product, 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: