If you have a WooCommerce store selling things with multiple variations, then you might require a method to display single versions of WooCommerce products to boost the product variation visibility and make it easier for customers to add them to their shopping cart.
So in today’s article, I’ll be walking you through the 3 methods to display product variations in WooCommerce with the help of WooCommerce Product Table plugin and Show Variations on Shop Page plugin.
Preview
Here’s a sneak peek of the final results.
On This Page
How to List the WooCommerce Product Variations?
Here, I’ll show you how to display the variations in WooCommerce. I’ll be covering the 3 different methods in very simple and easy to follow steps.
For this tutorial, I am assuming that you already have some variable products in your WooCommerce store.
If you do not have the variable products, you can add them by navigating to the Products » Add New.
So let’s dive in and see how you can display the product variations in WooCommerce.
1. List Product Variations in a Table On The Shop Page
The first method is to display the product variations in a table on the shop page with the help of WooCommerce Product Table plugin.
1.1. Install and Activate the WooCommerce Product Table Plugin
Note: You can skip this step if you have already installed and activated the WooCommerce Product Table plugin.
To install the WooCommerce Product Table plugin, you will need to install the Woosuite Core plugin and activate it with the help of a license key. We have created a Quick Start Guide for you to figure out how to install and activate the WooCommerce Product Table plugin.
1.2. Create New Table
Once you have installed and activated the plugin, Now to show the products and their variations in a table on the WooCommerce shop page, follow the given steps:
1. Add New Table
Navigate to Woosuite » Product Table from your WordPress dashboard and click on the Add New Table button.
Once you click it, you’ll see a screen where you can create and control the different table settings.
2. Order Form Display
Give an internal name to the table.
3. Order Form Information
Now expand the Order Form Information by clicking on the (▾)
Now, specify the columns you want to add to the table. To add a column, just drag the column from the Available columns section and drop it in the selected columns sections.
You can also adjust the other settings like the image size and description length. I am keeping them as the default.
4. Bulk Add to Cart
Now expand the Bulk Add to Cart by clicking on the (▾)
4.1. Select the Add to Cart Display
Now select how you want to display the individual add to cart button in the table. You can display it in three ways: ‘Buttons Only’, ‘Checkbox Only’, and ‘Buttons and Checkbox’. You can select any of them you like, but I am selecting the ‘Buttons and Checkbox’.
4.2. Enable the Quantity Selectors
Enable the quantity selectors in the add to cart columns.
4.3. Select the Variations Display
Now select how you want to display the variations in the table. You’ll get three options in the dropdown: ‘Link to Product Page’, ‘Dropdown list in the add to cart column’, and ‘Separate rows in the table(one per variation)’.
I am selecting the ‘Separate rows in the table(one per variation)’ for this tutorial.
4.4. Select The Position Of The Bulk Add To Cart Button
Finally, select the position of the bulk add to cart button. You’ll get three options in the dropdown: ‘Above table’, ‘Below table’, and ‘Above and Below table’. For this tutorial, I am selecting the ‘Above table’.
5. Order Form Controls
Now expand the Order Form Controls by clicking on the (▾)
Here, you’ll get a few options.
5.1. Sort Products
You can select how you want to sort the products in the table and add product conditions to filter the products by categories, tags, and attributes. I have kept the sort order as default and haven’t added any product conditions for this tutorial.
5.2. Product Filters
You’ll get three options in the dropdown: ‘Disabled’, ‘Show based on columns in the table’, and ‘custom’. I have chosen ‘Show based on columns in the table’ for this tutorial.
5.3. Page Length
Select the position of the 'Show [x] products' dropdown list. I have selected ‘Above table’.
5.4. Search Box
Select the position of the search box. As we are displaying the table on the shop page, I have enabled its position ‘Above table’.
5.5. Product Totals
Now select the position of the product totals, e.g. 'Showing 1 to 5 of 10 products'. I have selected ‘Above table’.
5.6. Pagination Buttons
Select the position of pagination buttons as ‘Above table’ from the dropdown.
5.7. Pagination Type
Now, you need to select the type of the pagination buttons from the dropdown. I have selected the ‘Prev/Next + Numbers’.
5.8. Reset Button
Finally, enable the reset button.
6. Save Changes
Once you have created the table, click on the Save Changes button on the top to save the changes.
1.3. Set Woosuite Product Table As Default Shop Page Layout
To set the Woosuite product table as the default shop page layout, go back to the General Settings of the plugin by clicking on the back arrow at the top.
Now select the table from the Shop Pages dropdown and click on the Save Changes button to save the changes.
1.4. Final Results
If you visit the Shop Page, you’ll see all the products and their variations displayed in a table.
2. List Product Variations As Individual Products On Shop/Category Pages
The second method is to display the product variations as individual products on the shop/category pages with the help of Show Variations on Shop Page plugin.
2.1. Install and Activate the Show Variations on Shop Page Plugin
Note: You can skip this step if you have already installed and activated the Show Variations on Shop Page plugin.
To install the “Show Variations on Shop Page” plugin, you will need to install the Woosuite Core plugin and activate it with the help of a license key. We have created a Quick Start Guide for you to figure out how to install and activate the show variations on the shop page plugin.
2.2. Add Product Variations on Shop Page
To show your variations individually on the WooCommerce shop page, follow the below steps:
1. In WordPress Dashboard
Navigate to Products » All Products from your WordPress dashboard.
2. Select the Variable Products
Select the variable products from the “Filter by product type” dropdown.
3. Edit the Product
When you hover on any of the products you’ll see a few options, simply click on the Edit button to edit the product.
4. Scroll Down to the Product Data Section
Now on the Edit Product Page, scroll down to the “Product data” section and click on the “Variations” tab in the left menu.
5. Click the Expand Arrow (▾) On the Variation
Once this is done, click the expand arrow (▾) on the variation you want to display on the shop page.
6. Choose the Variation Visibility
Once the “Add variation” section is expanded, you’ll see a bunch of new options available, check the ‘Show in Catalog’, ‘Show in Filtered Results’, and ‘Show in Search Results’.
The following options are added by the show variations on shop page plugin:
- Show in Search Results?
- Show in Filtered Results?
- Show in Catalog?
- Featured (this will add your products in the featured product queries section)
- Disable “Add to Cart”? (will replace the “Add to Cart” button with the “Select Options” button), and
- Listings Only? (Will only display a selected variation in the product listing)
7. Click Save Changes and Update the Product
Now click on the “Save Changes” button under the “Product data” section and click on the “Update” button to save changes on the product page.
2.3. Final Results
Now let’s view the shop page and you'll see that the variations of the product you just edited are now being displayed individually.
3. List Product Variations In a Table On Product Page
The third method is to display the product variations in a table on the product page, with the help of WooCommerce Product Table plugin.
3.1. Install and Activate the WooCommerce Product Table Plugin
Note: You can skip this step if you have already installed and activated the WooCommerce Product Table plugin.
To install the WooCommerce Product Table plugin, you will need to install the Woosuite Core plugin and activate it with the help of a license key. We have created a Quick Start Guide for you to figure out how to install and activate the WooCommerce Product Table plugin.
3.2. Create New Table
Once you have installed and activated the plugin, Now to show the product variations in a table on the WooCommerce product pages, create a new table by following the steps mentioned in Method 1.
Just make sure that you don’t select any page from the dropdown in the Order Form Display section.
3.3. Set Product Table On Product Page
Now, go back to the General Settings of the plugin by clicking on the back arrow at the top.
Now select the table from the Enable Variation Table dropdown and click on the Save Changes button to save the changes.
3.4. Final Results
Now visit any variable product page and you’ll see a variations table on the product page.
Wrapping Up
Now you know all the methods to display the product variations in WooCommerce.
By following any of these methods, you can boost the visibility of variable products and make the buying experience more enjoyable for clients. Customers will be able to view all of your products in a table format without navigating through a single product page.
If you have any queries, you can ask them in the comments or contact our customer support. Our dedicated customer support team typically replies within 48 hours.
