Adding product tables to the single product page
WooCommerce Product Table is designed to be used on normal WordPress pages. You can also use it on your archive and shop pages by modifying your theme templates. Some of our customers prefer to use product tables on the single product page, as an alternative way to display other products or list the current product's variations.
Most themes show the short description field towards the top of the single product template, above the add to cart button. This is a useful place to display a variations table for that product, instead of using the standard WooCommerce variation dropdowns and add to cart button. You can also add product tables to the main product description, if you prefer.
Simple products
If you're using simple products without variations, then you can easily add a product table listing other products to the short or long description fields. You can do this in the same way as adding a product table to a normal page or post.
See the rest of this knowledge base for instructions. In particular, check out the page listing all the options for choosing which products to list in the table.
Plotter Shop, SharkCrates and First Kitchens are three great examples of this in action. Each site uses WooCommerce Product Table to list a range of products from a specific category on a single product page.
Variable products
If you're using variable products, then you might want to list the current product's variations in a table on the single product page. This is an alternative to using the default variation dropdowns that appear above the add to cart button. It requires some custom coding and should only be attempted by experienced developers.
You can create the table of variations by using the variations=separate and includes options. Here's a suggested shortcode to list the variations for a specific product:
[product_table include="54150" variations="separate" columns="name,price,stock,buy" cart_button="checkbox" quantities="true" links="none" page_length="false" search_box="false" reset_button="false" totals="false"]
See this shortcode in action on this product on our demo site.
Tips on how to achieve this:
- Replace "54150" from the above shortcode with the product ID (you can find this by going to the 'Edit Product' screen and looking for the ID in the URL at the top of your browser address bar). To save having to do this manually for each product, you could also add some custom code to dynamically populate the include option with the ID of the current product. Please see our separate article with code snippets on how to do this.
- In the screenshot, a product table has been added to the short description field. The product table has its own check boxes and 'Add Selected to Cart' options, but the single product template has added its own variation fields, quantity selector and Add to Cart button underneath the short description field. You will need to hide these elements - either using CSS (code snippet here) or by modifying the single product template.
- In the example shortcode above, we have chosen some suggested settings for using product tables in this way. For example, we have used the 'checkbox' style of add to cart buttons, and hidden certain elements that aren't relevant. See shortcode options article to configure your product table in other ways.
Tip: If you're using the WooCommerce Product Options plugin, then your add-on options are compatible with both of the methods on this page. They will appear in the buy column of the product table.
Please note that our standard support does not include help with custom coding. If you don't know how to implement the tips in this article yourself, you should ask your developer or post a job on Codeable to find a WordPress expert.
Showing custom fields on the single product page
If you want to show extra product data on the single product page, then you might like our separate tutorial about this. It's about how to add custom fields to WooCommerce products and show them on the single product page.