Ways to display product variations in the product table

September 12, 2020

You are not sure how exactly to provide a selection of WooCommerce product variations for your customers? Then this article is definitely for you.

Product variants allow you to display multiple options for a specific item, so customers can choose the one they want. Even though there are a few tricks for using this feature, once you get used to the process it becomes easier to list products with any number of variations.

However, the variations can be tricky to set up. Before reading this blog, I strongly recommend you to read “How to Create WooCommerce Attributes”. Creating attributes is an important first step before creating variations. The instructions in this post are also a continuation of that tutorial.

In this post, we will explain what “WooCommerce options” are and how it works. Then we’ll show you how to display them in the Product Table, and finally, we will share with you a new option for displaying variations in a pop-up. Let’s take a look!

What are “WooCommerce Variations”?

A variable product is good, which parameters can be selected while purchasing, for example, color, size, or material.

Sometimes the product you list in your WooCommerce store is only of one type. On the other hand, many items will have different variations. Here are a few examples:

-Clothes in different colors and/or sizes.

-Furniture and other household goods from various materials.

-Food with different flavors, ingredients, toppings, etc. (For example, for a website of a restaurant).

Most stores offer at least a few products with more than one assortment, and many rely heavily on these types of products. Fortunately, WooCommerce provides a built-in way to add almost any parameter to your product pages, but the Product Table can display them conveniently and dynamically.

Read this documentation article on how to create Wocommerce product variations

WooCommerce Variations

How to display options in the product table?

If you are looking for building an effective WooCommerce store, then you should definitely check out the WooBeWoo WooCommerce Product Table plugin that helps you to display goods correctly! The Product Table plugin dynamically displays product variants and allows your customers to select the desired product variant to add to their cart in real-time without refreshing the page.

  • Method 1. Display each variation as a separate product.

Display variations as separate products, you may have added your variations as options but you want to list them as separate goods. Just list them individually in the chart!

In any case, you can specify variations as separate products, even if they are actually variations of the same good. This means that you can list them along with the standard products in one table, with a separate line for each product or variant.

In order to display each option as a separate one, you need to:

Create a table of products;

-When adding products, click “show variations” and select all the options you need;

-Click “Add” and save, now all options will be displayed in separate rows of the table.

 * or just after adding products, check the “Add products variations automatically” checkbox in the table editor menu, and the variations will be added to all variable products in separate rows of the table.

  • Method 2. Display options as drop-down lists in the “buy” column.

This is one of the most ideal ways to list drop-downs of options and add to cart buttons directly to product lists. It is much more flexible than displaying variations for each product. Since you significantly save space and the buyer will not scatter eyes all over the page.

Moreover, when choosing a certain option, in real-time mode, its data will also change (for example, price or image).

In order to display a selection of options in the form of drop-down lists in the buy column, you need to:

Create a table of products.

-Add all the columns you need including “Buy”.

-Add the products you want, including variations.

Select the checkbox with the “Show variation thumbnails” option, so that the product image would change depending on the selected variation in real-time, without refreshing the page.

Customers can buy different products faster and easier. They no longer need to go to the product detail page to view product options and prices.

Display options as drop-down

  • Method 3. Show a button for each option.

An “add to cart” button will be added for each variation. This is a great way to display options if the product doesn’t have many variations.

In order to show the button for each option, you need:

-Create a table of products.

-Add all the columns you need including “Buy”.

-Next, click on the pencil in the Buy column to open the column settings.

-Then check the box next to “Show a button for each variation”.

Now, each product variation will have its own button in the “buy” column.

  • Method 4 (new one). Select options in the pop-up.

Now you can let your customers choose options in a beautiful pop-up window as quickly and conveniently as possible.

Let’s say at this point you’ve already installed the WooCommerce plugin, created products, and added variations using attributes.

Now you can turn on this impressive option very easy:

1) Create a table of products.

2) Add the products you want.

3) Add the columns you want, be sure to add the “Buy” column.

4) Turn on the “Select” option in the pop-up window. To do that, click on the pencil in the “Buy” column to open the column settings. Then, select the checkbox next to “Select options in the pop-up”.

5) Enter text for the select button.

6) After enabling the option, you will see a field in which you can enter text for the option selection button, by default it is “Select Options”.

Now for products with variations, instead of the “add to cart” button, you will see a button to select options, after clicking it your customers will have a chance to choose variations in a pop-up window.

While the products will retain the familiar add to cart button unchanged.

Magic, isn’t it? And all that done without a single line of code.

Below you can see and enjoy the work of this option:


Luckily, our Product Table WooCommerce plugin solves all your product variations display problems. You can use it to show product variations in a drop-down list, a nice pop-up, add to cart buttons for each variation, or even display each option in a table on separate rows. This gives e-commerce companies a great way to list options as products and make shopping easier for their customers.

Of course, each of these methods is suitable in its own way, but be careful choosing them. Since what suits one store may not suit another one.

For example, if you have a small variation range, then you can display the options with buttons for each option, or display each variant in the table.

Or, if you have a store with a large variety of products, it is recommended to use a drop-down list, where you can place an unlimited number of variations in a pop-up. And what is really important, product parameters will change without refreshing the page, in accordance with the selected option.

Have a nice day and display your products correctly with WooBeWoo.

Leave a Reply

Your email address will not be published. Required fields are marked *

Buy Now Bundle and save over 60%

Buy now