The Best WordPress Restaurant Menu Plugin and How to Use It
One of the biggest problems you might face as a restaurant owner is setting up your restaurant menu in a user-friendly way. A WordPress restaurant menu plugin enables you to effectively display your menu online. It also lets you display detailed information about each dish in your menu including its name, image, description, and price.
In addition, if you want to then you can give your customers the option to place orders online. This way, you’ll get a much more attractive menu that will ultimately result in more sales, like this:
In this article, we’ll take you step-by-step through the process of displaying your dishes and beverages online – including from mobile devices – using a WordPress restaurant menu plugin. You’ll also learn how to set up online ordering, if required.
Display your foods online without an ordering system
You can create a simple menu without online ordering features by creating a custom post type. It will allow you to enter each food item as a custom post.
This way you can use a category (or taxonomy) to group different menu items. For example, you might have a category for pizzas and a separate category for pastas. You can also use a custom meta box to include the price of menu items and any additional details you want such as calorie count.
Once you have your menu items added to your website, all you have to do is create a special page template to display the different menu items on your online food menu. You can display the entire menu on a single page or create separate menus for different types of items any given menu such as appetizers, main courses, and beverages.
You can use our plugin Posts Table Pro to do this.
Step #1: Create a custom post type for your food items using Pods
Head over to Plugins → Add New and search for the free Pods plugin. Install and activate it to your WordPress website.
Next, go to Pods Admin → Add New → Create New. From the Add New Pod screen, choose Custom Post Type from the Content Type drop down list.
Enter a singular and plural label that will appear in the left sidebar of the WordPress admin. For example, you might set it to something like Menu Item or Menu Items. Click the Next Step button to proceed.
Add as many custom fields as you’d like to the custom post type using the Add Field button. For example, you can add a custom field for price, calorie count, or allergens.
Finally, go to the Advanced Options tab and scroll down till you reach the Supports section.
From the Supports section, tick the checkboxes next to the fields you’d like to include in your custom post type. For example, if you want to display an image of the food item in your menu, you should tick the Featured Image checkbox.
Click the Save Pod button to proceed.
Step #2: Create custom taxonomies for your menu items
By now, you’ve created a new custom post type for your menu items. You’ve also created custom fields to store unique information about each menu item. We also need to create custom taxonomies for grouping the menu items. This will allow us to sort and filter them in the front-end table layout.
Here’s what you need to do:
Go to Pods Admin → Add New → Create New. From the Add New Pod screen, choose Custom Taxonomy from the Content Type drop-down list.
Enter a singular and plural label for the custom taxonomy. For example, you might set it to something like Menu Item Category or Menu Item Categories. Click the Next Step button to proceed.
Go to the Advanced Options tab and scroll down till you reach the Associated Post Types section. Select the Menu Items post type you created in the previous step.
Click the Save Pod button to proceed.
Step #3: Add each food item as a new Menu Item
Now that you’ve created the Menu Item custom post type, it’s time to add each food item and beverage as a separate menu item. This is a similar process to how you would create a new WordPress post.
Here’s what you need to do:
Go to your custom post type and create a new post for each menu item that you want to showcase in your menu. Start by adding the food’s name as the menu item title.
Add a short description in the text editor. Fill out the custom fields you created in Step #1 i.e. price, calorie count, and allergens. Upload an image of the food item as a featured image.
Click the Publish button to proceed.
Repeat these steps until you’ve added all of the menu items to your WordPress website.
Step #4: Create your restaurant online menu
Now that you have all of the food items added to your WordPress website as menu items, the next step is to display them on the front-end.
Get the Posts Table Pro plugin and install it to your WordPress website. Once that’s done, head over to Settings → Posts Table Pro from the WordPress admin.
Set the Post type option to
menu_item using the drop-down menu. If you named your custom post type something else, you should see its slug in the drop-down.
Next, use the Columns option to choose which columns you’d like to include in your restaurant’s online menu. For example, you might add
image,title,content,cf:calorie_count,cf:price to show columns for featured image, the menu item’s name, description, calorie count, and price.
Finally, scroll down till you reach the Custom filters option and enter
Click the Save Changes button to proceed.
Step #5: Create a page to display your online restaurant menu
Go to Pages > Add New from the WordPress admin panel to create a new page for your restaurant menu.
[posts_table] shortcode to it. Click the Publish button and preview your restaurant menu on your site’s front-end. It should look something like this:
To make it easier for customers to browse your online menu, you might consider splitting it up into different categories. For example, you could display a separate menu for Salads, Main Courses, and Drinks on the same page.
Create relevant subheadings such as Starters, Salads, Main Courses, and Drinks for each section of your restaurant ordering menu.
Add the shortcode
[posts_table category="category-slug"] under each sub-heading to display food items from the relevant category. For instance, to display food items categorized under Salads, add the shortcode
Save the page and click the Preview button to see how it looks on the front-end.
Display your foods online with an ordering system
Here, we’ll explain how you can create an online ordering system to display your restaurant’s food items online. We’ll use a WordPress restaurant menu plugin to make things easier. For this tutorial, we’ll assume you already have:
- WooCommerce set up on your WordPress website, including payment gateways such as PayPal or Stripe.
- Food items (appetizers, main courses, desserts, and beverages) added as WooCommerce products.
Step #1: Install and activate WooCommerce Product Table
Get the WooCommerce Product Table plugin and install it on your restaurant website. You can download the plugin files and copy the license key from the order confirmation page.
Next, log in to the WordPress dashboard and navigate to Plugins → Add New → Upload. Upload the WooCommerce Product Table zip file and activate the plugin.
Go to WooCommerce → Settings → Products → Product tables and copy-paste the WordPress plugin’s license key in the License key field.
Click the Save Changes button at the bottom of the screen to continue.
Step #2: Decide which columns to display in the restaurant menu
You can configure your online menu from the same plugin settings screen (i.e. WooCommerce → Settings → Products → Product tables).
Since we’re creating a customer-facing food order form, it’s important to choose columns that’ll make it easy for them to browse the online menu and quickly find the food items they’re looking for.
For this reason, we recommend including columns for each food item’s name, price, and add to cart button in your online food menu. You can do this by adding name,short-descriptionprice to the Columns option.
You might consider displaying an image of the food item (which is taken from your product’s Featured Image in WooCommerce) and add to cart columns so that customers can easily identify an item on the menu and place their order. This also gives them an idea of what to expect. All you have to do is enter image,name,short-description,price to the Columns option.
To take it up a notch, you can also include the food item’s SKU in your restaurant menu. This makes it easier for customers to place their order by referencing the food item’s number on the restaurant menu. For example, a customer might say “I’d like a number 6 and a number 13 to go“.
The WordPress restaurant menu plugin is incredibly flexible. You can display as many (or as few) columns as you’d like, along with unlimited menu items! You can choose the column layout: here’s a complete list of available columns that you can pick from and display in your online restaurant menu.
Step #3: Create a page to display your online restaurant menu
By now you’ve successfully set up the WooCommerce Product Table plugin on your WooCommerce site and configured its settings. The next step is to create a basic, one-page food order form for your customers to place their order. In this way, the WooCommerce Product Table will work as both a WordPress restaurant menu plugin and a food order form.
From your WordPress admin, head over to Pages → Add New to create a new page for your online restaurant menu. Here’s what a typical user flow would look like:
- Your customers will start by browsing the online restaurant menu.
- Customers will use the one-page order form to select food items, set quantities, and (optionally) select variations or add-ons.
- They’ll add the selected food items to the cart to place their order.
How to create a food and drink menu
Here’s what you need to do to set up the online restaurant menu using the WordPress restaurant menu plugin:
- Give the new page a suitable title. For example, something like The Restaurant Menu.
- Add introductory text in the text editor which will be displayed above the online restaurant menu. You can use this space to welcome customers, add a tagline, or provide instructions on how to use the one-page order form.
- Create relevant subheadings such as Starters, Salads, Main Courses, Desserts, and Beverages for each section of your restaurant ordering menu. Alternatively, you can choose to have a single menu instead of splitting it up into different categories.
- Add the shortcode
[product_table category="category-slug"]under each sub-heading to display food items from the relevant category. For instance, to display food items categorized under Starters, add the shortcode
- Save the page and click the Preview button to see how it looks on the front-end.
- Add any extra text, and if using an SEO plugin, a meta description. This will help with your restaurant site’s search engine visibility, as you can optimize your menu page!
Note that your online menu might look slightly different depending on the theme you’re using. WooCommerce Product Table is automatically responsive, so this will work out of the box on mobile devices and tablets too.
Check out our in-depth tutorial on how to Create a WooCommerce Restaurant Ordering System to Order Food Online for step-by-step instructions.
Benefits of using a searchable table for your online restaurant menu
By adding a searchable product table to your online restaurant menu and ordering system, you can make it as fast as possible for customers to select food items and place an order.
Instant search box
You can make it easier for your customers to quickly find their favorite dishes and place an order by creating a searchable online menu for your restaurant. This is especially useful for regular customers who know what they want to order.
An instant search box also lets customers search for dishes by ingredients e.g. dishes with mushrooms. This lets them quickly view all of the dishes they’re interested in eating. For example, a search for ‘avocado’ would show search results for all available dishes with avocado.
Multiple columns of information about each food
You can use the WordPress restaurant menu plugin to add multiple columns related to each food item. This lets you display information such as ingredients, calorie count, or allergens in the online menu.
Since the information will be displayed in the online menu, customers can search for it or sort by the columns you decide to include. For example, health-conscious consumers might want to sort the menu by calorie count.
You can also create categories or tags for additional information you want to include in the online menu.
For example, you might have categories for Vegetarian, Vegan, and Gluten-free options. This way, customers can sort columns or filter the product table to quickly find the dishes they’re interested in. You can allow customers to click on a category to view all food items in that specific category.
Bonus: Make it easy for customers to find dishes
Both Posts Table Pro and WooCommerce Product Table gives you several options to make it easier for customers to find dishes. These settings are available in the same plugin settings screen.
You can enable customers to quickly find the food item they’re looking for by setting the Search box option to position the product search box either above or below the restaurant menu.
Another way to let customers quickly find specific types of dishes is by adding filters and filter widgets based on food categories or tags. This can be done by setting the Product filters option to Custom and then add categories,tags to the Custom filters option.
Get the WordPress restaurant menu plugin today
Setting up an online menu and food ordering system for your WordPress restaurant website doesn’t have to be difficult.
The Posts Table Pro plugin works as a robust WordPress restaurant menu plugin enabling you to create a searchable, sortable, and filterable online menu for your restaurant.
And if you’re looking for a way to create an online menu with ordering capabilities then WooCommerce Product Table is the plugin for you.
This makes it easy for your customers to easily find the dish they’re looking for and quickly place their orders.
Do you have any questions about how to set up a WordPress restaurant menu on your website? Let us know by commenting below.