Create a Custom Menu for a Restaurant - P1 - Use Elementor
Tags: wordpress
Published: 2020-08-11 03:02:37

The publication at [Meta Box](https://metabox.io/restaurant-custom-menu-p1-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.**

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:

1.  [WooCommerce](https://wordpress.org/plugins/woocommerce/): to create products.
2.  [Elementor](https://elementor.com/pricing/) (pro version): a [page builder plugin](https://metabox.io/wordpress-themes-for-page-builders/) 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](https://cdn-images-1.medium.com/max/600/0*JZxegZM5UhYTM-Lx.png)

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](https://metabox.io/create-wordpress-custom-post-types/) 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](https://metabox.io/what-is-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](https://gretathemes.com/best-wordpress-woocommerce-themes/) 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](https://cdn-images-1.medium.com/max/600/0*r_oZ6dGnxRfVRwmT.png)

### 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](https://cdn-images-1.medium.com/max/600/0*PLARcwjbTCWcdIUJ.png)

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](https://cdn-images-1.medium.com/max/600/0*Q8K5kyrnntcTiSyu.png)

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

![Enter lists of dishes and their corresponding prices](https://cdn-images-1.medium.com/max/600/0*ieQ3ZOTYQ_f7ebTh.png)

In the left column, I insert a widget that is in the form of [a picture gallery](https://metabox.io/display-uploaded-images-as-wordpress-image-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](https://cdn-images-1.medium.com/max/600/0*6m5kRasN60w-jRkW.png)

Drag to add pictures for dishes

![Drop to this section to insert the prices](https://cdn-images-1.medium.com/max/600/0*al0mmPcItpR7OGHz.png)

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](https://cdn-images-1.medium.com/max/600/0*i4w0OaAaSUwYItia.png)

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](https://cdn-images-1.medium.com/max/600/0*03cnlX3WkuTzzfZu.png)

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.](https://cdn-images-1.medium.com/max/600/0*b9B2dWrJUziO8OkD.png)

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](https://wordpress.org/plugins/ele-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.

### 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!