Blog

How to show WooCommerce product variations in separate table rows?

show product variation in separate table rows
Table of Contents

One of the biggest problems WooCommerce store managers face is showing product variations to customers. Variations should be displayed to make it easier for customers to view and choose variable products.

Generally, product variations in WooCommerce stores are displayed as dropdown lists on the product page. Therefore, customers must visit each product page to select their desired variable. This method is good for startups and small online stores with few products.

But big stores prefer to show their products to customers as a table to make their buying process easier. Fortunately, the WooCommerce product table plugin allows store managers to display variable products in different ways in the table so that customers can order directly without opening the page of each product.

In this article, we will teach you how to display product variations in the separate table rows for WooCommerce.

How is WooCommerce product variations displayed in the table?

If you want to display product variations to customers on the product page of WooCommerce, you can choose one of the following methods:

Display variation table on the WooCommerce product page

In this method, when customers visit the product page, a table of variables is displayed to them. They can enter the number of products they need in each table cell and order it.

display variation table on WooCommerce product page

Show WooCommerce product variations in the combo box

In this method, the customer must still visit the product page to see the variations in a combo box. Customers can choose one of the variations by opening the dropdown list. Usually, each variable with its items is displayed in the description section to guide customers more.

show WooCommerce product variations in combo box

As we mentioned, these methods are not suitable for stores that have a large number of products. By installing the WooCommerce product table plugin, these stores can display variable products to customers in one of the following ways to simplify shopping.

1- List WooCommerce product variations in separate table rows

The easiest way to display variable products to customers is to show WooCommerce product variation in separate table rows. This way, customers can easily see any variable product and its price in the table and purchase directly with one click.

result List WooCommerce variable products in separate table row

2- List WooCommerce variations as dropdown in the table

The product table plugin allows you to display variations as a dropdown list. In this method, you can list the variations in different table columns and display their items as a dropdown list in each cell.

result list WooCommerce variations as dropdown in table

3- Let customers see product variations in the product detail page

Another way for informing customers about the variations is adding a link to the table and leading the customers to click on it and see the variations in the product page.

result to let customers see product variations in the product detail page

How to create a WooCommerce variable product table?

The WooCommerce product table plugin is one of the most powerful plugins for creating product tables in the WooCommerce store, providing store managers with diverse and flexible options for displaying variable products. In this plugin, a very simple user interface has been designed that allows you to add as many rows and columns as you need to display products, variations, categories, custom fields, prices, etc.

In this article, we will discuss one of the wonderful features of this plugin and describe how to show WooCommerce product variation in separate table rows in 4 simple steps.

Step 1: Install and activate the plugin

To use the amazing features of this plugin, first, try downloading it from the website and installing WooCommerce product table plugin in WordPress.

WooCommerce product table pro

After activating the plugin, you can see the iT Product Table in the WordPress dashboard as illustrated below:

open it product table menu and select add new option in the WordPress dashboard

Then, you need to click on the Add New Table button. On the next page, you can choose one of the predesigned templates or press Get Started to create your product table.

select product table template and click get start button

Let’s consider that you added a new table and made your query from the variable products. Now, you want to customize your table’s columns to show product variations in a separate row.

Step 2: Add columns to create a variable product table 

As we mentioned above, the WooCommerce product table plugin comes with an easy interface allowing you to quickly add as many columns as you need just by following 3 simple steps:

  1. Open the Columns tab and click on the Add a Column button.
Add columns to product table
  1. The new column box has two sections: Heading and Cell Content. To edit the content of each section, click on the Add Element button and choose one of the Elements from the list that appears in the left panel.
add cell content element for variation product in table
  1. Customize the element by tweaking the items in the General and Style tabs displayed to you in the Element setting panel.
customize general and setting tab in attribute element

By repeating these simple steps, you can add different columns and show any information to your customers in the table. 

By repeating these simple steps, you can add different columns and show any information to your customers in the table. 

To fulfill the purpose of this post, we added 5 columns in the table and assigned 5 below elements to their cell content by following the steps mentioned above five times: 

  • Check box: To let the customers select the product from the table.
  • Product image: To show product featured images to the customers. 
  • Title: To display product title in the table.
  • Price: To inform customers about the price of variable products.
  • Add to cart button: to let the customers directly add the products to their carts.

Now, we are ready to instruct the plugin to show product variations in separate rows on the table. Let’s see how in the next step.

Step 3: show variation in the table

The WooCommerce product table plugin provides multiple solutions for displaying variations in the table. To help you find the most suitable one based on your needs, we describe three useful methods in the following.

Method 1: Show WooCommerce product variations in separate table rows

This is the simplest solution to show WooCommerce product variations in separate rows. To instruct the plugin to display each variation in separate rows, you just need to open the Settings tab in the plugin and scroll down to find the “Show variation on one row” field. 

click settings tab and choose show variation on one row option

This option displays a list of all variable products in the table, and their variations are visible in separate rows. So, you can expect to show a product table like below to your customers:

result show product variations in separate table rows

Method 2: Display WooCommerce product variations in separate table columns

In the WooCommerce product table plugin, it is also possible to display the variations in separate columns.

To do this, you just need to add a new column and select the Attributes element for the Cell content

add attribute element for cell content tab in table

Then, in the Element setting panel, open the dropdown list of attributes and select the desired attribute to show in the table.

open dropdown list and select desired attribute for products variation

You can add several columns and assign different attributes to their content. 

If you want to show the price of each variation in the table to your customers, after adding the price column, go to the Element settings panel and mark “Switch price based on selected variation”, as illustrated below:

select switch price based on selected variation option for products variation

For example, we added Size and Colors in different columns of the table as you can see in the below image, all items related to each attribute are displayed as a dropdown list to the customers. So, when customers choose one item from the list of Sizes and another one from the list of Colors, the price will be changed automatically based on that variation.

result list attribute in product variations

Method 3: Let customers see product variations in the product detail page

To let the customers observe the variations in the product page, you can add the product page link to the table by following below steps:

  1. Add a new column and choose Product link element for its cell content.
  2. In the element setting panel, customize the product link label by clicking on the Add element and choosing Text from the list.
add text element in products variation
  1. Write any message in the combo box like show options to be displayed in the table.
write message in combo box for text element

Now, the product link is successfully added to the table and customers can visit the product page by clicking on the show options label to see the variations as illustrated below:

result customize text element

Step 4: Show the product table to the customers 

After creating WooCommerce product table variations with this plugin, you need to insert the table short code to a WordPress page and replace the shopping page of WooCommerce with this new page.

The Short code icon of the table is on the top right of the screen, as illustrated below:

select shortcode icon in product table

When we inserted the short code of the above example into a new page of WordPress:

add shortcode in new page of WordPress

Then replace the shop page of WooCommerce with this new page as shown below:

Replace WooCommerce shop page with created product table page

The final result was like this:

result of inserting product table shortcode

Extra Features for making product table more customer friendly 

The features you can add to your product table by WooCommerce product table plugin are not limited to what we described in this post. You have access to a lot of options to add to the table in order to facilitate the purchase process of customers.

One of the most useful options that makes the purchasing process more enjoyable for customers is the ability to search and filter the products based on their needs.

Let’s see how you can let them filter the products by variations they need in the product table.

Add WooCommerce product variation filter in the table navigation area

Adding variations to table navigations is another method that you can add to your table with the WooCommerce product table plugin. In this way, customers can view the list of variations on the table’s header, footer, or sidebar and filter the desired products by selecting any of their items.

To add this feature to your product table, you can follow the below instruction in the WooCommerce product table plugin:

  • Go to the Navigation tab.
  • Press Add Element in one of the navigation bars – header, footer, or sidebar.
  • Choose Attribute Filter from the list of elements.
add attribute filter in header navigation tab
  • Select one of the attributes from the list to let the plugin show its items on the site navigation and let customers filter the products by that attribute.
select attribute list option for attribute filter in header table

You can add as many attribute filters as you need in the site navigation. 

In the below example, we added Color and Size filters on the heading. So, when customers open the combo box of the color or size, they can choose one of the items to filter the products.

result attribute filter element in header table

Show WooCommerce variations on shop page

In this guide, we have described how you can display different WooCommerce attributes on the product table. For example, you can easily add color to the Attribute element to show color variations on the shop page.

However, there is another option for WooCommerce to show all variations on the shop page in this plugin allowing customers to select them easily.

To add this element and show variations on the shop page, try to:

  •  Add a new column.
  •  Press the Add Element option.
  •  Choose Select Variation from the list of elements.
select variation element to cell template

After adding this element, you can set different configurations in the General tab to show variations on shop page WooCommerce.

customize variation element in general tab

The most useful field is Display type, which can be set as one of the below items:

–        Dropdown with all variations: To display product variations dropdown on shop page.

–        Radio buttons for all variations: To WooCommerce show product variations on shop page as radio buttons and let customers select one of them.

–        Single radio button: same as the previous option for one variation.

select display type in variation element

For example, when we chose the second option to WooCommerce show variations in the shop, the result was like below:

result variation element in shop page

WooCommerce add multiple variations to cart

Adding multiple variations to cart is a great way to improve customer experience. To enable customers to select multiple products and add to cart variation in the product table, you need to first add a Checkbox column to your table as illustrated below:

select checkbox element in table cell content

Go to the Navigation tab and follow the below steps:

–        Press Add element in one of the navigation bars like Header.

–        Choose Add selected to cart element from the list in the left panel.

–        Customize add to cart variation WooCommerce in the General and Style tab.

select add to cart element in table header

That’s it. You have successfully instructed the WooCommerce product table plugin to display variations on the shop page and let customers add multiple products to their cart with one click.

result add to cart element in shop page

Show variations on the shop page WooCommerce by overriding

One of the most amazing features of the WooCommerce product table plugin is to override the WooCommerce shop page. This feature allows you to show the product table on the WooCommerce shop page with one click. 

let’s review how you can override the WooCommerce shop page with our plugin:

  1. Navigate to WordPress Dashboard > iT Product Table > Settings.
  2. Open the archive override item in the General tab.
  3. Locate the Shop Override Table and choose the name of the created table from the list.

Note: It is important to save the product table with a name in the plugin to see it in the list.

  1. Press the Save Settings button.
select shop override table in settings menu

You can use this method to let WooCommerce show product variations on the shop page instead of the Shortcode method we have described in step 5.

What are the advantages of displaying product variations in separate table rows?

The main advantage of displaying product variations in separate table rows is to improve the customer’s buying experience. With this method, customers can add each variable product to the shopping cart individually and see the price of each one separately.

This method of displaying variable products also saves customers time because they do not always need to open the product page to see the available variations. The faster the user’s buying experience, the higher the conversion.

On the other hand, customers can see all the variations of a product along with their prices at once and enter the required quantity. Then, click “Add to Cart” to order all the selected variations simultaneously.

Another advantage of displaying product variations as a list on separate rows is that customers can easily compare them. This can have a very positive effect on purchasing behavior and increase site sales.

WooCommerce product table pro

Conclusion

Show WooCommerce product variations in separate table rows can make customers’ buying experience more convenient, encouraging them to buy more from your online store. With this method, customers no longer need to visit the product page to select product variation. Instead, they can compare the different variations and prices in the table and directly order them with one click. To display product variations in separate rows of the table, you can use the WooCommerce product table plugin. This plugin has other great features that make it easy for site managers to display WooCommerce products and their features in a table.

Click here to learn more about this powerful plugin.

Leave a Reply

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

Shopping cart
Sign in

No account yet?

We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.

Start typing to see products you are looking for.