1. Home
  2. Knowledge Base
  3. WooCommerce Product Table
  4. Product Table Shortcode Options
  5. Product variations

Product variations

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

Add 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.

Example: [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.

Please note: this 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 variations="dropdown" instead.

Example: [product_table columns="name,price,add-to-cart" variations="separate"]

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.

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.

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.

Was this article helpful?

Related Articles