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.
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.
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.
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.
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.
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.
After activating the plugin, you can see the iT Product Table in the WordPress dashboard as illustrated below:
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.
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:
- Open the Columns tab and click on the Add a Column button.
- 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.
- Customize the element by tweaking the items in the General and Style tabs displayed to you in the Element setting panel.
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.
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:
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.
Then, in the Element setting panel, open the dropdown list of attributes and select the desired attribute to show in the table.
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:
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.
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:
- Add a new column and choose Product link element for its cell content.
- In the element setting panel, customize the product link label by clicking on the Add element and choosing Text from the list.
- Write any message in the combo box like show options to be displayed in the table.
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:
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:
When we inserted the short code of the above example into a new page of WordPress:
Then replace the shop page of WooCommerce with this new page as shown below:
The final result was like this:
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.
- 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.
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.
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.
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.
