How to add product tables within tabs, toggles or accordions
The WooCommerce Product Table plugin works beautifully within fancy 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, page builder 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 Gutenberg block or shortcode within the content area of the tab, toggle or accordion.
Add a separate product table to each tab, toggle or accordion, each displaying different products (e.g. based on their category, tag, or a custom field or taxonomy term).