Creating an online restaurant menu on your website will help your restaurant make a good impression on diners and increase your chances of ordering online. In today’s article, Hawk will show you how to create a beautiful restaurant menu on your WordPress website with the support of 2 plugins, Food Menu and WooCommerce Food – Restaurant Menu & Food ordering. Let’s find out together!
(**) Before you start creating your online restaurant menu, you will need to set up a WordPress website for your restaurant/diner. If you still don’t know where to start, you can read our shares below to gain more experience in building an effective restaurant website:
Method 1: Design a restaurant menu on your WordPress website with Food Menu
Food Menu – Restaurant Menu & Online Ordering is a free plugin that allows you to quickly create restaurant menus on your WordPress website. In addition, this plugin integrates very well with WooCommerce so it can support online ordering easily.
The detailed steps are as follows:
Step 1: Install and activate the Food Menu plugin.
If you are not sure how to do this, you can check out the plugin installation guide for beginners.
Step 2: After successful activation, at the website admin page, select Food Menu -> Add Food.
The system will display an editor page, allowing you to enter a name, add a description, image, price, etc. for the dish.
After making the changes, click the “Publish” to save the dish on your menu.
If you want to add more dishes to the restaurant menu, you just need to repeat the steps in step 2.
Step 3: After you have finished adding the dishes, select the item Food Menu -> ShortCode Generatorand then click the “Add New” to create a new restaurant menu on a WordPress website.
Step 4: The system will switch to the “Add New Post” page. Here, you can title your shortcode and make customizations about the layout, the number of dishes displayed on the menu, and more.
Here, we will keep the default settings. However, you can also adjust the appearance of the menu through the tabs:
- Tab Layout: Allows you to adjust menu layout, number of columns displayed (on desktop, tablet or mobile), image size.
- Filtering tab: Allows you to filter dishes by categories, limit the number of dishes displayed, sort dishes in ascending/descending price order, etc.
- Field Selection tab: Allows you to optionally display fields such as: dish name, image, price, description.
- Styles Tab: Allows you to edit elements related to the menu interface such as: color of content fields, font size, ….
When you have finished editing, you can review the menu visually in the “Layout Preview” at the bottom of the page. Then click the “Publish” (located in the upper right corner of the screen) to complete the restaurant menu creation.
Note, the “Publish” shortcode does not make the menu appear on your website. This will only save the shortcode for use in the next step.
Step 5: Create a new page where your menu will show up. To do this, on the admin page, select the item Pages -> Add New.
After doing the above, you will be taken to the editor to customize and title your page. Click the “+” icon to add a new content block. Next, type in the search bar the phrase “Food Menu”, then select the block “Food Menu”.
In the Block customization area on the right side of the page, select the name of the menu you just created in the shortcode drop-down.
After adding the menu to the page, click the “Publish” to create a menu page for the website.
In addition, if you want, you can also edit and add social sharing buttons, contact form, etc. on the page before publishing.
Now, when customers visit your website, they can see your online menu with all the dishes and prices. Even if integrated with WooCommerce, diners can even order online.
Here is the displayed menu result after you have completed the setup operations:
Method 2: Design a restaurant menu on your WordPress website with WooCommerce Food – Restaurant Menu & Food ordering
WooCommerce Food – Restaurant Menu & Food ordering is an extremely powerful WooCommerce plugin, developed by Ex-Themes. Currently, you can purchase this plugin on Codecanyon for $46 for a Regular License.
The design intent of WooCommerce Food was to create vibrant restaurant menus and build an easy, seamless online food ordering process. However, within the framework of this article, we will only stop at instructing how to create a restaurant menu with WooCommerce Food. As for the issues related to ordering food online, integrating payment gateways, etc., the Hawk will see you in another article.
Now, let’s start creating a restaurant menu with the following detailed instructions!
Step 1: Since WooCommerce Food is an add-on plugin for Woocommerce, to use this restaurant menu creation plugin, you need to install and activate the plugin first. Woocommerce. Installation is similar to other plugins.
Step 2: Install and activate the WooCommerce Food plugin.
Step 3: On the website admin page, select Products -> All Products to create a list of dishes for the restaurant.
After this, you will be taken to the Products page. Here, you will have 2 options:
- Press the button “Create Product” if you want to manually enter each dish in turn.
- Press the button “Start Import” if you want to upload a CSV file with a list of many dishes at the same time. In case you don’t have a list of the restaurant’s dishes, you can download the sample data file here and Import files to WordPress website.
After importing the data file, you will get a list of dishes with detailed information as shown below:
Step 4: On the WordPress admin page, select Products -> Categories to create a new restaurant menu. Then, you can name, add description, edit thumbnail images, etc. for the menu as you like.
Step 5: To add new dishes to the menu, in the WordPress admin page, select Products -> Add New.
After doing this, the system will automatically switch to the “Add New Product” page. You can add new dishes to the menu by clicking on the appropriate Category.
(**) In addition, here, you can also customize a lot of factors related to the dish such as: price, nutritional composition of the food (protein, fat, cholesterol, fiber, …) , photos of dishes, more preferential prices, ….
Step 6: Arrive Woocommerce Food demo page, select the type of restaurant menu you want to use. Then copy the shortcode on the page.
For example, if you want to use the Menu Filter Style 2 layout, you need to copy the shortcode: [ex_wf_grid column=”4″ count=”99″ posts_per_page=”8″ page_navi=”loadmore” menu_filter=”show” enable_search=”yes”]
See the illustration below:
Step 7: At the WordPress admin page, select Pages -> Add New. Then paste the shortcode and click on the “Publish” to create a new menu page for the restaurant.
Once completed, you will get a restaurant menu page with the following interface:
By the end of the detailed tutorial above, hopefully you already know how to quickly create a restaurant menu on your WordPress website. Good luck!
Next, what would you like us to write about? What WordPress problems are still troubling you? Don’t hesitate to “speak your mind” in the comments section below!