WooCommerce Variable Product – How to Set Variables Like Size & Color

WooCommerce Variable Product

Every consumer loves to have multiple options to choose from. As an online store owner, you are probably wondering how to create these options for your customers. WooCommerce, a WordPress e-Commerce plugin, makes this possible using the WooCommerce variable product feature.

The plugin has a feature that lets you add variations to your product. For example, you can put 5 colors (or sizes) of a shoe on display for your customers. Using this feature could be a bit tricky at first. Nonetheless, it becomes easy to use with time.

From this article, you’ll get an in-depth understanding of what WooCommerce variable product means. You’ll also learn how to set it up yourself. Let’s get started.

Content:

WooCommerce Variable Product

By default, WooCommerce allows you to add seven (7) types of products. They include:

  • Simple products: These are physical products that require shipping. Examples of products in this category are books, shoes, etc.
  • Grouped products: As the name implies, they are a group of simple products. E.g. a set of 10 fancy cups.
  • Virtual products: These kinds of products are not shipped. A typical example is a service.
  • Downloadable: This could be an electronic product like an e-book or a WordPress plugin.
  • Affiliate products: These kinds of products are sold on a different site. You only list them on yours.
  • Variable products: This is a product with variations. Every individual product variation has its own image, price, SKU, etc.

Variable products, being our focus, have dropdowns on them. They allow customers to select options they prefer (maybe the black phone or the white one) through the dropdowns. Typically, they are used for any item that comes in different colors and sizes. Items like shirts, shoes, bags, phones, etc. 

How to add a variable product in WooCommerce

We’ll walk you through a step by step process of adding a variable product in WordPress. Of course, you need to install and set up WooCommerce on your WP site. Read our article on How to Install WooCommerce plugin to learn more. You may also love to read about the fastest WooCommerce themes to use for your store.

So, let’s begin.

Stage 1: Create Global Attributes

You can’t create a variable product without first adding an attribute. This is because attributes define product variations. For instance, a T-shirt’s size could either be small, medium or large. ‘Size’ is the Attribute, while ‘small’, ‘medium’, and ‘large’ are the product variations. I hope you got that.

Now, there are two types of attributes in WooCommerceGlobal Product Attributes and Custom Product Attributes. Global product attributes can be applied to multiple products in your store. For instance, your T-shirt store can have ‘size and color’ as global attributes. Reason being that all your T-shirts will have ‘sizes and colors’ as attributes. So, you don’t have to keep adding the same attributes. That would be quite hectic.

On the other hand, custom product attributes are specific to one product only. When you create this kind of attribute for a product, you can’t apply it to another.

In the next steps, you’ll learn how to create Global Product Attributes.

  1. Go to Products >> Attribute on your WordPress dashboard

How to create Global Product Attributes

2. Enter the name of the attribute e.g size (the way you want it to appear at the front-end).

Creating a Global Product Attribute - WooCommerce variable product

3. Click Add attribute at the end of the page. Your newly created attribute will appear on the right side of your screen.

4. Give values to your attribute by clicking Configure terms. Enter the attribute values e.g. small, large, medium. Keep adding values until you are done.

Creating a Global Product Attribute

After configuring terms, you should have something similar to the screenshot below.

Global Product Attribute - WooCommerce variable product

Yeah! We have successfully created Global Product Attributes. We can apply the attributes to any variation we create afterward. Let’s get down to the next step.

Stage 2: Create A Product & Set the Product Type

As we discussed earlier, WooCommerce has other product types apart from variable products. We need to set the product type to ‘variable products’. To do this, Go to Products >> Add products or ‘edit’ an existing one. Scroll down to the product datamenu and select ‘variable product’.

product data section - WooCommerce variable product

That’s it for this step.

Stage 3: Add Attributes to your variable product

Still in the product data section. Click ‘Attributes’.

Adding attributes to your variable product

Select any of the attributes we previously created (in the ‘Custom product attribute’ dropdown, ). Click ‘Add’.

Adding attributes to your variable product

Fill in the values of the selected attribute (in this case, we have small, medium, and large). Since we already created the values in stage 1, you don’t need to type them. You’ll get suggestions to choose from.

Tick the ‘used for variation’ box.

Adding values to each attribute

Note: If instead of global, you wanted to use custom product attributes, leave the dropdown set to ‘Custom product attribute’ and click Add. Enter the name of the custom attribute you wish to add (let’s say ‘color’). Then add the values (e.g. blue, red, black and white) in the field provided. Also, remember to tick the ‘Used for variations’ box.

Custom product attributes

When you are done with either method, click Save attributes, and you’re done.

Quick Tip: Displaying your variable products as image swatches or color swatches may be more appealing to your customers. You can achieve this with the aid of WooCommerce plugins. An example of such a plugin is the WooCommerce Attribute Swatches plugin. This plugin lets you display your WooCommerce product variations as:

  • Color swatches
  • Image swatches
  • Text and radio buttons.

Stage 4: Manage variations – WooCommerce variable product

For every product variation, there is a unique set of attributes. Does that make any sense to you? Ok, let’s break it down. A T-shirt can be:

  • Small and black (one variation)
  • Large and black (another variation)
  • Medium and black
  • Small and white
  • Large and white etc.

The list could go on and on.

At this stage, we have to set the cost, image, specs of each variation. To do this, click Variations (in the products data section). Select ‘Add variation’ in the dropdown and click Go.

How to add variations

Next step, choose a variation for the variable product from each dropdown (e.g. small and white shirt). Click the arrow to the right to add more details.

How to add variations

Upload the product image by clicking the image icon. Next, fill in the SKU, regular price, sale price, weight, stock status (in stock or out of stock), and dimensions for the product variation.

upload product image

To add another variation, click Go again. Repeat the process until you have entered all variations. When you are done, click Save changes.

At this point, your customers will have a range of product options to choose from using WooCommerce variations. They don’t have to move from one product page to the other seeking the color and size they prefer.

WooCommerce variation
 

Final Thoughts

In this article, you’ve learned the steps needed to add variable products to your WooCommerce store. The process may seem tedious, especially if you have many product variations, but you would get used to it with time.

We have a couple of other Woocommerce tutorials that you’ll love. They include: How to set up Paypal on WooCommerce and how to fix common WooCommerce errors.

Have you tried adding a WooCommerce variable product before? What challenges did you face? Let us know in the comments section below.

More Resources: