How to Add and Optimize WooCommerce Product Variations for Conversion in 4 Easy Steps

Do you own a WooCommerce store and are looking to add multiple variations to your products?

Just like physical stores, online stores come in different forms and sizes. Powered by WooCommerce, WordPress offers enough utility to cater to virtually any type of eCommerce store. As a WooCommerce store owner, one of the popular features you can now take advantage of is the ability to add several buying options for a single product.

Though they are highly useful, navigating WooCommerce variations can be quite challenging, especially for new users. However, once you master them, you’ll quickly discover how powerful they are and how your store can benefit tremendously from them.

If you’ve ever felt confused trying to set up WooCommerce variable products, rest assured that you’re not alone. This is why we’ve compiled all the best advice you’ll need while adding WooCommerce variations.

You’re probably interested in knowing:

• What WooCommerce variable products are
• How WooCommerce variations work
• How to set up WooCommerce variations
• How to manage variable products for optimum conversion
• The best plugins and tools for WooCommerce variations

In this article, you’ll find answers to all these and much more. Let’s dive in!

What Are WooCommerce Variable Products (and How Do They Work)?

By default, WooCommerce lets you add six different product types to your store. Of all these, only variable products allow you to offer multiple buying options for the products you list on your store.

For example, an electronics store may have a stock of the same mobile phone in various storage and color options.

To offer your buyers the ability to choose from several product variations, you’ll need to select the Variable Product option while setting up the product. In WooCommerce terms, these different buying options are called Attributes.

Attributes

Attributes are simple descriptors or properties assigned to different product variations to supply the buyer key information about what they’re about to purchase. These product attributes can be size, material, color, model, or something else entirely.

On the front end of your product page, you can offer your buyers the option to select multiple attributes of the same product. However, site users can only select from these attributes. They cannot add a new one.

For example, a site visitor may order a “brown” “leather” “size 45” shoe. This is called a product variation.

Variations

The final selection a buyer makes consisting of one or more attributes is called a product variation. While attributes can exist without variations, you need to first add attributes before setting them up. We’ll talk more about this in the section about setting up WooCommerce variations.

In our example from the previous section, the keywords, “brown”, “leather”, and “size 45” are values of the ‘Color’, ‘Material’, and ‘Size’ attributes. The product variation is a combination of these attribute values.

When you add only attributes to your products, they only display information to your site visitors. In other words, buyers do not get to select the combination of attributes they’re opting for.

Now that we understand what WooCommerce attributes and variations are and how they help to create variable products, let’s take a look at how it all works in reality.

How to Set Up WooCommerce Variations

If you have any experience with WooCommerce, setting up WooCommerce variations with this step-by-step guide should be completely hassle-free. All you need to do is tweak some settings which are available by default in your WordPress dashboard.

Of course, you need to already have WooCommerce installed and activated on your self-hosted WordPress site. Once you’ve done these, you can follow these steps to get your variable products running.

Step 1: Add Global Attributes to Your Store

Since we’ve previously discussed the role attributes play in setting up variable products, we’ll first add them to your store. Adding global attributes makes it possible to apply them to new or existing products more easily in the future. This can save you a lot of time.

To add new global attributes to your store, all you need to do is navigate to Products > Attributes in your WordPress dashboard.

Attributes’ Settings

On this page, you can set all the properties of your new global attribute:

• Name: This is the attribute’s title (such as ‘Color’, ‘Size’) that reflects on your site’s front-end. It’s the first property your site visitors get to interact with.
• Slug: Besides the main attribute name, you can choose to assign another version to your attribute. The slug, if added, replaces the attribute name in the Uniform Resource Locator (URL).
• Archives: Additionally, you can enable archives for the attribute you’re creating. When enabled, WooCommerce creates a page with all the products associated with this attribute. You can then easily follow the page’s URL (e.g. https://onlinestore.com/color/green/) to view the products.
• Default sort order: You can choose from four available options how you want the terms in this attribute to be sorted on the frontend. For example, you can select the Name option. This means if a ‘Size’ attribute consists of values, ‘Small’, ‘Large’, ‘Medium’, these terms will be arranged in an alphabetical order. Similarly, you can select Custom ordering to drag and drop the terms on the next page.

Next, click Add attribute to save your preferences. Now that you’ve created your first global attribute, click on Configure terms to add the necessary values to it.

On the next page, you get to add new values to your attribute. In our case, we have to fill the fields under the Add new Size section (since the attribute name is ‘Size’.)

The Name and Slug properties are similar to what we had on the previous page. Additionally, you can add a description to the new attribute value. Depending on your site theme, the description may or may not be displayed.

You can add as many attributes as you like to your WooCommerce store. Similarly, there’s room to attach as many values to each one as well. Once you’re done, click Add new Size and your global attributes are now ready for use.

Step 2: Add a New Product and Select the Product Type

Having created attributes you can use sitewide, it’s time to add the new product that we’ll apply them to. Of all the product types available on WooCommerce, you can only add variations to variable products. To create a new variable product or edit an existing one, go to WooCommerce > Products.

Click Add New to create a new product. Otherwise, hover over an existing product and click Edit on the interactive menu that appears.

On the product settings page, scroll down to the Product data section. The first dropdown menu in this section allows you to select the product type.

Here, you want to select the Variable product option. Immediately, the settings menu changes to help you set up your variable product. Different tabs allow you to define the product.

For example, you can set your shipping options in the Shipping tab or add upsell products in the Linked Products tab.

For setting up WooCommerce variations, we’ll focus on assigning attributes to the variable product.

Step 3: Assign Variable Attributes to the Product

As we mentioned earlier, variations require assigned attributes to function properly. There are two ways you can assign attributes to your product. You can either use global attributes (the ones we created in the first step) or create custom attributes.

Global attributes are great if several products in your store share the same attributes. On the other hand, custom attributes are more suitable if they’re peculiar to a certain product.

Assigning Global Attributes

To assign global attributes to a product, navigate to the Attributes tab under the Product data section. Here, you get to select any of the attributes you created previously.

After selecting your global attribute of choice, click Add to apply it to the product. Afterward, the selected attribute’s settings menu appears. Here you can add all the values you want.

In our example, we’ll add all the size values, ‘Large’, ’Medium’, and ’Small’. Except in rare cases when you choose not to, you want to check the Visible on the product page and Used for variations boxes.

Then, hit the Save attributes button to save all your changes.

Assigning Custom Attributes

Alternatively, you can add custom attributes to a particular product. To do this, select the Custom product attribute option instead of choosing a global attribute you created previously.

This method also lets you add attributes and their values quickly and easily. All you need to do is type in corresponding values in the Names and Value(s) fields.

When adding multiple attribute values, separate each term with a “|” sign. Then, check the Visible on the product page and Used for variations boxes as well. Once you’re done, click Save attributes and you’re good to go.

Next is the final step of adding variations to your product and publishing them on your store.

Step 4: Display WooCommerce Variations on Your Store

Finally, it’s time to create multiple WooCommerce variations based on the attributes you assigned to the variable product.

You can go about this by going to the Variations tab. Here, simply hit Go next to the Add variation field.

Now, you can create variations that are a combination of the existing attribute values.

For example, in our case, you can create a variable for a ‘Large’ ‘Blue’ T-shirt. When you’re done, click Save changes.

To make things even easier, you can simply select Create variations from all attributes in the Add variation dropdown menu.

After clicking Go, WooCommerce automatically creates variations from all the attributes assigned to the products.

In our example, we’ll have 12 different variations, since we assigned 2 attributes containing three and four values respectively.

However, these product variations do not contain prices and other important properties yet. To change this, hover over any variation field and click on the empty white region. This reveals a settings editor below.

Here, you can edit the variation just like any other typical WooCommerce simple product.

There’s room to add a product image, a regular price and a sale price, enter the weight and dimension values, or even make it downloadable. Similarly, you can toggle the variation on or off by checking or unchecking the Enabled box.

Since each variation has its unique settings menu, you can easily set distinct prices or dimensions for different variations of the same product.

Once you’re satisfied with all your settings, you can preview your variable product by clicking Preview in the upper right corner of the page. The final result should resemble this.

As you can see, the buyer can select a T-shirt size and color on the frontend. At this point, it’s safe to say, “Mission Accomplished!” Your WooCommerce variations are now set and ready for use!

But beyond these basic settings, WooCommerce still gives you a lot more control over your variable products.

Let’s quickly take a look at a few other important settings you can implement.

Other Important Settings for WooCommerce Variations

WooCommerce offers a lot of flexibility when it comes to variable product settings. Populating the data fields for each variation can be a long exhaustive procedure. Depending on the type of product you’re selling and your consumers’ preferences, there are certain fields you can leave unfilled.

Let’s quickly do a quick walkthrough of all the major menu tabs and define each variation data field.

General Settings

While in the Variations tab of your variable product data editor, you can tweak all the general settings of each individual variation.

Here’s a summary description of the properties:

• Enabled: This box allows you to enable or disable the variation for a unique product.
• Downloadable: This is for product variations that can be downloaded. When the box is checked, WooCommerce adds additional fields namely Downloadable Files, Download Limit, and Download Expiry. You can upload the download files in the first field. The other two fields let you set the maximum number of times the files can be downloaded and when you want the download to expire.
• Virtual: A virtual product is a non-physical product. If you check this box, all the shipping settings for this variation will disappear.
• Regular price: This is the usual price at which you want to sell the product variation.
• Sale price: Optionally, you can also add a price for when the product is on sale.

Inventory Settings

To manage a variation’s inventory, check the Manage stock? box. Immediately, two new fields replace the Stock status field.

Input the variation’s quantity in the Stock quantity field. Also, you can choose to handle or not handle backorders in the Allow backorders? Field.

Alternatively, you can choose to manage all variations’ inventory on a product level. To do this, navigate to the Inventory tab.

Here, you can add a Stock Keeping Unit (SKU) value and choose to permit only one unit of the product to be added in a single order by checking the Sold individually box. In the same way, you can manage stock for the entire product here. Stock quantity values entered for individual variations override the general product settings.

Similarly, you can add shipping settings (Weight, Dimensions, and Shipping class) on both product and variation levels.

In case you choose, the Linked products tab makes it possible to add Cross-sells and Upsells to the product.

Setting Defaults

When tweaking your product settings, you can easily set default variations for the end user. This means when the buyer visits the product page, these set attribute values will be selected by default.

To implement this, go to the Variations tab of the Product data section and select the value(s) of your choice next to the Default Form Values field.

Now, when the user navigates to the product page, the default form values will already be pre-selected.

Setting default variations can be very useful for products where demand for a particular product variation is high. This way, the ADD TO CART button is automatically clickable, thereby saving some time. If the buyer chooses, they can still go ahead and select a different combination of attributes.

Bulk Editing

There may be cases where you want to apply a particular setting to all the product variations (e.g. adding the same dimensions or shipping class.) All you need to do is find the unique setting in the Add variation dropdown menu.

Select the necessary option and click Go. Immediately, a prompt pops up on your screen letting you enter the required value.

Enter the corresponding value and hit OK. WooCommerce then applies the value to all the variations below.

We’ve now covered all the settings associated with creating WooCommerce variations. However, beyond setting them up, you may also want to learn certain tips and tools you can use to maximize your store’s success when using variations.

Let’s talk about some of them.

Best WordPress Plugins for Optimizing WooCommerce Variations

Though WooCommerce offers a lot of flexibility and utility for product variations by default, additional plugins can help you add even more functionality to your variable products.

There are lots of WooCommerce variation plugins designed to execute different tasks. We’ll discuss six of the most effective and interesting ones we’ve used before.

1. YITH WooCommerce Color and Label Variations

Sometimes, displaying variations on your WooCommerce store can pose a considerable challenge. Irrespective of your theme, the default viewing options are pretty boring and lackluster.

If you’re looking for a more effective and elegant way to show product variations to your store visitors, this plugin may be your best bet.

In place of the rather dull dropdown menu WooCommerce offers, YITH’s variation plugin adds color to your product pages with interesting color swatches. These swatches let you add fashionable icons (and a unique description) for each variation.

The icons can represent different attributes such as colors, shapes, dimensions, sizes, or any other property. For color options, you can easily add corresponding color pickers.

Additionally, you get to upload multiple image galleries for all the variations. This way, each time the buyer selects a particular color, the gallery images are updated automatically to match the selection.

Using this plugin, your buyers get a concise overall view of all your product variations, no matter how many. This significantly improves their shopping experience by helping them make their final purchase quickly and easily. You also get a flexible way of managing your variations on the backend.

2. Product Variations Table for WooCommerce

Beyond color swatches and user-friendly selection interfaces, certain sites often require a different approach to displaying variations.

Another effective method is to use tables that allow the shopper to compare multiple variation properties simultaneously. Product Variations Table for WooCommerce by FmeAddons can help you achieve that.

One popular use case for this approach is an online store selling electronic devices such as smartphones and camera gear. A store owner can use these tables to display different specs of different product models.

While browsing your products, visitors can use the two arrows beside each attribute to sort the variations accordingly. They also have access to an Ajax-based (real-time) search filter. So, shopping time can be shortened by simply searching for a particular attribute.

As the cherry on the cake, the buyer can also add as many variations as they like to the cart right from the table.

Want even more utility? The plugin lets you customize the table layout as well. This way, your landing pages will include only the most important attributes your customers care about. You can display the price, storage size, color, or images. The choice is completely up to you!

If that still doesn’t cut it for you, you may want to try out an alternative, WooCommerce Product Table. This is a more generic WooCommerce table plugin that lets you compare multiple products in a table. But as a plus, you get the option of choosing from multiple attributes in a typical dropdown menu.

Site users can also send their final choice straight to the cart without navigating to any other page.

3. Discount Rules for WooCommerce

Another feature shoppers may appreciate is variable pricing for your variable products. If you’re offering several variations for each of your products, managing regular and discounted pricing for each variation can be rather tedious. This is where Flycart’s Discount Rules for WooCommerce comes in.

The plugin lets you offer your buyers store-wide, quantity-based, cart-based and other types of interesting discounts for each unique variation. All you need to do is set specific rules based on the conditions you want.

Here are some popular ways you can configure discounts for your product variations:

• Based on individual products: This type of discount is configured for a particular product and all its variations. It can either be a percentage or fixed price discount.
• Based on specific attributes: Another option is to apply the discount rule to all the products attached to a specific attribute. For example, you can offer a $15 discount on all ‘Size 46’ shoes storewide.
• Using a BOGO deal: A Buy One Get One (BOGO) deal is a quantity-based discount. You can offer a free unit of your product for every particular number of units (say three or four) purchased. You can apply it to products, variations, attributes, or store-wide.
• Based on the cart subtotal: This discount rule is activated based on the buyer’s cart subtotal. For instance, you can offer a percentage discount or even a free product when the subtotal is over $250.

Discounts are a proven way of boosting your sales and customer loyalty. This plugin helps you to leverage that advantage, even with variable products.

4. WooCommerce Quick View Pro

Are you looking to speed up your site visitors’ shopping process even more? Then WooCommerce Quick View plugin may just be what you need. No doubt, color swatches are a great way to display variations on your site. However, your buyers will appreciate being able to select from different variations of multiple products all on the same page.

WooCommerce Quick View helps you achieve this. When installed and activated, the plugin adds a Quick View button to your product search page. This way, users no longer need to visit individual product pages.

Once they click the Quick View button, a pop-up window appears letting them select a variation of their choice. When they’re done, they can click Add to cart and simply get back to their shopping hassle-free.

You can use WooCommerce Quick View together with WooCommerce Product Table. Their combined utility adds quick view buttons directly to your product table layout.

For site owners looking to deliver the best shopping experience to their consumers, this plugin is a great addition. More often than not, fewer clicks equals more sales. It supports other product types as well. So, the improved user experience isn’t limited to your variable products alone.

5. Variation Swatches for WooCommerce

The user experience of a WooCommerce store ultimately decides sales. Few features can enhance that experience better than the ability to showcase variations in images, colors, and labels rather than the default dropdown fields.

Variation Swatches for WooCommerce Pro helps you achieve all that and more.

This premium plugin lets you customize the borders, backgrounds, and images of your product swatches.

Tooltip is the feature that stands out most for Variation Swatches for WooCommerce Pro. You can select rounded or squared swatch layouts with tooltip background, tooltip control, font color, and even font sizes.

The plugin supports the display of dual color variations. It is optimized to improve loading speeds. It facilitates the addition of the shopping cart to the category/archive page. You can also control attributes in the category/archive page.

The free version of Variation Swatches for WooCommerce includes the ability to control swatch sizes on the product page and choose whether to cross out, blur, or hide out of stock items. It also lets you work from quick view pop ups.

6. WooCommerce Show Single Variations

For certain buyers, having to choose from different combinations of product attributes may appear to be additional work. For such shoppers, displaying product variations as individual products on the shop page should do the trick.

If you want to do that automatically, WooCommerce Show Single Variations can help you.

The plugin’s function is very straightforward – display individual variations as products! For easier navigation, a ‘Variation’ tag is added to variations to distinguish it from other product types.

As additional features, front-end users can filter products with the accurate search feature to display only the most relevant variations. Similarly, the ability to add to cart straight away further enhances the entire customer experience.

7. WooCommerce Bulk Variations

Last but not least is the WooCommerce Bulk Variations plugin. It works just like any product table plugin. However, it adds even more flavor to how you display product variations. The tool lets you present two attributes and their values in rows and columns simultaneously. The buyer can then enter the item quantity for the particular variations they want.

Having made their selection, they can simply click the Add to cart button and continue with their shopping. If you own a WooCommerce wholesale store, your buyers will find this plugin particularly useful. Unfortunately, if your product variations rely on three or more attributes, the plugin may not be ideal.

Frequently Asked Questions

Time to Create Your First Variable Product!

It’s no longer news that WooCommerce is your best bet at building a powerful eCommerce store on WordPress. One of the many functionalities it brings to your store is the ability to offer your buyers different variations of the same products.

If you get stuck trying to set up your first WooCommerce variation, follow these easy steps and you’re good to go:

1. Add global attributes to your store.
2. Add a new product and select the product type.
3. Assign variable attributes to the product.
4. Display WooCommerce variations on your store.

Once your variations are ready, you can use some interesting plugins such as Product Variations Table and Discount Rules to offer your site visitors even more. These plugins bring different features that help to enhance the overall customer experience.

Now you know how to add variations to your store, we hope this helps you get closer to your conversion goals. Are you looking to learn more about other product types WooCommerce supports? Check out our article on how to add and manage products in WooCommerce.

If you have other questions, share them in the comments section below!