Product variations
WooCommerce Product Table fully supports variable products. There are 3 ways to display product variations in a WooCommerce table, which you can see in action on the variations page of the plugin demo. If you use WooCommerce Product Table with our other plugin, WooCommerce Quick View Pro, then there's also a fourth way for customers to select variations.
Option 1 - Display variations as dropdown lists
Choose 'Show as dropdown list' from the 'Variations' option on the plugin settings page or in the setup wizard, 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 buy column for this option to work. It only applies to WooCommerce variable products.
Example: [product_table columns="name,price,buy" 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 one variation per row from the Variations option on the plugin settings page.
Alternatively, add variations="separate" to the product table shortcode:
[product_table columns="name,price,buy" variations="separate"]
Variation name format
By default, the name column will display the product name followed by a hyphen and a list of the attributes used for each variation (e.g. "Ninja Hoodie - White, Large"), as in the above screenshot.
You can change this using the Variation name format option on the plugin settings page. The options are:
- Name + attributes
- Name only
- Attributes only
Limitations
- One variation per row 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.
- One variation per row will only work for Variable products as part of WooCommerce. If you have additional product types added by a third party plugin (e.g. variable subscription products), then these are not supported and you should use
variations="dropdown"instead.
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 a buy column then the button text will change to ‘Select options’ and will link to the single product page.
Option 4 - Select variations from a quick view lightbox
This option is only available if you use WooCommerce Product Table together with our other plugin, WooCommerce Quick View Pro. It allows you to add quick view buttons (which you can rename to anything you like) as a column in the product table. Customers can use these to select variations from a quick view lightbox.
This is an excellent option if you have a large number of variations and don't want to display them directly in the product table. The variations appear in the quick view lightbox instead of the product table, so customers can choose variations and purchase without visiting the single product page - while still keeping your product table streamlined and clutter-free.
Read documentation on how add quick view popups to your product tables.
FAQ
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.
Can I create a variations grid or matrix?
WooCommerce Product Table is designed to list variations in a table, as described above. If you'd rather list the variations for a specific product in a matrix like the below screenshot, then you need our other plugin - WooCommerce Bulk Variations.
Find out how to use WooCommerce Bulk Variations with WooCommerce Product Table.
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 buy 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 cart button 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 WooCommerce Product Options plugin instead. This lets you add many more types of product add-on, such as checkboxes, text labels, clickable images, file upload fields, text fields, and more.
Can I display variation custom fields?
Yes! WooCommerce Product Table supports custom fields which are attached to either products or individual variations. Having custom fields for individual variations is a good way to display unique information for each variation. (Remember, you can also use the variation description to display information about each variation.)
There are two ways to display variation custom fields in the product table. Choose a method depending on how you plan to use the custom field:
- Method 1: I want to create a custom field which is only used to store information about variations. (Difficulty level - Easy)
- Method 2: I want to use the same custom field to store information about variations and entire products. (Difficulty level - Developers only)
Method 1
These instructions assume that you're using Iconic's WooCommerce Custom Fields for Variations plugin, which we have tested with and recommend. If you're using a different plugin then the method will be slightly different:
- Install WooCommerce Custom Fields for Variations. Go to Products → Variation Field Groups, create the custom field, and copy the Meta ID which is generated automatically. You'll need this in step 3.
- Use the separate variations option in WooCommerce Product Table to list each variation on its own row.
- Add a product table column for each variation custom field that you want to display. Add
cf:before the Meta ID for the custom field, so if the Meta ID isiconic_cffv_15391_referencethen you should add the column ascf:iconic_cffv_15391_reference.
Method 2
If you want to use the same custom field to store information about parent products and variations then you should add the custom field directly in the database, instead of using the Iconic plugin mentioned above. This is because variation custom field plugins only add fields at the variation level, so you can't use the same field for products and variations.
This is a developer-level task, and if you don't know how to do it then we recommend posting a job on Codeable:
For example, the following product table has a custom field column called 'Field'. This is used for products and variations. Some of the variations have their own values and others have no value, so they have inherited the value for the parent product:
