Create a Custom Menu for a Restaurant - P1 - Use Elementor

How to create a food menu which changes every week so that the restaurant owner doesn’t have to hire a developer to edit it periodically? There’s an only way to do it, that’s creating a feature that allows the restaurant owner to choose dishes then displays them on the menu automatically.

Table of Contents hide

1. Step 1: Create Dishes on the Website
2. Step 2: Create the Menu Page
3. Step 3: Create a Template for the Menu Page and Display Dishes
4. Last Words

To create a custom menu that can change whenever you need, let’s create each dish as a product, then display them on the menu page.

Whether your menu is beautiful or not will depend on your theme or design that you’re using. In this article, I’m using a free theme that is Di Restaurant. Besides, I also use these plugins:

WooCommerce: to create products.
Elementor (pro version): a page builder plugin to create template and display products easily without coding.

Step 1: Create Dishes on the Website

After installing and activating WooCommerce, the Products section will appear in the admin panel.

Then, go to Products > Add New to add each product containing information about your dishes.

Create dishes as products to display them on the custom menu of the restaurant

For example, I created a lot of dishes which are in types of desert, drink, main dish, …

Remark:

If you don’t want to use WooCommerce, you can create a new custom post type for dishes and each dish is a post. To display the price and other special information about a dish, you can create custom fields using the Meta Box plugin. But notice that if using this way, you’ll have to do more manipulations in step 3 (which is displaying dishes).

Step 2: Create the Menu Page

This step is quite easy, just like creating a normal page.

First, go to Pages > Add New then enter information for this page.

This time, you should create a beautiful template that makes your menu more attractive. I’ll use the drag and drop interface from Elemementor. Besides, Elementor also supports displaying WooCommerce products. It’s very convenient and I don’t need to code so much.

After installing Elementor, the Edit with Elementor button will appear in the page’s editing section. Click this button to go to the drag-and-drop UI to design a template for your site.

Create a custom menu with the Elementor plugin

Step 3: Create a Template for the Menu Page and Display Dishes

You can display the menu in whatever way you want as long as it’s beautiful. For example, I create a demo template as the picture below using Elementor (to do it quicker).

My custom menu's template

In the page editing section using Elementor (mentioned in step 2), I drag the Inner Section widget to the content section of the menu page.

I drag the Inner Section widget to the content section of the menu page

This time, there’re 2 columns to add content as follows:

Enter lists of dishes and their corresponding prices

In the left column, I insert a widget that is in the form of a picture gallery to add the dishes’ pictures. In the right column, I insert the list of dishes along with their prices.

Then, I drag widgets as Gallery and Products into the desired positions.

You can drag and drop the Gallery widget to the desired sections — Drag to add pictures for dishes

Drop to this section to insert the prices — Drag to add the dishes' prices

In the Gallery widget, let’s upload suitable pictures for the group of dishes that you’re editing. Then, adjust the parameters so that the picture is displayed well. It won’t be auto-imported from the product pictures, so you must upload them by yourself. These pictures won’t change unless you manually upload another.

Add the picture for the group of dishes

In the Products widget, you must adjust settings as follows: In the Source section, choose Manual Selection to allow users to pick whatever dish to display in this area.

Set up to display choosen dishes on this section

Next, enter the dish’s name that you want to find into the Search & Select section. Then, a list of relevant results will appear. You just need to choose the dish that you want.

Let's choose the dish that you want.

You can do the same with other dish groups to complete your menu.

Afterward, the restaurant owner just needs to go to this section, click on blocks that contain lists of dishes then choose the desired dishes from the Search & Select section.

Note:

I mentioned in step 1 that you can create dishes in the form of posts of a new custom post type. If using this way, in this step, you have to code manually or use Elementor Custom Skin (free) to change the default layout of the Elementor widget and display the custom fields’ values (extra information about dishes such as the price). In my opinion, this way is relatively complex but you may want to choose it to challenge yourself.

If you want to have a more attractive look for your menu, you can learn how to add icons to custom fields with Meta Box.

Last Words

So you’ve finished creating a custom menu with a simple template that can customize the list of dishes whenever you want without re-coding. If you don’t use Elementor, let’s keep track of my upcoming tutorial to try another way using Gutenberg.

Hopefully, you can apply this way to create websites for you and your customers. If you have other ideas, let’s share with us by leaving a comment below!