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.
Keep reading to learn all about this exciting new feature.
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. This is perfect for many use cases, for example:
- Change variation dropdown to checkbox in WooCommerce – just list each variation on a separate row in the table, and use the add to cart checkboxes that come with the plugin.
- Display variations as individual products – maybe you’ve added your options as variations, but want to list them as separate products. Just list them individually in the table, and you’re sorted!
Either way, you can list variations 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 Woo tables.
Example: separated variations in a WP table
Let’s say that you have a product called ‘Hoodie’ with 2 attributes: Color and Toggles. Each attribute might have 2 options, giving you 4 product variations in total:
- Red – Yes
- Red – No
- Blue – Yes
- Blue – No
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. By displaying variations as individual products, you would think they are separate rather than options for a single product. In 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.
Case studies: Real sites using a WooCommerce variations table
Mechanical Air Supplies used our code snippets to dynamically list product variations on separate rows in a table on individual product pages. It’s a fantastic way of listing large numbers of variations in a user-friendly format:
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 Woo product 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 display variations as individual products 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 the Woo Product Table WP plugin 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.