How to Create Online Food Ordering for Restaurant on WordPress

 How to Create Online Food Ordering for Restaurant on WordPress

Are you afraid of creating a food menu for a WordPress restaurant online ordering website? Well, creating a restaurant food menu for a website is not as easy as it is in graphical design. But we have a great solution on how to create online food ordering for restaurant. You can use WPCafe to create an outstanding food menu within an hour and without any technical skills. With all the required features, WP Cafe ensures the best menu design experience. Before starting the blog, why don’t you check the importance of the food menu for custom restaurant websites?

❓ What is Digital Food Menu?

The food menu is the website menu option by which a restaurant owner can show all the available foods/items on the custom restaurant website. This is the key feature where the restaurant admin can attract customers by offering the best items. A better food menu design helps maximize the conversion rate.

❓ Why do You Need a Food Menu?

If you think about taking diverse food tests then what is the step you take? Search online or ask your friend, get the idea, and hit the custom restaurant website. On the site, you look at the food menu at first look. If the menu keeps your attraction, you continue browsing. And if not, you simply move to another site. And that’s why its important to focus on how to create online food ordering for restaurant with maintaining the quality.

This is where a clear and elegant food menu becomes the most important option for a food business-related website. Trust us, if you fail to provide an eye-catching and easily readable food menu, you will lose many of your customers instantly.

❓ Why Food Menu is Important for Restaurant Websites?

It takes 10-20 seconds for a user to decide whether to continue a site or NOT! You will lose the customer if you do not capture their attention within the specified time frame. Think of it. You invest time and money to make content and do marketing, and a customer comes to your site. But he/she is gone in 20 seconds! All your efforts went to the dogs!

The restaurant menu widget is one of the key elements of a successful custom restaurant website. As the customer starts looking at the menu. So, caring about your menu means that you care about your customer. You will have a high chance of getting better conversion rates.

✳️ Plugins Needed to Build a WordPress Restaurant Online Ordering

To create an amazing restaurant menu widget on your WordPress restaurant online ordering website, you will require 2 mandatory plugins and 1 optional plugin.  WooCommerce for enabling the selling features, WPCafe and Elementor page builder.


WooCommerce is one of the prerequisite plugins for setting up an online eCommerce (food selling) website. There are other plugins, but WooCommerce gives you tons of features like online ordering, payment gateway integration, sales analytics, and many more.


WPCafe is the top food menu plugin for WordPress restaurant online ordering. According to our research, WP Cafe offers a 30-plus food menu template. It is the highest among comparable plugins on It includes a location-based pop-up, WooCommerce compatibility, single and multi-slot reservation, AJAX mini cart functionality, and many other features. This is why the rest of the tutorial will be based on WPCafe.


If you want to customize like drag and drop then install Elementor on your WordPress restaurant online ordering website. It’s not mandatory to install but with Elementor, you can use restaurant menu widgets. Also, regular widgets will help you design beautiful pages on your restaurant WordPress site.

If you are looking for a restaurant WordPress theme, we build Cafesio with 4+ home layouts with all other feature pages. The theme supports Elementor, WooCommerce, ElementsKit, and so on. Get Cafesio for your website.

🛠️ Set Up Food Menu for the Restaurant


Before adding a food menu, first please upload your food item one by one. Here are the settings key wp-admin dashboard -> products -> Add new -> Product details. You can import products together from an Excel file. It’s better if you weather all the information and then add them together. Upload all your food items and you are ready to go.

You can add your restaurant menu widget in different ways like shortcodes, Elementor, and Gutenberg block.  WP Cafe provides support for Divi and Visual Composer. Let us set them one by one.

Add Food Menu with Shortcode


In order to get the food menu shortcode, please move to the WPCafe settings, select the shortcode, and paste it into the page. WP Cafe Menu will appear on the left side of your WordPress dashboard. The setting shortcut is wp-admin->wp-cafe->available shortcodes->copy the shortcode.

Note: With WPCafe PRO you can get shortcode options for placing on multiple pages, multiple pro menu layouts, modern design, and much more.

Add Food Menu with Elementor

How to create online food ordering for restaurant and create food menu? If you want to add or edit the food menu from Elementor then first click on “edit with Elementor”. It will drive you to the Elementor edit page. On the left side under Elementor widgets, you will get WPCAFE MENU. Drag and drop any restaurant menu widget on the page and then you can edit it based on your requirement. Settings shortcut wp-admin -> edit with Elementor -> WPCAFE MENU -> Drag and Drop the menu.


Add Food Menu with Gutenberg

WPCafe’s food menu is also available in the Gutenberg block. To set the food menu, please move to the WordPress page. Then, from the top left corner, click on the plus (+) sign. Search with the word “food”, and the available block will be clear. Click on the block, and it will pop down to the page. Now, from the right-side settings menu, you can edit the food menu.


Set Food Item Category

Categorizing your menu will make it easier for customers to find similar items. WPCafe supports WooCommerce so you can set categories easily. To set categories, go to WooCommerce-> Products -> Categories from your dashboard. Then you can add a name for your category and set an order menu number which will eventually act as a restaurant order form.  Then go to WPCafe -> Available Shortcodes. Find the shortcode for ‘Show Food Menu Tab (Pro)’ and add it to your site. You can then view your food menu in different category tabs.


Set Food Serving Location

If your restaurant has multiple branches or you serve food from multiple areas, this step is for you. To add a food location and offer restaurant order forms to your customers, the first food location is under the products menu. Then add the location and related information. After that go to WPCafe and then menu setting and then allow locations. Please be aware WPCafe is multi-vendor compatible and you can download addons from here. Settings shortcut wp-admin -> products -> location -> add location and then WPCafe -> Menu Settings -> Allow locations


Set Discounts on Food Items

WPCafe already comes with a feature to add discounts on the restaurant order form for your items. From your dashboard, go to WPCafe -> Menu Settings then scroll down to Discount Options. Here you can set the percentage of discount for your menu. You can even set which specific menus or categories you want to add the discount to.


Enable Integrate Search Option

To set a search option, go to your page where you paste your shortcode for the food menu. In your short code, find “live_search” and set it equal to ‘no’. Now you will see a search bar appear on top of your food menu.


👉 Types of Food Menus

There is a multiple-style food menu available on the restaurant’s website. Here are the most common menu styles to make your restaurant order form more inviting.

  • List Style- A list-style food menu design with all food details. List items and organize them in a different order.
  • Tab Style- A tab-style restaurant food menu design in a tabular layout.
  • Category Style- The category-style food menu represents the food category.
  • Location Style- The location base food menu is for those restaurants with many branches. Sometimes a restaurant has branches in different locations.
  • Slider Style- A food menu with sliding options.
  • Tab List Style- A list-style menu having a tab in the title is a tab list-style food menu.
  • Tab Slider Menus- A slider having a tab is tab style food menu for a restaurant’s WordPress website.

🎯 Tips for Better Conversion

The restaurant business is highly competitive so you must achieve better profits! To make a profit margin from an online-based restaurant business, we bring some tips. By following these tips, your conversation rate can grow up to 200%.

Use HQ Real Image

Many restaurant owners ignore adding real images. Sometimes they use stack photos or low-quality images. Investing in HQ images is not a waste. It’s food and people test the look before testing the actual food. Always use high-quality real images for the food menu.

Offer Online Ordering

Customers become lazy sometimes. They want to get food on their door. Offer your customer online food ordering and increase sales. Besides this, you can add online reservations with the WPCafe plugin.

Don’t Avoid Marketing

Few owners think about either online marketing or offline marketing. It’s not a better approach. If you avoid social sites and search marketing, you will lose a lot of traffic. In an exactly similar way, if you avoid offline marketing, you will lose a lot of potential customers. So, keep doing marketing on both channels to attain more customers and make them fill out your restaurant order form at a satisfactory rate.

❓ Why Don’t You Try?

Due to the fast-paced world, the website is crucial to sustaining the online food business. And WP Cafe has cut off the headache of creating a food menu. Custom restaurant websites can increase your sales and online food delivery removes seating management issues for your restaurant.

So, that’s how to create online food ordering for restaurant! So, why don’t you give it a try now?

Leave a Reply