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
Choose ‘Show as dropdown list’ from the ‘Variations’ option on the plugin settings page, or add
variations="dropdown" directly 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 and the add to cart button will link to the single product page.
Option 2 – List each variation on its own row
To list each variation on a separate row, choose ‘Show as separate rows (1 per variation)’ from the ‘Variations’ option on the plugin settings page, or 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.
WooCommerce Product Table
Display the product variations on your site today!GET THE PLUGIN
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 neatly as dropdown lists, then we’d recommend installing our WooCommerce Quick View Pro plugin. You can then replace the add to cart column in the product table with a
quick-view column. (You can rename the quick view buttons to anything you like, e.g. ‘Select Options’.) Customers can view and select variations from the quick view lightbox instead of directly in the product table. This means that space will no longer be a problem.
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 the variation description will appear in the ‘description’ column if you have added this column to your product table. If a variation does not have its own description then the overall product description will appear instead.
Can I hide the variation descriptions?
If you’re using variation dropdowns, then 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.
If you’re using separate variations, then you can hide the variation description simply by not including a ‘description’ column in the product table.
Can I set default variations?
The variation dropdowns option in WooCommerce Product Table fully supports default variations. Simply set ‘Default Form Values’ for each product, and they will be pre-selected in the variation dropdowns within the product table.
Default variations are not applicable if you’re listing each variation on a separate row in the table.
Can I hide specific variations from the table?
The only way to remove certain variations from the product table is to disable the variations that you wish to hide. This will hide them throughout your store, not just in the product table.
Alternatively, you could create separate products with the different variations that you want to display. For example, let’s say that you have a T-shirt that is available in Small, Medium and Large; with each size available in Red and Blue. If you want to create a product table listing the Red variations only, then you would need to create 2 products – ‘Red T-shirt’ and ‘Blue T-shirt’ – each with the 3 size variations. You can then use the include option to list the variations for the Red T-shirt only.
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.
Can I display variation custom fields?
WooCommerce Product Table only supports custom fields for products, and not custom fields that are attached to individual variations. WooCommerce itself doesn’t support variation custom fields, and you can only add these as a customization.
If you’re using the separate variations option and wish to display different information about each variation, then we recommend using one of these options instead of adding custom fields to individual variations:
- You can add as many product attributes as you like, and display these as columns in the table. Each variation will display its individual attributes.
- The description column will display the individual variation description, and not the wider product description.
These options allow you to display unique information for each variation and are a good alternative to variation custom fields.