WooCommerce Product Table fully supports variable products. There are 3 ways to display product variations in a WooCommerce table. You can see them in action on the variations page of the plugin demo.
Option 1 – Display variations as dropdown lists
variations="dropdown" to the product table shortcode. This will display a dropdown list of variations before the Add to Cart button in the product table. There will be a separate dropdown list for each variation.
Customers can select variations and add to cart directly from the table. When they add a variable product to the cart, the variations will automatically reset so that the customer can continue adding different variations.
When a customer selects variations, the correct price and stock status/stock level for that variation will appear under the Add to Cart button.
Your table must include the
add-to-cart column for this option to work. It only applies to WooCommerce variable products.
[product_table columns="name,price,add-to-cart" variations="dropdown"]
Note: The variation dropdowns will only display if you have added a price for your variations. If there is no price, then Option 3 will be used instead.
Option 2 – List each variation on its own row
To list each variation on a separate row, add
variations="separate" to the product table shortcode.
[product_table columns="name,price,add-to-cart" variations="separate"]
- Separate variations is not compatible with the lazy load option. If you are using lazy load then the variations will appear as dropdown lists (see option 1). For more information, please see our article on limitations of lazy load.
- Separate variations will only work for standard ‘Variable products’, which are part of WooCommerce. If you have additional product types added by a third party plugin (e.g. variable subscription products), then separate variations will not work and you should use
Option 3 – Select variations on the single product page
If you have variable products then option 3 will be used by default, so you don’t need to add anything to the product table shortcode.
Instead of showing variations in the product table, customers can click through to the single product page to view and select variations. If the table has an
add-to-cart column then the button text will change to ‘Select options’ and will link to the single product page.
Can I use the 3 variation options together?
Options 1 and 2 do not work together. They can be used with option 3, so that customers can either select variations in the table or on the single product page.
If you want to prevent people from clicking through to the single product page, then you can disable links in the product table. This will force customers to select their variations directly in the table, using the product table as a one-page order form.
Can I create a table of variations for specific products only?
Yes – please see the article on Listing variations for a specific product.
Will my variations fit in the table?
The product table will automatically resize to fit in as much information as possible. If you have lots of columns and/or variations then they may not all fit onto a single row, especially on smaller screen sizes.
WooCommerce Product Table comes with various options that let you control how the table behaves when the data won’t fit onto a single row. Please see our article on responsive options.
If you have too many variations to display as dropdown lists, then we’d recommend using options 2 or 3 (above) instead.
Can I display variation descriptions?
If you are using variation dropdowns, then WooCommerce Product Table will display the individual variation description below the add to cart when a customer selects a variation. This will only happen if you have added a description for the individual variation.
If you are using separate variations, then it is not possible to display the individual variation descriptions. If you would like us to support this feature in a future version of the plugin, please send us a feature request and we will add it if there is enough demand.
Can I hide the variation descriptions?
You can modify your WooCommerce variations template to prevent the variation description from appearing under the add to cart button. Please see our guidance on how to do this.
Can I add other types of option, e.g. checkboxes, text entry boxes & multi-select dropdowns?
If the built-in WooCommerce variations aren’t flexible enough for you, then you can use WooCommerce Product Table with the official WooCommerce Product Add-Ons plugin instead. Please see our article on how to use add-on options in your product tables.