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 variation options.
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.
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).
For example, First Kitchens use WooCommerce Product Table to list products from a specific category on the single product page. These are actual products rather than variations. You can read more about this in our plugin showcase.
If you’re using variable products, then you might want to list the variations in a table on the single product page, instead of using the default variation dropdowns that appear above the add to cart button. This requires some custom coding and should only be attempted by experienced developers.
[product_table include="54150" variations="separate" columns="name,price,stock,add-to-cart" cart_button="checkbox" show_quantity="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.
- 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 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 Add-Ons plugin (instructions here), then your add-on options are compatible with both of the methods on this page. They will appear in the add to cart 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. Alternatively, please contact us to request a quote from our customisations service.
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.