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 options or variations. This requires some custom coding and should only be attempted by experienced developers.
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.
Adding product tables to the product short description
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.
Here’s a suggested shortcode to list the variations for a specific product:
[product_table columns="name,price,add-to-cart" add-to-cart="checkbox" variations="separate" show_quantity="true" links="none" cf="label:123" display_page_length="false" display_search_box="false" display_reset_button="false" display_totals="false"]
- 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.
- You need to tell the product table to display variations for a specific product only. In the above example, we have done this by creating a custom field called ‘Label’ (you can do this using Advanced Custom Fields). We added a value of ‘123’ to the label custom field for this product and configured the product table shortcode to only show products with this custom field value. If you don’t want to use a custom field for this, you can read about the other options for displaying specific products here.
- 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 section of this knowledge base to configure your product table in other ways.
Adding product tables to the main product description
Another option is to display product tables within the main product description.
Again, you may need to modify the single product template to remove the default add to cart button, so that the only add to cart buttons are within the product table.