2 easy ways to create a WooCommerce variations table

August 9, 2021

WooCommerce variations table plugin

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 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 product 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 plugin to list WooCommerce 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 WooCommerce variations table. 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 options 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 product 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 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, 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 into 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 product tables into any page or post

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

WooCommerce Bulk Variations table

WooCommerce Bulk Variations creates a table of variations for a specific product. This is how to set it up:

  1. Get WooCommerce Bulk Variations and install it on your WordPress site.
  2. Head to WooCommerce → Settings → Products → Bulk variations and enter the license key from your order confirmation email.
  3. 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 variations table for each product individually on the 'Edit Product' screen.
    • Use a shortcode to manually insert variation tables 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.
WooCommerce Quick View plugin bulk variations grid
An example of a WooCommerce variations table in a quick view lightbox
WooCommerce Bulk Variations
Replace the variation dropdowns with a table on your product pages.

Option 2: WooCommerce Product Table

WooCommerce product table separate variations per row

The 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.
  • Display variations as 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.
WooCommerce Product Table
List product variations on your site today!

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

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 variations 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 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 WooCommerce Product Table provides 2 ways to list variations in a table. These are:

  1. Separate variations - list variations as products on their own row of the table.
  2. 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 the 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 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, 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:

  1. Install the WooCommerce Product Table plugin.
  2. Activate your license key at WooCommerce → Settings → Products → Product tables.
  3. 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, 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 attributes of your variations, separated by commas. For example, you might add att:color, att:size to let customers filter by color and size.
  4. Now choose where to display the WooCommerce variation tables. The options are:
    1. Shop and category pages - Tick the relevant boxes on the settings page, and this will enable the table layout throughout your store.
    2. 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 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 dropdowns. This is a bit more technical so we've provided code snippets that developers can use to achieve this.

Alternatively, use the WooCommerce Bulk Variations plugin (see Option 1, above) to automatically replace the dropdowns with a variations table.

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 table layout is particularly suited to e-commerce sites that sell equipment and custom machinery, tools or supplies. It's also ideal for bespoke kitchen, bathroom 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:

WooCommerce kitchen website

Similarly, Mechanical Air Supplies uses the code snippets in the plugin knowledge base to automatically add WooCommerce variations tables to the single product pages:

WooCommerce variations list table

Change the format of the variation price display

If the variations for a particular product are different prices, then WooCommerce displays 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 type of products 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, and in the price column of the product table if you're using Method 2.

Variation Prices Plugin
Get more sales - take control over how variation prices are shown in your store today!

Final thoughts on listing WooCommerce variations

Both the Bulk Variations and Product Table plugins are ideal for creating a WooCommerce variations table. Choose whichever plugin best meets your requirements.

By giving customers extra choice and flexibility in how you display variations, you can encourage multiple or bulk sales for your WooCommerce variable product. Customers are no longer limited to a single page for choosing product variations. Instead, they can add variations to the cart directly from other areas such as product category pages, your main shop and 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.

Please share your thoughts...

Your email address will not be published.