One of the biggest problems you might face as a restaurant owner is showcasing your food menu in a user-friendly way. A WordPress restaurant menu plugin enables you to effectively display your menu online - and ideally take online orders too.
When someone wants to visit a restaurant, they often check out the menu online beforehand. And in our new world of lockdowns and social distancing, many restaurants are rushing to set up online ordering so that people can actually order from the menu on their smartphones.
Of course, you can just add a page to your website manually listing the foods from your menu. However, this won't look professional, your customers can't interact with it, and it's a pain to maintain.
The solution - the best WordPress restaurant menu plugin
The solution is to install a good restaurant menu plugin on your WordPress website. This will display detailed information about each dish in your menu including its name, image, description, and price.
The menu might list your food items for information purposes only. Alternatively, it might include 'Add to order' buttons so that hungry customers can select items from the restaurant menu and order online. They can then have their food delivered, collect it in person, or use their mobile to order from the table while eating in.
This way, you’ll get a much more attractive menu that will ultimately result in more sales, like this:
Or if you just want to publish your restaurant menu without online ordering, then it might look 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. We'll discover two different ways to set it up:
- Use a WordPress restaurant menu plugin to take food orders online.
- Publish your restaurant menu online for information only (no online ordering only).
Display your foods online with an ordering system
First, 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 Restaurant Ordering
Get the WooCommerce Restaurant Ordering plugin and install it on your restaurant website:
- Download the plugin files and copy the license key straight away from the order confirmation page.
- Next, log in to the WordPress dashboard and navigate to Plugins → Add New → Upload. Upload the WooCommerce Restaurant Ordering zip file and activate the plugin.
- Go to WooCommerce → Settings → Products → Product tables and 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 online restaurant menu
You can configure your online menu from the same plugin settings screen (i.e. WooCommerce → Settings → Restaurant).
Think about what information you want to display about the food items from your restaurant menu. This should generally be the same information that you include on your printed menus. You can choose from the item name, description (which could be a brief summary of the dish, or factual information about allergens or ingredients), and price.
You might also consider displaying an image of the food item (which is taken from your product's Featured Image in WooCommerce) so that customers can easily identify an item on the menu. This also gives them an idea of what to expect.
Also select the best layout for your restaurant menu. Choose the number of columns, and whether you want to show extra information about each item in a lightbox or allow ordering directly from the restaurant menu page.
The WordPress restaurant menu plugin is incredibly flexible. You can display whatever information you'd like, along with unlimited menu items and categories!
Step #3: View your restaurant menu page
While you were following steps 1 and 2, your WordPress restaurant menu plugin was working hard behind the scenes! To prove it, go to the main list of Pages in the WordPress admin and find a new page called 'Restaurant Ordering'. The plugin has created this for you automatically.
Your default restaurant ordering page will list all the categories that you selected on the plugin settings page. The food items will appear under each category name and description.
Now, you can finish off your restaurant menu page in any way you like:
- Rename this page, e.g. to 'Our Restaurant Menu - Order Online'.
- Add it to the navigation menu on your WordPress website.
- Use the options in your WordPress theme to add a sidebar to the page. Then go to Appearance → Widgets and add the 'Cart' widget to the sidebar. That way, customers can see the contents of their order as soon as they start selecting foods.
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.
How to create multiple food and drink menus
So far, you've learned how to install a WordPress restaurant menu plugin where all the food items are listed on the same page.
If you need more flexibility, then you can create more menus using the restaurant ordering shortcode. This lets you add unlimited menus anywhere on your site. Each one can be different, and will list the foods from one or more of your menu categories.
Check out our in-depth tutorial on how to Create a WooCommerce Restaurant Ordering System to Order Food Online for step-by-step instructions.
How it works
Once you've launched your WooCommerce restaurant menu with online ordering, this is what a typical user flow would look like:
- Your customers will start by browsing the online restaurant menu.
- They will use the one-page order form to select food items, set quantities, and (optionally) select variations or add-ons from a lightbox popup.
- They’ll add the selected food items to the cart to place their order.
Depending on how you set up WooCommerce, your customers can pay online or submit their order to pay in person when they receive their food. They can also choose delivery or collection, or you can let them choose an exact Delivery Slot. You'll find instructions for all these extra features in the WooCommerce Restaurant Ordering plugin documentation.
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.
Display your food menu online without an ordering system
You can create a simple menu without online ordering features by creating a custom post type adding each food item. You will then use the Posts Table Pro plugin to list the foods in a restaurant menu, just like this:
This way you can use a category 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.
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 on 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 dropdown 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.
Get the best WordPress restaurant menu plugin today
As you can see, it's surprisingly easy to add an online menu and food ordering system to your WordPress restaurant website.
- If you're looking for a way to create an online menu with ordering capabilities then WooCommerce Restaurant Ordering is the plugin for you.
- Alternatively, 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 (without online ordering).
Both plugins come with a no risk 30-day money back guarantee. Choose a restaurant plugin depending on whether or not you need online ordering, and set it up today!
Do you have any questions about the best WordPress restaurant menu plugin to use for your website? Get in touch by commenting below.