1. WooCommerce Restaurant Ordering
  2. Advanced

Creating your own tabbed layout for your food order system

The simplest way to add tabs to a food order form in the WooCommerce Restaurant Ordering plugin is to enable the navigation links. These add simple jump links to each category.

If you would like more control over your tabbed layout, then you can achieve this by creating your own layout. To do this, you need to use a page builder plugin (or similar) to create a layout consisting of tabs, toggles or accordions in whatever style you require:

WooCommerce Restaurant Ordering tabbed layout tabs
Example of a restaurant ordering system added within vertical tabs using the free 'Tabs' plugin

To create tabs and other special layouts, you can use any WordPress page builder such as Gutenberg, Elementor, Divi, Beaver Builder or Visual Composer. If you're not using a page builder, then your theme might have suitable layouts built-in, or you can install the free Tabs plugin, which you can see in action on our demo page.

Whichever method you use to add the tabbed layout, you can use the WooCommerce Restaurant Ordering shortcode to list different foods within the tabs. Use the categories option to specify which foods to include in each tab.

Related Articles

If searching the knowledge base hasn't answered your question, please contact support.