NEW! Display Product Variations on Separate Rows in a WooCommerce Table
Our bestselling plugin, WooCommerce Product Table, has a new option to display product variations on their own row in a table. We’ve also added support for individual variation images.
This means that there are now 3 ways to display product variations in a table:
- The original method of displaying variations as dropdown lists in the add to cart column.
- The new method of listing each variation on its own row.
- Or alternatively, customers can click through to select variations on the single product page.
Lots of customers have asked for an option to separate variations and list them as individual rows in the table, as if they were unique products. So we’re pleased to have added this feature, and hope you find it a useful way to display variable products.
How does the new option to display product variations work?
WooCommerce Product Table has a new option which breaks out variable products into their individual variations. It lists each variation as a separate row in the product table.
Variations are listed as individual products even though they’re actually variations of a single product. This means that you can list them alongside standard products in a single table, with a separate row for each product or variation.
Note: Since this article was published, we have also added support for Product Add-Ons. This lets you add even more product options in your WooCommerce tables.
Example: separated variations in a table
Let’s say that you have a product called ‘T-Shirt’ with 2 attributes: Colour and Size. Each attribute might have 2 options, giving you 4 product variations in total:
- Red – Small
- Red – Large
- Blue – Small
- Blue – Large
There are now 3 ways to display these variations in a product table:
- With the default variations option in WooCommerce Product Table, the T-Shirt product will use a single row in the table. The variations will be listed as 2 dropdown lists before the add to cart button: 1 for size, and 1 for colour. Customers can use the dropdown lists to select any combination of attributes before adding their chosen variation to the cart.
- The new separate variations option works differently. It displays product variations on individual rows in the table, each with their own add to cart button. For this example, the T-Shirt product takes up 4 rows in the table – 1 for each variation. The product name column contains the full details for each variation so that customers can see the difference and choose which ones to buy. If you’re using separate variation images then each variation will show its own unique image.
- Instead of displaying product variations in a table, you can let customers click through to the single product page. Then, they can view and select variations, and add to the cart as usual.
Does it work with lazy load?
WooCommerce Product Table comes with a lazy load option for stores with large product databases. This improves performance and page load times by loading the results 1 page at a time.
At the moment, the new option to display product variations separately only works with the default version of WooCommerce Product Table, and not lazy load.
Please let us know if you’d like to use it with lazy load. If enough people ask, then we will add it to the plugin.
Individual variation images
The new version of WooCommerce Product Table also includes support for individual variation images.
Previously, if you were displaying dropdown lists for variable products, the ‘Image’ column would always show the main product image.
Now, if you have separate images for each variation, then the image in the table will change according to which variation is selected.
How can I list my variations separately in a table?
Existing WooCommerce Product Table customers can update to the new version of the plugin from Dashboard > Updates. If the update doesn’t appear, check our article on update problems.
Or if you haven’t bought WooCommerce Product Table yet, you can get it here.
Once you’ve got the latest version of the plugin, there are full instructions for how to display product variations on their own row. Check out our Variable Products knowledge base article.