Using Product Tables with WooCommerce Product Add-Ons
WooCommerce Product Table is designed to integrate with the official WooCommerce Product Add-Ons extension. It’s useful if you want to show extra options in your product tables, in addition to what’s possible with variable products. For example, you can use add-ons to add checkboxes, radio buttons, dropdown lists similar to the variation dropdowns, and text input boxes.
Note: WooCommerce Product Table and WooCommerce Product Add-Ons are two separate WordPress plugins. You will need to purchase both in order to use the features described on this page. If you don’t want to buy the Add-Ons plugin, then you can add extra options to your product tables using WooCommerce product variations instead.
Which add-on field types can I use in my product tables?
You can display the following add-on types in the add to cart column of WooCommerce Product Table:
- Multiple choice – customers can choose options from either a dropdown list or radio buttons.
- Checkboxes – 1 or more checkboxes that customers can tick to choose extra options.
- Short text – text entry field where users can write multiple lines of text (you can add a character limit). Useful if you’re selling gift products and want to allow customers to add a custom gift message for the tag (for extra cost); or if you’re selling food online and need a way for customers to make special requests to their dish.
- Long text – paragraph-sized text input field where users can write multiple lines of text (you can add a character limit)
- File Upload – allows the customer to upload a file which is then sent through to the administrator in the order confirmation email (note: there are some limitations, see below).
- Name Your Price – adds a field where the customer can choose what they wish to pay for the product. (Useful for taking tips in a restaurant, or charity donations.)
- Quantity – adds a quantity field. This option is useful for allowing the customer to choose a quantity of additional items that they will receive as well as the main product. It doesn’t affect or replace the quantity picker for the main product, which is provided by WooCommerce itself. For example, a Quantity add-on is useful if you’re selling a sofa product and want customers to be able to choose how many cushions to add to their order, at additional cost. You can set the cost of each extra item ordered using the Quantity field, and set a minimum/maximum quantity.
- Heading – this option isn’t strictly an add-on. It simply lets you add extra headings between your add-ons. Useful if you’re adding large numbers of add-ons to a particular product.
It works with individual add-ons added directly to specific products, and global add-ons that you add centrally and automatically appear for all products.
How to use Product Tables with WooCommerce Product Add-Ons
- Install WooCommerce Product Add-Ons WP plugin and use the documentation to set up add-ons for any or all of your products.
- Install WooCommerce Product Table and follow the instructions to add a product table. You must include an add to cart column.
- View the page with your product table. You will see the add-ons appear in the add to cart column.
- If you’d like to make any changes to the layout of the add-ons in the table, you can do this on the plugin settings page (instructions below).
The Woo Product Table plugin settings page (WooCommerce → Settings → Products → Product Tables) comes with 2 options for controlling the display of your add-ons.
Add-on groups layout
This option controls whether the add-on groups are listed horizontally or vertically in the table. For example, a pizza restaurant might have add-on groups for ‘Crust upgrades’ and ‘Extra Toppings’, each with several add-on options. You can choose whether the overall groups are listed on the same row (depending on the amount of space available in the table), or whether a new group will always appear on its own row.
Note: If you’re using variable products displayed as dropdowns in the table, then each variation dropdown is treated as a separate ‘Group’. You might want to use the ‘horizontal’ option for this setting, otherwise each variation dropdown will be listed on a separate line, which will take up more space.
Add-on options layout
This option controls whether the individual add-on options (e.g. checkboxes and radio buttons) are listed on horizontally on the same row (where space is available in the table), or vertically with 1 row per option.
Do the add-ons work with product variations?
Yes, you can create add-ons for variable products and display all the options together in the product table.
If you’re displaying product variations as dropdown lists in the table, then you can use them in addition to product add-ons.
WooCommerce Product Table also has an option to list variations on separate rows. Due to the way that Product Add-Ons is coded, the add-ons aren’t fully compatible with the separate variations option. Some of our customers have found that they can successfully use add-ons with separate variations if they are added directly to each product – global add-ons will not appear for separate variations in the product table. However, we don’t officially support this because add-ons aren’t really designed to work with individual variations in this way.
Here are examples of both ways of displaying variations with add-ons:
While the plugins work beautifully together, there are a couple of limitations with the less popular add-on types.
File Upload add-on
You can use the product table with the Field Upload add-on type, however this will only work if you disable AJAX cart and add to cart checkboxes. Instead, you can use non-AJAX cart and the standard add to cart buttons.
Alternatively, if you display your add-ons within a quick view lightbox instead of directly in the table, then customers can upload files from the quick view window without any problems.
Multiple choice ‘image select’ option
When you add a multiple choice add-on, there’s an option for customers to click on images in order to make their selections. Unfortunately this doesn’t work within the product table, so we recommend using one of the other multiple choice options instead. (The other multiple choice options are dropdown or radio button.)
My add-ons look messy in the table
If the add-ons look messy in the table, please experiment with different combinations of the settings. There are many different ways that you can use and combine product add-ons. Some combinations look good with horizontal layouts, some look good with vertical layouts, and some work best with a mixture of the two. We recommend using trial and error to find the best combination of settings for the add-ons in your table.
We’ve coded WooCommerce Product Table to handle as many add-ons as possible and to ensure that the layout looks neat at all times. However, some WC stores simply have too many product options to sensible fit into a table layout.
If this applies to you, then we recommend using WooCommerce Product Table and Product Add-Ons with our other plugin, WooCommerce Quick View Pro. This lets you remove the add to cart column from the product table and display quick view buttons instead. Customers can click on the quick view buttons and view the add-ons and add to cart options in a lightbox, instead of directly in the table. That way, you can sell as many add-ons as you like without having to fit them into the table layout.
My add-ons are just showing – the Add to Cart button just says ‘Read More’
This happens if you have created add-ons for the product, but haven’t entered a Regular Price for the product. The add-ons will only show in the table if the product has a price in the ‘General’ tab of the ‘Product Data’ section of the Add/Edit Product screen. If you don’t want to add a base price, then you can add it as 0.00 and the add-ons will appear in the table.
Messages from the Text add-on aren’t being passed through to the cart
This can happen if you don’t include a label for the Text or Textarea add-on. Make sure you add a label to describe the add-on field.
Does it work with other Product Add-Ons plugins?
WooCommerce Product Table is only designed to work with the official Add-Ons plugin available at woocommerce.com. We’ve done a lot of work to integrate the two plugins, and it wouldn’t be realistic for us to integrate with other similar plugins such as TM Extra Product Options or YITH Product Add-Ons.
Quite a few people ask us whether they can use WooCommerce Product Table with TM Extra Product Options. The author of TM Extra Product Options previously tried to integrate the two plugins and discovered that it wasn’t realistic because of the way they are coded. However, he has integrated with our other plugin – WooCommerce Quick View Pro. If you’d like to use TM Extra Product Options with product tables, then we therefore recommend doing it like this:
- Install our WooCommerce Quick View Pro plugin.
- Set up WooCommerce Product Table as usual but instead of having an add to cart column, include a
quick-viewcolumn in the table.
- Customers can click on the quick view buttons to view more information in a lightbox. The extra product options will appear correctly in the lightbox, so customers can select them and add to the cart from the lightbox. This is a nice way to avoid the fact that the extra options don’t work within the add to cart column of the product table.
If you would like customers to be able to select extra options directly from the add to cart column of the product table, then the only option is to a plugin that we have specifically integrated with. We recommend the official WooCommerce Product Add-Ons extension, which we guarantee compatibility with.
If you successfully test WooCommerce Product Table with any other add-ons plugins, please let us know. We’d love to share this information with our other customers.