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. In this guide, I’m going to tell you about two 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:
- Method 2 – Add product quick view buttons so that customers can select variations from a quick view lightbox, without leaving the WooCommerce shop page:
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 or WooCommerce Quick View Pro 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:
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.
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 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.
To get started, 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. Then, select Save attributes:
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:
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 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 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.GET THE PLUGIN
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. 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 website. Once it’s activated, head to WooCommerce -> Settings. Click on the Products tab, and select Product tables:
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. Add the following shortcode to the page:
This will automatically generate your product table. Select the Preview button to check it out 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. 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. 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:
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 selecting variations 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.
Method 2 – Select variations in a quick view lightbox
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 which supports 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.GET THE PLUGIN
The best thing quick view is that technically, shoppers are still selecting variations on the main WooCommerce shop page. As soon as they click the 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.
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.
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