A WooCommerce variations table makes it easier for your customers to view and select variations. Discover 2 easy ways to list variations in a table or matrix layout - no coding needed!
Typically, WooCommerce stores offer limited variation dropdowns which only appear on the single product page. This is fine for many startups and basic online stores. However, listing variations as dropdowns can make you lose sales:
- It's a pain for customers to have to select each variation individually and add them to the cart one at a time.
- Customers can't see the price for each variation if they're hidden within dropdown lists.
- Only allowing customers to add variations from the single product page adds an extra step to the journey. And everyone knows that a faster e-commerce user experience leads to better conversions.
Fortunately, there's an easy solution. Simply install a WooCommerce variations table plugin and instantly solve all of these problems.
Why a WooCommerce variations table plugin can improve your conversions
As you can see, the default WooCommerce variation dropdowns aren't ideal - especially if you sell the type of products where customers buy several variations at once.
The best WooCommerce variations table plugins make it much easier to view variations and add them to the cart. They list variations as products in a table or grid layout. Customers can see all the variations at once, and enter the quantity they require of each one. Then, they simply click 'Add to cart' to add all the selected variations together.
- Customers can see all the variations and prices at once.
- Each variation has its own quantity box, making it easy to enter a quantity for each one.
- Customers click the single 'Add to cart' button to add everything to the cart in bulk.
- And even better, they can do this from the shop and category pages (or even from any page or post). There's no need to visit a separate page for each product!
Letting customers select variations on the WooCommerce shop page or category pages can really speed up the buying process. By using a WooCommerce variations table plugin to list product variations, customers can easily compare them alongside one another.
2 ways to list WooCommerce variations as products in a table
In this tutorial, I'm going to give you a choice of 2 ways to create a product variation table for WooCommerce. First, I'll tell you about them both so that you can make a decision. Then, you can skip to the setup instructions and start setting it up!
This is what the 2 types of WooCommerce variations table look like:
As you can see, WooCommerce Bulk Variations lists the variations for a specific product in a grid or matrix. In contrast, WooCommerce Product Table creates a variations table of multiple products.
Here's a comparison of the WooCommerce variation table plugins so that you can decide which one is best for your store:
|WooCommerce Bulk Variations||WooCommerce Product Table|
|Number of products||1 product per variations table||Unlimited products per table|
|Number of attributes||1 or 2 (e.g. color and size)||Unlimited|
|Layout||Each attribute is listed as either rows or columns of the WooCommerce variation table, with a box for each variation||Each variation takes up 1 row of the table|
|Data displayed||Enable or disable the image, price, quantity box, and stock information for each variation||Choose which columns to include including image, name, product description, stock, price, quantity box, and buy button and/or checkbox|
|Location||Enable the variations grid on the single product page, or use a shortcode to list variations for a specific product on any page or post. You can also use it with a quick view plugin to list variations in a lightbox on the WooCommerce shop/category pages.||Enable the table layout on shop/category pages, or use a shortcode to insert variable product tables into any page or post|
|Bulk editing||Edit variations in bulk||Not included, but you can achieve this by using both plugins together|
What type of WooCommerce variable products table will you choose?
Made a decision? Now it's time to skip to the setup instructions for your chosen WooCommerce variations table plugin:
- WooCommerce Bulk Variations - skip to instructions.
- WooCommerce Product Table - skip to instructions.
Option 1: WooCommerce Bulk Variations
Bulk Variations creates a WooCommerce product variations table listing variations for a specific product. For example, it's perfect for displaying the price of all the variations in a WooCommerce variable product price table. Customers don't need to click on a variation to see the price! They can also add multiple products to the cart directly from the pricing table.
WooCommerce variations table - Setup instructions
- Get WooCommerce Bulk Variations and install them on your WordPress site.
- Head to WooCommerce → Settings → Products → Bulk variations and enter the license key from your order confirmation email.
- Use one (or all!) of the following options to set up your WooCommerce product variation tables:
- Configure everything centrally on the plugin settings page, which will automatically enable it on the single product page for all eligible products.
- Enable the WooCommerce variation table for each product individually on the 'Edit Product' screen.
- Use a shortcode to manually insert product variation table for WooCommerce into other pages and posts.
- Install the WooCommerce Quick View plugin so that customers can open a lightbox containing the product variations table from the shop and category pages. This is important if you want to truly speed up the buying process, as customers don't need to visit a separate page to choose their variations.
Option 2: WooCommerce Product Table
This variable Product Table plugin provides a different way to create a WooCommerce variations table. While you can use it to list variations on the single product page, that's not its main purpose. Instead, it actually changes how your products are listed on the main shop and category pages.
WooCommerce Product Table lets you list WooCommerce variations as a table on any page of your website. Conveniently, this can be used for either specific products or for multiple products, whole categories, and more. You might:
- Enable it on the shop and category pages so that customers can select variations without leaving the page.
- WooCommerce display variations as list of products in a table on the product detail page, replacing the default dropdown lists.
- Add WooCommerce variation tables listing specific products on normal pages, or even within blog posts.
How does it work?
The plugin lists variations as products, with each one having its own row in the table. That way, you can list the variations for multiple products in the same table, alongside other types of products.
The table has multiple columns of information about each product or variation. Customers can instantly see all the information about each option and make quick buying decisions. They can then choose quantities and use the buy buttons or checkboxes. This is a great way to change the variation dropdown to a checkbox so that customers can select multiple variations and add them to the cart in a single click.
You can use the product table variations plugin to list variations anywhere on your site. This gives e-commerce stores an excellent way to list variations as products and make shopping easier for their customers.
Find variations more easily
WooCommerce Product Table comes with extra features to help customers to find what they want. As well as an instant search box, you can display filter dropdowns above the table. For example, if you've created a WooCommerce variation table with different options for color and size then you can add them as filters. Customers select their size and color, and the table updates to show variations with these product attributes. Neat!
WooCommerce Product Table can display product variations as a table or dropdowns
Before we start setting it up, it's worth mentioning that the plugin provides two ways to create WooCommerce variable product tables. These are:
- Separate variations - list variations as products on their own row of the table.
- Variation dropdowns - list products in a table (1 product per row), with variation dropdowns next to the buy buttons.
The benefit of WooCommerce variation dropdowns is that they're compact. You can list large numbers of product options in a small amount of space. As I mentioned earlier, it's a shame that WooCommerce only lets you display variation dropdowns on a single product page. With WooCommerce Product Table, you can add WooCommerce variation dropdowns as part of a product table anywhere on your site.
Which should I use?
For some stores, there are downsides to listing variations as a dropdown - even within a variable product table:
- Customers can only see 1 variation at a time. They have to select each variation option individually to see the variation price, description, stock, and image. This makes it hard to compare variations and make buying decisions.
- The buying process is slower, as customers have to select a variation (often from multiple options), then click add to cart. They must repeat the process to buy multiple variations. There's no way to select multiple variations in one go.
This is fine for many stores but causes problems for others. If you have large ranges of product sizes, different colors, weights, or other options, then a WooCommerce variations table with each option on its own row can massively benefit your store. Displaying variations in a table makes it easier for your customers to find and understand the necessary information. They can see all the available variations at once instead of having to select from dropdowns.
How to create a WooCommerce product variations table
Watch this video to discover how to create a WooCommerce variations table with the WooCommerce Product Table plugin:
- Install the WooCommerce Product Table plugin.
- Activate your license key at WooCommerce → Settings → Products → Product tables.
- On the same page, choose all the settings for your WooCommerce variation tables. In particular, pay attention to:
- Columns - this controls what information is displayed about your product variations. The plugin supports individual variation descriptions, product images, prices, and stock statuses. If this data is available, then it will display in the relevant columns of the table. If you haven't added this data for each variation, then the information for the overall product will be used instead. (This avoids any gaps in your variations table.)
- Variations - choose 'Dropdown' or 'Separate', as we discussed above.
- Add to cart button - choose 'Button' or 'Button and Checkbox' to allow customers to add multiple variations to the cart at once. Customers can tick the options they require and click a single 'Add Selected to Cart' button above or below the table of variations as products.
- Filters - select 'Custom' and add att: followed by the slugs for the custom attributes of your variations, separated by commas. For example, you might add
att:color, att:sizeto let customers filter by color and size.
- Now choose where to display the product variation table for WooCommerce. The options are:
- Shop and category pages - Tick the relevant boxes on the settings page, and this will enable the WooCommerce variation table layout throughout your store.
- Use a shortcode to list one or more products on any page or post (see instructions), or on the single product page.
Check out the full list of features that come with the Product Table plugin, and start planning which ones to use for your WooCommerce variations tables.
Can I automatically add a table of variations to the product page?
The variable product table shortcode lets you list variations anywhere on your site, including in the short or long description on the single product page. However, this won't hide the default variation dropdown menus. This is a bit more technical so we've provided code snippets that developers can use to achieve this.
Case studies - WooCommerce variations table in action
Before we finish, let's look at some real-life WooCommerce stores that use variations tables instead of dropdowns.
Many store owners use the plugin to list WooCommerce product variations on individual product pages. They do this as an alternative to built-in variations, to make purchasing technical or bulk items more straightforward.
A WooCommerce variation table layout is particularly suited to e-commerce sites that sell equipment and custom machinery, tools, or supplies. It's also ideal for bespoke kitchens, bathrooms, or furniture online stores. This is because customers can configure products to suit their needs, combining multiple choices as needed.
For example, First Kitchens use WooCommerce Product Table on the single product page for this purpose:
Similarly, Mechanical Air Supplies uses the code snippets in the plugin knowledge base to automatically add WooCommerce variations tables to the single product pages:
Edit multiple variations more easily
Have you ever noticed how long it takes to edit your variations? For example, if you want to add the same image to multiple variations at once, or set the same price for all variations with particular attribute values?
In WooCommerce itself, you have to do this manually. You can save yourself a lot of time by installing WooCommerce Bulk Variations. As well as displaying variations in a grid (which we discussed earlier), it lets you filter variations on the 'Edit Product' screen and edit the selected variations in bulk. Even if you're using WooCommerce Product Table to list variations in the front end, you can still use WooCommerce Bulk Variations for the bulk management features in the back end.
Change the format of the variation price display
If the variations for a particular product are different prices, then WooCommerce display variations as list for the main price as a range. For example, if the lowest price if $10 and the highest price is $20 then the price range is shown as "$10 - $20".
If that doesn't work for the product types you sell, then you can easily fix this by installing the WooCommerce Variation Prices plugin.
This simple but effective plugin lets you replace the WooCommerce variation price range with any format you like. You can show the lowest price only, the highest price, replace the dash with another symbol, or create a completely custom price format.
The customized variation price range will appear above the variations grid if you're using Method 1. It also appears in the price column of the WooCommerce variable product table if you're using Method 2.
Final thoughts on listing WooCommerce variations
By giving customers extra choice and flexibility in how WooCommerce display variations as list, you can encourage multiple or bulk sales for your WooCommerce variable product table. Customers are no longer limited to a single page for choosing product variations. Instead, they can add different variations to the checkout cart directly from other areas such as product category pages, your main shop, and also any other page on your WordPress site. This reduces the number of clicks - vital for improving your WooCommerce store's conversion rate.
This can have a hugely positive impact on purchasing behavior and increase your sales. The best WooCommerce variations plugin makes it easy to list variations as a table, which isn't normally possible with WooCommerce.