Can I add product tables within tabs, toggles or accordions?
The WooCommerce Product Table plugin works beautifully within unusual layouts such as tabs, toggles or expandable accordions.
For example:
- You might want to create an alphabetical product listing with a separate tab for each letter of the alphabet. When someone clicks on a letter, they see products tagged with that letter.
- Maybe you're creating a restaurant order system and want to add an expandable/collapsible accordion or toggle for each section of your menu. Users can click on 'Starters' to open up the 'Starters' section listing the products from that category, and so on.
How to create tabs, toggles or accordions
The vertical or horizontal tabs, toggles and accordions need to come from your theme or another plugin - they're not part of WooCommerce Product Table.
The leading all-purpose WordPress themes such as Avada and Divi come with built-in styles for tabs, accordions, etc. If your theme comes with these, then we recommend using them because they will match the overall design of your site.
Alternatively, you can use the free Shortcodes Ultimate or Tabs plugins, or a page builder like Elementor.
How to add your WooCommerce product tables
Once you've installed WooCommerce Product Table, simply add the product table shortcode within the content area of the tab, toggle or accordion.
Add a separate product table shortcode for each tab, toggle or accordion. Use the options described on this page to set each table to list different products, e.g. based on their category, tag, or a custom field or taxonomy term.