WooCommerce Variable Product Crash Course

A how-to guide to implement variable products
WooCommerce Variable Product: A Crash Course
Featured image by sentavio

Having a hard time creating a WooCommerce variable product? Product variations let you list multiple options of a particular product on one product page. Although there are a few techniques needed to get the ball rolling, you will be able to add unlimited variations to any product on your online store.

In this article, I will explain what product variations are and how to implement them on your site. Let’s go!

 

What Is A WooCommerce Variable Product?

In WooCommerce there are several different product types. These types are as follows:

 

  • Simple: This is the most upfront and…well…”simple.” For most smaller online stores this is all they will ever use. Simple products are physical products (meaning you will have to send them to your customer) and they don’t have many options. A book would be considered an example of a simple product. It has no variations or different styles. What you see is what you get.
  • Grouped: This type is considered more complex. This type combines products of a related type and put them into one grouped product
  • Virtual: This would be considered a product that doesn’t need to be shipped. An example of this would be a service, like landscaping.
  • Downloadable: Like virtual, this is a non-tangible product. This could be any digital product, like a music file.
  • Variable: This is a single product that has different variations. Let’s take a t-shirt for example. You wouldn’t go to a product page and just select “shirt.” You would select a “large” shirt that is “green.”

 

In short, a variable product is a single item that offers a diversity of options for said product.

 

Variation Vs. Variable Product

After going through the different types of WooCommerce products and defining a variable product, what then is a variation? To understand what that is we first have to bring another term into the fray…the attribute.

What Is An Attribute In WooCommerce?

Attributes are characteristics of a product that we can use for grouping purposes. For example, we can have the attribute of “ Shirt Size” and then have terms that go with that attribute such as “Small”, “Medium” & “Large.” 

Things can get a little more complex when an item can have more than one attribute. Let’s continue with the shirt example. Not only can we have the attribute of “Shirt Size” but we can also offer different colors available in each size. “Color” would be considered a second attribute of this variable product. If the shirt is available in all sizes and colors, all of the combinations would look like this:

 

  • Small, Green
  • Small, Red
  • Small, Orange
  • Medium, Green
  • Medium, Red
  • Medium, Orange
  • Large, Green
  • Large, Red
  • Large, Orange

 

All of these combos are their own individual variation of the product.

 

Why Are Variations Useful?

Looking at the list of shirt variations above, it might look overwhelming based on the number just for one type of product. Without product variations, you would have to list each one of these shirts as their own simple product. For the user that would be tedious and unprofessional. Having one variable product page where all of the variations of that item are available is much cleaner. Not only for the end-user, but for the owner of the site. You can now manage all of the variations of that product on one page in the WordPress back-end. Saving you time in the long run.

 

Variation Data

With variations, you can handle all of the product data for each individual variation. For example, you can manage stock for your medium, green shirts separately from your large, orange shirts. You can set prices based on your variations and include separate product images for each individual combination. Here are the data fields that you can manage with product variations:

 

  • SKU
  • Product Image
  • Enabled
  • Downloadable
  • Virtual
  • Manage Stock
  • Regular Price
  • Sale Price
  • Stock Status
  • Stock Quantity
  • Allow Backorders
  • Weight
  • Dimensions
  • Shipping Class
  • Tax Class
  • Description

 

How To Create And Display A WooCommerce Variable Product

In this example, we will create a shirt variable product. If you haven’t already done so, download and install WooCommerce to your WordPress site. Let’s get started!

 

1. Create Attributes For Your WooCommerce Product

Since our product variation depends on attributes, let’s first create the product’s attributes. Now, you can create custom attributes within the product page itself, it’s easiest to set them up in the Products > Attributes section

woocommerce attributes

Let’s add a new attribute. For our shirt example, we will create two attributes: “Color” and “Size”. Let’s start with “Color”.

 

In the Name field, type the word “Color” and assign it the same word in the Slug field. You can have the slug be any words you like, but it will be easier to remember down the road what the slug for this attribute is. Click the Add attribute button and you will see your newly created attribute to the right.

woocommerce attributes

Now click the Configure terms link within the newly created Color attribute. Create a new entry for each variation of the attribute. For this example we will make three different entries, Red, Green & Orange. 

woocommerce attributes

You can add as many variations as you would like. You can even include a description of each, though that is not necessary. This description will not be seen on the front end.

 

Once you have completed adding your color attributes, follow the previous instructions to then add the Size attribute. If you are following along with me, my Size terms will be Small, Medium & Large. When completed your Attributes screen will look like this:

woocommerce attributes

2. Add Attributes To A Product

Now that we’ve created our attributes, it’s time to add them to our product. Either open up an existing WooCommerce product or create a new WooCommerce product. Once opened, scroll down to the Product data section of the page:

woocommerce product data

Using the dropdown in the Product data header, select Variable product. This selection informs WooCommerce that you are  wanting to create a product with more than one variation.

 

Select the Attributes tab on the left-hand side. Select one of your created attributes and click the Add button:

woocommerce product data attributes

Click on the Value(s) field. There you will see a dropdown of all the available variations of that attribute. These are the ones we created in the first step. Select all that apply for this product. In this example, I will select all three colors. 

woocommerce product data attributes

Also, make sure that both Visible on the product page and Used for variations are checked. Then click the Save attributes button.

Once completed, repeat the previous steps to add the Size attribute to your product.

 

3. Add Variations To Your Product

Next, click the Variations tab. If you have at least one attribute in your Attributes section, you will be give the option to add a variation:

woocommerce product data variations

Select the Go button and you will see a new dropdown menu. Here (per our example) you can select the color and size of your shirt.

woocommerce product data variations

Select your attributes (for this version of the shirt I will select Green and Large). Click the arrow to the left of the Remove link to access that shirt variation’s product data. Here you can add any data for that specific variation (SKU, price, weight, dimensions, etc.).

woocommerce product data variations

To add a picture of that shirt variation click the blue portrait icon left of the SKU field.

 

Once you are finished with that variation select Save changes. Then hit Go again to add your next variation.

woocommerce product data variations

You can add as many variations as you would like. Just be sure to save your changes after adding each variation. Once you have completed adding variations to your product click Update or Publish and you are done! You can now see the WooCommerce product variations on your product’s page.

woocommerce product variations

Conclusion

Hopefully, this article has explained what a WooCommerce Variable Product is and how to create one for your online store.

 

Once you get the hang of creating them, they shouldn’t be too difficult. They will save you time in the long run and as well as creating an easier user experience for your end-users.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Chris Erbstoesser
Chris Erbstoesser
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Table of Contents