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:
- 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:
- 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:
- Method 3 - Add a bulk variations price matrix so that customers can select variations from a matrix-style grid:
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 Table, WooCommerce 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:
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:
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 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:
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:
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.
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:
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.
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.
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:
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
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:
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 - Select variations in a quick view lightbox
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 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
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.
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