How to let customers select product variations on the WooCommerce Shop Page

If you sell products that come in different variations on your WooCommerce store — also called "variable WooCommerce products" — you have to ensure that your customers know about the available variations.

In its default setup, WooCommerce doesn't display variable products in an optimized way. There's no way your users can discover them unless they click on a variable product's page. 

If you display all your product variations directly on your shop page, you can instantly make each variation of your variable WooCommerce products more discoverable. Users can also add their favorite variation to their cart directly from your shop page.

In this guide, we'll see three ways you can show variations of your variable products directly on your shop page and enable your customers to select product variations with just one click.

Two ways to show WooCommerce product variations on the shop page

In this guide, we’ll walk you through the steps to show your variable products directly on your WooCommerce shop page in two different styles using WooCommerce Product Table and WooCommerce Quick View Pro. We'll also look at how WooCommerce Bulk Variations works — another top WooCommerce product variations plugin that lets users purchase variations in bulk. But before we get to that, here's a quick look at these displays:

Displaying product variations in WooCommerce (on the shop page) with a flexible product table

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:

Displaying product variations in WooCommerce (on the shop page) with product quick view buttons

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:

Displaying product variations in WooCommerce (on the basic product page) with a bulk variations price matrix

Add a bulk variations price matrix so that customers can select variations from a matrix-style grid:

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 WordPress. 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. Just check out this cool WooCommerce product page to get an idea:

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 every 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 pages for your variable products. Keep reading to learn how.

Before you start, here's how you can add variable WooCommerce products

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 WooCommerce 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:

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:

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:

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

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:

You can now fill out any specific information that applies to your specific variations. 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. 

Now that you've set up your variable products, you're ready to optimize their listings and display them prominently on your shop page using the following ways. 

Method 1 - Use product tables to showcase variations on your WooCommerce shop page

WC Product Table is a WooCommerce variations WordPress plugin that lists variable products in an organized, attractive table. And even better, it can display WooCommerce variations in two ways: as separate products and as dropdown lists:

Plus, you can customize how it looks and what it contains. You can use this WooCommerce plugin to allow customers to select product variations on the WooCommerce shop page itself.

Check out the WooCommerce Product Table variations demo!

How to use WooCommerce Product Table 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. 

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:

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:
  
  
• Add the following shortcode to a page: [product_table]

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

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

Head back to your 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. Experiment with the various settings you get and check out your product table page to see them in action.

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

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:

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:

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: Use a quick view lightbox to showcase product variations on your WooCommerce shop page

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.

The best thing about 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: Use a matrix-style grid to display your variable products' variations (on a single product page)

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 this one adds a separate bulk variations grid for each product that appears on the product page. 

This plugin also 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 these WooCommerce Product Variation 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, get WooCommerce Product Table or WooCommerce Quick View depending upon your use case, and follow the simple setup instructions. And if you want to simplify WooCommerce bulk variation purchases, get WooCommerce Bulk Variations.

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