Ever wonder, what makes the restaurant business rise over online? How do people know all the food items and prices of a restaurant before even visiting it? Almost 70% of people nowadays order food online. Well, it is the food menu that is interactively showcased online. People know every product info over the phone or their tab or even during their office time.
If you offer a PDF menu link on your restaurant website, there is a chance your customers may find it clumsy to download that menu. PDFs are far more difficult to alter and upload when you need to make any menu or price adjustments. So without further ado, let us make a food menu for your WordPress website. You can provide visitors and potential customers with a better experience by adding a restaurant food menu page to your WordPress site.
I’ll walk through how to add a restaurant food menu in WordPress website step by step in this post.
No hassle of design and coding to develop a food menu. You need a WordPress plugin to display your food menu on the website. I will use the Food Menu Pro – Restaurant Menu & Online Ordering for WooCommerce plugin by Radiustheme. If you need restaurants theme, Here is the list of best restaurant WordPress theme.
How to add the Food menu plugin in WordPress?
The food menu plugin can be downloaded free from WordPress.org, and the pro version is available on the RadiusTheme website. If you purchase the plugin, download the .zip file of the Food menu pro from Radius Theme invoice mail. Click Add New on WordPress Dashboard, upload the .zip file and install it. Activate the Pro plugin and get your plugin on the list.
What are the features does Food Menu pro offer?
This plugin includes 11 layouts with grid, isotope, and slider versions to provide more possibilities as a wonderful menu. All 11 layouts are responsive and mobile-friendly, making them suitable for any device. However, with the Food Menu Pro, you may display them in various ways, including categories and WooCommerce layouts. You may display all food items in pages and posts, multiple or single categories, and add a detail page pop up. It supports multiple paginations, page creation, WooCommerce, translation, and many other features, making it an amazing food menu plugin. Finally, you can create shortcodes, customize them using CSS, and configure them by filtering, choosing fields, and personalizing the food menu. It is one of the best restaurant menu WordPress plugin.
How to set the plugin settings manually?
First, you will check the settings menu and navigate WordPress admin menu => Food Menu => Settings => General
Under the general setting, you can set currency and its position, Place and separate decimal into hundreds or thousandth places.
Then go to Detail page settings. Here you can hide many options for your food menu. See the lists above.
Now you have only other settings left, where you can add custom CSS to master the plugin’s style.
After settings are done, you can have the option to buy a compatible theme for this plugin.
How to add a category to the Food Menu?
You need to add the category first. Only then you can add the food menu.
Select a category from the food menu plugin, give a name to the category, add a slug name, and click a new category. Well, you have just created a category. You can see the category name there.
Add Ingredients, Nutrition, Tags and Unit details.
You may change the units and tags and add new Ingredients and Nutrition information to your menu items or existing ones. You may drag and drop this information in!
How to create a food menu?
Go to the food menu and click all foods. You will find all the food names here. Click add food and then give a title to your food. Also, add details about your food menu and mention your food price. You can set food category type and then add regular prices for the regular item and offer sale prices for special food items. Then set stock availability for your food item.
You can add a short detail in the excerpt section. Select your food category and tags and set a preview image for the food.
Set the food Ingredients
Adding ingredients to the food menu makes it more informative and exclusive to your audience. You can mention food weight amounts in grams, kgs.
Set the nutrition information
Adding nutrition information gives value to your food menu. Your audience will be delighted to decide which food to order based on the calorie levels.
Advanced tab
Under the advanced tab, you can enable or disable reviews, nutrition and ingredients options.
Generate Food Menu Shortcode
You need to create a shortcode to display your food menu on your menu page. Go to the food menu plugin and click the shortcode tab to create Shortcode.
Then click add new. You will set the layout to display your food menu first. You can see the layout preview below.
At first, you need to configure the General Settings:
- Layout: Choose from the Layout Grid View, Isotope, and Carousel options.
- Desktop Column: You may choose how many columns per row to display in Desktop View.
- Tab Column: In Tab/iPad View, you may choose how many columns to display each row.
- Mobile Column: In Mobile Device View, you may choose how many columns to display each row.
- Pagination: If you wish to show pagination, check this box.
- Display Per Page: Set the number of items on each page.
- Pagination Type: There are four different sorts of paginations. Choose the one you want.
- Image Size: Choose an image size or enter a custom size.
- Image Shape: Choose between a square picture and a rounded image.
- Excerpt Limit: Decide how many characters you’d like to see.
- Read More Button Text: Mention the text you want to display
- Margin: Set the margin to the Bootstrap default of 30 px or leave it blank.
- Grid Style: Display grid style in Even or Masonry format
- Detail Page Link: Check this box to enable the popup detail page.
- Default image: You can set a default image to feature. If there is no featured image set, this image will display by default.
Filtering tab
- Exclude: You can use the ID to exclude a specific food item.
- Limit: You may choose the limit for how many to show.
- Categories: You have the option of selecting a specific category (s)
- Order By: You can set order according to Menu Order, Name, Date, Price and Random.
- Order: Set food menu in Ascending or Descending order
Field Selection
You may choose which fields to display on the list view page.
Styling:
You may change the primary color, font size, text color, and style alignment from this page.
- Parent class: You can assign your style to a certain class.
- Primary, Button background, Button hover, Button Active, Button Text Color: You may choose Primary color as your theme color and the color of your buttons and button text.
- Overlay Bg & Opacity & Overlay top Padding: You may change the color and opacity of the overlay background and the top padding.
- Title, Short Description, Price and Category name: Color, font size, font weight, and alignment may be customized.
Great, you have gathered all the main settings to generate ShortcodeShortcode to display your food menu. Now you will see how to display the food menu in Grid, Isotope and Carousel slider layout.
How to set the Isotope Layout for the food menu?
Give this ShortcodeShortcode an Isotope title and then choose an isotope layout. Check the box for the specified member now. From there, a selection choice will display on the right. You can choose one or more members and then the member’s name.
How to set the Carousel Slider Layout for the food menu?
First, select the carousel layout from the shortcode generator and give a title. Then you will find specific settings for the slider at the bottom. Tick checkboxes to enable the options you want.
How to add the ShortcodeShortcode to display the food menu?
After updating the shortcode layouts, you can see the menu on your food menu page from the shortcode setting. You can disable the details link for the food name. Check the preview if there is any link on the food name. You can add as many as more food categories to your menu page. You can enable grid view for categories from the settings. Go to the restaurant menu page and open a block for ShortcodeShortcode from the block editor. Then Paste the Shortcode and see the preview. Now you can check the food details, links there.
Great! You’ve just discovered the simplest method for adding a food menu to your restaurant’s website. You may find the tutorial a bit stretchy, but the walkthroughs are extremely simple. RadiusTheme continuously offers the greatest WordPress theme and plugins to be unstoppable in the restaurant business. There are free and paid versions of all of their themes and plugins. Their product support is both sensible and extensive.
If you want to make food delivery website, Here is the list of the best food delivery WordPress theme
