How to Let Customers Select Product Variations on the WooCommerce Shop Page

If you 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. What’s more, you can use a customized, flexible product table to help customers make comparisons and choose their favorites:

An example of a WooCommerce Product Table with variations.

In this guide, we’ll talk a little about why this feature can be so effective. Then we’ll show you how to let customers select product variations on the WooCommerce shop page, using the WooCommerce Product Table WordPress plugin. 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 individual product page.

Fortunately, the WooCommerce Product Table WordPress plugin solves these problems:

WooCommerce Product Table

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

GET THE PLUGIN

This WooCommerce variations plugin enables you to create an organized, attractive table where you can display all of your products:

A WooCommerce Product Table example with variations.

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

Check out the WooCommerce Product Table variations demo!

How to let customers select product variations on the WooCommerce shop page (in 3 steps)

Setting up a product table and using it to display product variations couldn’t be easier. 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.

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

Step 1: Add your product variations in WooCommerce

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

To get started, 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. Then, select Save attributes:

Customizing a product attribute in WooCommerce.

Now head to the Variations tab, and click on Go. 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.

Step 2: 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 the plugin now.

Get WooCommerce Product Table!

Then, you can follow these simple instructions to install the plugin on your website. Once it’s activated, head to WooCommerce > Settings. Click on the Products tab, and select Product tables:

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. Open up a new page, click on the Toolbar Toggle icon, and then select Insert Product Table:

Adding a new product table to a page.

This places a shortcode onto the page, which will automatically generate your product table. Select the Preview button to check it out 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 3: 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. 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. 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.

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 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).

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. Then, publish your product table page. This will make it live on your site, and enable customers to start making purchases right away!

Replacing the WooCommerce shop page

In the instructions above, I showed you how to create a new page listing all your products in a table. You can use this as a replacement for the main WooCommerce shop page. For example, link to this page instead of the Shop page. You should also set up a redirection to forward the default shop page to your new product table page.

Alternatively, you can add the product table layout to the actual WooCommerce shop page. This means that you can continue using the built-in shop page, and it will show the product table view complete with variations instead of the default grid layout. To do this, you need to replace one of the template files in your theme. There are instructions for this in the plugin knowledge base.

Conclusion

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.

To do that, you merely need to get WooCommerce Product Table, and then follow these three steps:

  1. Add your product variations in WooCommerce.
  2. Set up a basic product table.
  3. Display variations in your product table, either as drop-down menus or on separate rows.

WooCommerce Product Table

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

GET THE 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.