How to let customers select product variations on the WooCommerce shop page

August 10, 2020

If your WooCommerce products have multiple options – such as colors or sizes – you’ll need a way to let customers pick exactly what they want. Of course, they can’t do that if they don’t know what choices are available.

To make things easier on your customers, you can enable them to select product variations on the WooCommerce shop page. In this guide, I'm going to tell you about three fantastic ways to do this:

  1. Method 1 - Use a flexible product table to help customers make comparisons and choose variations directly on the shop page that looks something like this on the front-end:
An example of a WooCommerce Product Table with variations.
  1. Method 2 - Add product quick view buttons so that customers can select variations of a product from a quick view lightbox, without leaving the WooCommerce shop page:
  1. Method 3 - Add a bulk variations price matrix so that customers can select variations from a matrix-style grid:
Variations order form matrix

In this guide, we’ll talk a little about why each method can be so effective. Then we’ll show you how to let customers select product variations on the WooCommerce shop page, using either the WooCommerce Product TableWooCommerce Quick View Pro, or WooCommerce Bulk Variations WordPress plugins. Let’s begin!

Why you need a better way to display product variations in WooCommerce

WooCommerce is one of the best ways to create an online storefront in WP. It’s easy to use, flexible, and comes with a lot of useful features. Plus, it lets you quickly add all your products to the store and display each one on its own page:

An example of a generic WooCommerce product page with variations.

As you can see in the example above, you also have the option to display product variations on these pages. A product has ‘variations’ whenever it comes in multiple options, such as sizes, colors, or materials.

While WooCommerce’s method is serviceable, it is lacking in a few ways. For instance, the variations aren’t as prominent as they could be, and there’s no way to easily compare the options for multiple items. In addition, you may want to show off these choices on your main WooCommerce shop page, rather than forcing customers to visit each single product page.

Fortunately, you can easily solve these problems with WooCommerce Product Table or WooCommerce Quick View Pro. You can also use WooCommerce Bulk Variations to create WooCommerce bulk variation forms on single product pages. Keep reading to learn how.

Before you start - add your WooCommerce product variations

First, you’ll want to have a WooCommerce shop ready to go. You can use either a new or an existing WooCommerce store – the choice is up to you. Let’s get to work!

If your Woo products have their variations in place, you can skip ahead to listing variations on the shop page. However, in case you’re new to this feature, let’s take a quick look at the process of adding variations in WooCommerce.

Let's say you want to set up your clothing store. To add variations per product, first visit the Products → Attributes tab:

The Product Attributes section in WooCommerce.

Attributes are key descriptors for your products, and are required for variations to work properly. So you’ll want to add in all the attributes here that apply to your products. For more details, check out our complete guide to displaying product attributes in WooCommerce.

Then, open up a new or existing product in WC, and scroll down to the Product data section:

The Product Data section of a WooCommerce product.

At the top, you’ll want to select Variable product from the dropdown menu. This will alter the customization options you see for this product. You may notice that there’s now a Variations tab – but don’t go there just yet.

First click on Attributes, choose one that applies to the current product from the dropdown menu, and select the Add button:

Adding a product attribute in WooCommerce.

Check the box labeled Used for variations, and pick all the relevant attributes in the Value(s) field that apply to the variable product. For example, this can be different colors or sizes. You can also set global attributes for all products or individually per product. Then, select Save attributes:

Customizing a product attribute in WooCommerce.

Now head to the Variations tab, and click on Go to create variations. On the next screen, you can create your first variation by selecting one of the product's attributes:

Adding a variation in WooCommerce.

Then you can fill out any specific information that applies to that variation. This includes the item’s price, size, and so on. Save your changes when you’re done, and you can continue adding more attributes and variations as needed.

After that, you’ll want to do the same with all other products that come in multiple options. Then, you’ll be ready for the next phase - whether you've chosen method 1 or method 2.

Method 1 - Use product tables to select variations on the WooCommerce shop page

WC Product Table is a WooCommerce variations WordPress plugin that lists products in an organized, attractive table. And even better, it can display WooCommerce variations too - either as separate products, or as dropdown lists:

WooCommerce product table variations plugin

Plus, you can customize how it looks and what it contains. This includes variations – which means you can use this WooCommerce plugin to allow customers to select product variations on the WooCommerce shop page, however you like.

WooCommerce Product Table
The easy way to list product variations on the WooCommerce shop page.

Check out the WooCommerce Product Table variations demo!

How to use product tables to select product variations on the WooCommerce shop page (in 2 steps)

Setting up a product table and using it to display product variations couldn’t be easier. You can use it to list both simple products and variable products. Below, we’ll show you how to get the job done. We’ll even explore two different ways to list variations: as individual rows, and as drop-down menus.

Step 1: Set up a basic product table

As you’ll recall, you’ll need the WooCommerce Product Table plugin if you want to enable customers to select product variations on the WooCommerce shop page. So go ahead and purchase this WordPress plugin now.

Get WooCommerce Product Table!

Then, you can follow these simple instructions to install the plugin on your WooCommerce business site. Once it’s activated, head to WooCommerce → Settings. Click on the Products tab, and select Product tables as shown in the screenshot below:

The WooCommerce Product Table settings.

Enter your license key into the first field, in order to validate your purchase. You should find this key in the confirmation email you received after buying the plugin. After that, save your changes to this page.

We’ll come back to the rest of these settings in a moment. First, however, let’s set up a basic product table. You can do this following either of these methods:

  • Use the 'Shop' or 'Category archive template' options to automatically enable the product table layout throughout your e-commerce store:
    WooCommerce add product table to shop and category pages
  • Add the following shortcode to a page: [product_table]

Once you've done this, check out the product table on your storefront:

A default WooCommerce product table.

It’s already functional, although it’s pretty basic at the moment. In addition, you’ll notice that variations are not yet being displayed. Let’s change that now.

Step 2: Display variations in your product table

At this point, you’ll want to save this new page. Then, head back to the WooCommerce Product Table settings (WooCommerce → Settings → Products → Product tables).

Here, you can customize exactly how your product table looks and works. There are a lot of options here. For example, you can choose to let customers filter products. Any changes you make will be automatically applied to the product table you just created. So you can experiment with the various settings, and check out your product table page to see them in action.

Right now, let’s focus on the Product variations field:

The Variations setting in WooCommerce Product Table.

At the moment, each product simply links back to its individual page. This isn’t ideal, since customers will have to waste a lot of time navigating to all those pages if they want to see what variations are available. Instead, you’ll want to pick one of the other two options.

2 ways to display variations on the shop page

Which variations option you choose is completely up to your personal preference. Show as dropdown list is the first choice, and will place a drop-down menu for each variation next to the Add to Cart buttons:

A WooCommerce product table with drop-down variations.

This lets customers easily select product variations on the WooCommerce shop page, and then add whatever they want to their carts by ticking the checkbox. You may also notice that we’ve made a few other tweaks to the table pictured above, such as adding a couple of new columns like the product SKU.

If you select Show as separate rows, on the other hand, here’s what you’ll see:

A WooCommerce product table with variations on individual rows.

Each hoodie and t-shirt variation is now its own row in the table. This is a bit less concise – and takes up more space – but it makes the variations more prominent. It also lets customers choose more than one version of a product (for instance, they could buy both a blue and a red hoodie). It does this without creating a new product in WooCommerce.

Ultimately, either of these options will be effective, and will make it much simpler for customers to select product variations on the WooCommerce shop page. We’d suggest experimenting with both, to see what looks better to you.

Don’t forget to save your changes to the WooCommerce Product Table settings when you’re done. Now, customers to start selecting variations right away!


Method 2 - Select variations in a quick view lightbox

WooCommerce Quick View Demo
Method 1 is the most literal interpretation of 'How to select product variations on the WooCommerce shop page'. However, if the product table layout isn't for you, then there is a neat alternative.

WooCommerce Quick View Pro is another WordPress plugin that is compatible with WooCommerce product variations. Unlike WooCommerce Product Table, it doesn't change the layout of the shop page or replace it. It simply adds quick view buttons to your existing WooCommerce shop page. Customers can use them to view more information in a lightbox popup, select variations, and add to the cart.

WooCommerce Quick View
The quick way to select variations from a user-friendly lightbox on the WooCommerce shop page.

The best thing quick view is that technically, shoppers are still selecting variations on the main WooCommerce shop page. As soon as they click Add to Cart button, their selected variations are added to the cart and the quick view lightbox closes - bringing them back to the shop page. They remain on the same part of the page as they were when they clicked the quick view button, so they don't get lost. This is a big improvement on select variations on an individual page for each product, as there's no chance that shoppers will get lost or distracted.


Method 3 - Display variations in a matrix-style grid

Variations order form matrix

Method 3 is great for online stores that need an easy way to display product variations in a grid-style layout.

The WooCommerce Bulk Variations plugin lists variable products in a matrix-style grid format. For example, if you sell t-shirts, you might list the 'Size' variation attribute horizontally and the 'Color' attribute vertically. The difference between this and methods 1 and 2 is that there is a separate bulk variations grid for each product, and it appears on the single product page. So customers would view the products on the shop page and click through to select variations for each product.

WooCommerce Bulk Variations
Sell more products with a user-friendly bulk variations grid or price matrix.

The plugin lets you add a quantity box for each variation along with the regular price or sale price for each variation. This way, customers can choose how much of each variation they'd like to purchase and add all of the items to their cart in one click and proceed to the checkout page. The key benefit here is that customers don't have to select each variation individually.

This speeds up the ordering process. It's the easiest way to create WooCommerce bulk variation forms for when customers need to place a single order.

Where to get the plugins

WooCommerce makes for an excellent foundation when you're building an e-commerce store. If you want to maximize sales, however, you’ll need to add in a few extra features. For instance, it’s beneficial to provide customers with an easier way to select product variations on the WooCommerce shop page and purchase bulk variations in one go.

To do that, you merely need to get WooCommerce Product Table or WooCommerce Quick View depending upon your use case, and follow the simple setup instructions. And if you want to create WooCommerce bulk variation forms, we recommend using the WooCommerce Bulk Variations plugin.

Do you have any questions about how to let customers select product variations on the WooCommerce shop page? Ask us anything in the comments section below!

Image credit: Pixnio

Please share your thoughts...

Your email address will not be published.