Working with variable products in WooCommerce

Daymon Hoag January 24, 2022

Products mentioned

Present more options

Let’s imagine a scenario where you’ve spent weeks on the perfect website with WooCommerce for a new client. Now you want to show off the fruit of your labor. The client has been selling products for a few weeks now and has created a few new additions. Like a lot of them — a good reason to get a handle on variable products in WooCommerce.

This lets you avoid individual listings for the exact same product with only slight variations such as color and size.

It’s happened to me, and if you’ve been building WooCommerce sites for clients for a while it’s probably happened to you, too. Having to leave a product page to navigate through multiple listings for the same product in different sizes and colors for example is just a bad experience for shoppers.

Save time getting online

With GoDaddy Managed WordPress eCommerce Hosting and Pagely Enterprise WooCommerce Hosting, you save time getting online. It includes the features to help you with the strategies we’re about to cover — it’s not just about getting a domain and hosting.

This high-performance platform optimized for WordPress also includes tools for security, shipping, payments and site performance.

Once your WooCommerce store is up and running, it’s easy to track orders with customizable sequential order numbering, keep an eye on profitability with native COGS tracking, and monitor store performance using advanced and integrated Google Analytics.

The majority of you that have been doing this for a while already know WooCommerce provides a solution. Built in is the ability to create variable products, natively, giving us the option to create individual product listings that have multiple attributes like color and size.

Variable products allow a shopper to choose between options for a product from within a single page.

Because these variable products are displayed in rather lackluster dropdowns they can be quite boring by default. To compound the issue, some clients want to avoid creating and editing variable products because they find it more challenging than a simple product. To get a good majority of those clients on board we’re going to need to put in a little extra work during the early development stages.

By doing so we can set the stage for an amazing shopping experience for your client’s customers. If they look good you look good. Let’s dig in.

How to create variable products in WooCommerce

To create a variable product in WooCommerce we first need to have some attributes to work with. Then we’ll create terms for those attributes. You can think of an attribute as a parent (color) and terms as the children (red, blue, green). After setting up the main attributes and configuring terms we can then create an actual variable product. Here’s how.

From WordPress’s Admin dashboard, mouse over Products in the left-hand menu and click Attributes.
Fill out the fields for the attributes you’re going to create (color, for example). You can skip filling in the slug field as it will simply populate with whatever you put in the Name field. Don’t forget to tick the Enable Archives box if you’d like to display that attribute in filters later. Custom ordering will be the default for the Default sort order dropdown box, which is fine if you want to change the order in which the attributes appear on product pages.
Click the Add attribute button.
After clicking the Add attribute button you’ll see the attribute appear on the right side of that page. On the far right side under that attribute click Configure terms.
This page will look similar to the main attribute that was created, but these are terms. Fill out the Name field. The slug and description fields are optional, though the description field may come in handy when cross referencing two entirely different products that both have the same term. Red shirts or red watches for example.
Click the Add new (whatever the attribute is) button. You’ll see the new term populate on the left side of that page. Add as many terms as you need here before continuing to the next step.
From the WordPress Admin dashboard, hover your mouse over Products and click Add New.
Just below the main product description field you’ll see the Product data area with a dropdown box in the top left. Click it and select Variable product.
Before you can create variations in WooCommerce you first have to assign some attributes. To do this click Attributes in the vertical tabs section of the Product data section, select the attribute(s) you want to use from the dropdown menu, and then click the Add button.
You’ll see an options panel open for the attribute just below the Custom product attributes dropdown box. Make sure the Used for variations option box is ticked.
The Value(s) field will be empty at this point. You can click in the empty field to select from a list of terms that can be used for the attribute. You can also click the Select all button just below the empty field to select all the terms you’re using at once.
Add as many attributes and values/terms here as needed and click the Add attributes button.
Click Variations located just below the Attributes tab you were just working with.
You’ll see a dropdown box that says Add variation. You can simply click the Go button to the right of that field to add individual variations manually or click the dropdown, select Create variations from all attributes, and then click the Go button. Just click OK when asked if you’re sure. Click OK again when being notified of how many variations were created.
You’ll now see a list of variations that were created for this product. Each one will need to be configured the same way a simple product would be, but separately. Just click an area next to open the term/values option such as price, shipping, stock status, and description. If the products look different (as with colors) it would be a good idea to add an image for each variation here as well.
After you’ve added the information for each variation click the Save changes button at the bottom.

A quick note here. One could simply create a variable product directly from a WooCommerce product page’s attributes tab by actually creating an attribute right there on the fly. The problem is those attributes can only be used for variations of the product it was created in. It works, but isn’t very dynamic, and won’t be very useful for landing pages, filters, or navigation which we’ll discuss in a moment.

Finding the ideal theme in WooCommerce

That’s really all there is to create a variable product, and it does work. For these demos, I’m just using the free Storefront theme from WooCommerce which doesn’t include any additional functionality to variable product listings. To do that we’ll need a plugin to enhance our variable product displays or a theme with the functionality built-in. I’m talking about swatches. Below is a screenshot of what our variable product looks like by default.

You’ll notice all of the desired functionality is there, like different prices based on variations of that product and the ability for the shopper to choose between colors and band sizes. It just doesn’t look great. With swatches, variable product displays can be greatly enhanced with features like turning color variations into clickable colors or sizes into text buttons instead of dropdown boxes.

There’s more you can do — but you catch my drift.

Ideally, you would want to consider this functionality when shopping for a new theme. If your client already has a theme they want to use, and it does not provide options for swatches, you’ll need to find a plugin or create one yourself. The swatch plugins I’ve been able to find are somewhat pricey, which may or may not be a problem depending on the project. There is one plugin on the WooCommerce Marketplace that would work, but it’s $99 a year. Yikes!

I found another listed on WordPress called Variation Swatches For WooCommerce that’s only $49 a year for one domain/website. It’s also a freemium plugin so the most basic features can be used without paying anything. They have over 200,000 active installs with mostly 5-star ratings, so not too shabby. Below is a screenshot of how our variable product looks with this plugin installed and configured with just the free options.

To install this plugin just go to Plugins > Add New, and then type “swatch” in the search box. Variation Swatches For WooCommerce was the first result when I tried searching for it. Just install the same way you would any other plugin. Upon successful installation, you’ll be greeted with the settings screen. Click the Tutorials tab on the top left of that page to get a few quick primers to get you set up.

Extra bonuses when using variable products in WooCommerce

Variable products aren’t just a nice way to give shoppers all of their options for a product on a single page. Variable products can also be used to enhance navigation in the shop’s archive pages or on landing pages. In my article on creating beautiful WooCommerce pages using only the free storefront and Gutenberg editor, I touched on the Adding product sections. Well, you can do the same thing using attributes. That article goes into detail on how to accomplish this, so I won’t beat a dead horse.

Just imagine though your client is having a Saint Patrick’s day sale, and they want to feature all of their green-colored products. Using the WooCommerce Products by attribute widget block makes adding some or all of those products to the homepage or a special loading page pretty easy. But wait. There’s more!

Variable product attributes can be used in regular website navigation as well. Check out the section called Supercharging the sidebar in the article Top 4 WooCommerce tips & tricks for better product visibility to get a full rundown on how to enhance sidebar navigation using attributes for variable products.

While this offers some powerful navigational features out of the box even this can be enhanced using plugins like Ajax-Enabled Enhanced Layered Navigation from WooCommerce. Again, this is a paid plugin. Instead of using dropdown boxes as in the example above this type of plugin makes it possible to use attributes for things like colors and size for websites with a lot of variable products.

It basically converts attributes into color and text swatches for use in widget areas like the sidebar of a website. It’s more of a nice to have than a must-have, but hey, it’s another nice option.

A few tips to get your clients on board

As mentioned at the beginning of this article, one of the main drawbacks of using variable products is it isn’t the easiest option. If you have a lot of clients, ideally you want them to be able to create new variable products on their own. You can make this much more reasonable for them by asking what attributes their products will share. Create product attributes during the initial buildout. This way your client can choose their options directly from the product pages instead of trying to navigate WordPress to set up product attributes and terms.

That’s obviously a lot of back and forth.

Sure, it’s still slightly more difficult for them to remember to set a new product as a variable, but we’re only talking about a dropdown box and two side tabs — assuming you’ve done the footwork in creating the attributes and terms that are most likely to be used. The fact their website will feature those fancy swatches and enhanced navigation will be helpful in swaying them to create variable products when it makes sense. In the event they aren’t swayed… Well, that’s more work you’ll get paid to do, and the website still looks and works great.