This is the complete guide to setting up online ordering for a restaurant so that customers can use their mobiles or cellphones to order food from the table.
As restaurants adapt to the new requirements around social distancing, it's essential to minimize direct contact with customers. One way to do this is to allow customers to order food from their mobile phones directly while they sit at the table. This is safer and more convenient than taking their order in person or asking them to place their order at the bar.
This tutorial will teach you how to set up mobile food ordering for dining-in at your restaurant. The system can be hosted on any WordPress website. You can use it to allow customers to order food from the table and have their orders sent straight to the kitchen. Staff can also use it to take online POS orders on behalf of your customers.
Are you looking for a restaurant ordering system where your customers order food for home delivery? Check out our other tutorial instead!
What you'll need
We'll build our customer food ordering system using some high quality free tools, plus some affordable paid ones:
- A website powered by the free WordPress content management system. This makes it easy to add pages and edit your website. If your restaurant already uses WordPress for your main website, then you can add the mobile food ordering system to your existing site.
- The free WooCommerce plugin to add e-commerce features to your WordPress site. This includes the ability to add your foods as products, and for customers to place their orders.
- WooCommerce Restaurant Ordering plugin. This plugin lists your food products on a page on your website. It looks similar to your traditional printed restaurant menu, making it easy for customers to select their foods while they dine-in.
- The Checkout Field Editor plugin. This allows you to simplify the WooCommerce checkout, removing irrelevant fields such as the customer's address, and adding extra fields for the table number and special dietary requirements or allergies.
How it works
Once you've set up the food ordering system in this tutorial, customers can use their cellphones to order food from the table like this:
- Your customers arrive at the restaurant and sits at the table. (Tip: If you'd also like customers to reserve a table online for dining in, check out this article.)
- One member of the party uses their mobile phone or tablet to order food for the entire table. They do this by visiting your website and visiting the food ordering page (which can either be public, or private with the address displayed on a notice on the table). They select their food and drink from a quick one-page order form, and then proceed to the checkout. They enter some basic information on the checkout page and choose whether to pay online or at the end of their meal. Finally, they enter any extra information such as their table number or allergies, and click the 'Place Order' button.
- The order is either send to the kitchen via email, or you can add a plugin to automatically print it to the kitchen.
- Once the food is ready, the waiting staff can bring it to the table or leave it in a safe place for the customer to pick up (depending on your social distancing policies).
- At the end of the meal, if the customer hasn't paid online then you can give them a bill in the usual way.
The system works perfectly on all devices, including smartphones and iPhones, tablets and iPads. Of course, it also works on laptop computers - but customers are less likely to be using these at the table!
Before you start
Before you start, you should have a WordPress website with WooCommerce installed. This part of the process is the same for all WooCommerce websites, so we recommend following WPBeginner's excellent WooCommerce tutorial. Or if you already have WooCommerce set up, skip straight to the next step!
1. Add your foods as products
You need to add each food item from your printed menu as a WooCommerce product. To do this, go to Products → Add New and add all the required information. This would typically include the product name, a short description, a price, and possibly an image. (The screenshots in this tutorial don't include images because most restaurants don't print images on the menu. However, you can add images if you like.)
If you offer a choice of options for particular foods, then you can add these options as variations or add-ons:
- Use variations for dishes that come with a fixed set of options, such as Small or Large.
- Use the Product Add-Ons extension for dishes where the customer can select from a list of options. This might include pizza toppings where the customer can add multiple options, each of which will add to the price. Another example is steak, which is often offered on its own or with a choice of sauces.
Structure your food menu into categories
Go to Products → Categories and add the categories that you'd like to structure the mobile food order form into. This should generally be the same as the categories on your printed menu - e.g. Starters, Main Courses, Desserts, etc.
Add each food product to the correct category for your dining-in restaurant.
2. Create a one-page food order form
Now it's time to install the WooCommerce Restaurant Ordering plugin. Get the plugin, download it from the order confirmation email, then go to Plugins → Add New in the WordPress admin and upload it to your site.
Next, go to the plugin settings page at WooCommerce → Settings → Restaurant. Activate your license key and choose how you'd like the mobile food ordering page to work. This includes putting your food categories into the correct order, choosing how many columns to list the foods in, and choosing what information to show about each food.
Now go to the Pages section of the WordPress admin and find the page called 'Restaurant Ordering'. To save you time, the WooCommerce Restaurant Ordering plugin has created this for you automatically. It lists all your food items, divided by category.
3. Customize the WooCommerce checkout page
The WooCommerce checkout is mostly designed for ordering traditional products for home delivery. To make it perfect for ordering restaurant food for the table, I recommend adding some extra fields and hiding others. You can easily do this with the Checkout Field Editor plugin.
Install the plugin and use it to hide any fields that aren't needed. I'd recommend hiding fields such as the customer address. Since customers are ordering from their cellphones, make the checkout as simple as possible.
You'll probably also want to add some extra fields. The most important ones for ordering food to be delivered to the table are:
- Table number (and possibly other fields, such as which floor of the restaurant, or whether they are inside or outdoors in the beer garden).
- Any special dietary requirements or allergies.
You also need to choose how customers who order food on their mobile phones will pay for their order. There are 2 main options - either use both options together to give customers a choice, or just set up one of them:
- Pay at the end of the mealYou can keep it simple and give customers a printed bill at the end of their meal. They can then pay using your restaurant's existing payment methods (e.g. cash or using your credit card machine).
- Pay online when they place their orderYou can also use any of the payment gateways that integrate with WooCommerce to let customers pay online at the time they place their order. This maximizes social distancing, while saving you time taking payment at the end of the meal. The easiest mobile payment option to set up is PayPal. Customers love using PayPal on their cellphones because there's less information for them to enter. For credit card payments, I recommend Stripe (which supports all major credit/debit cards, and also has an Apple Pay - ideal for mobile ordering). You can easily set up PayPal and/or Stripe under WooCommerce → Settings → Payments.
Communicate the food ordering process to customers
Finally, you need to communicate how to order food from the table to your customers.
If you're just setting up online food ordering so that customers can order food or drink from the table, then I don't recommend adding your food ordering page to the main menu on your WordPress website. That could cause confusion since you only accept online orders from people who are already at your restaurant or bar.
Instead, keep the page hidden from the public-facing part of your website. Print a simple instructions sheet and put it on each table, telling customers how to order from their mobile smartphones. This should include:
Straightforward information about how the food and drink ordering process works.
- The address of the food ordering page (e.g. https://myrestaurant.com/orderfood) so that they can type it into their cellphone.
- A QR code which customers can scan from their mobile phone camera. The QR code contains the address of the food ordering page, and automatically directs customers to this page on your website. You can easily generate a QR code by adding the URL of your restaurant ordering page to QR Code Monkey, downloading the PNG file, and inserting the QR code into the 'How to order your food online' sheet for the table.
The easy way to take online food and drink orders from the table
As you can see, it's surprisingly easy to set up your own online food ordering system so that customers can use their cellphones to send food orders straight to the kitchen. It promotes social distancing by minimizing direct contact between waiting staff and hungry customers.
The WooCommerce Restaurant Ordering plugin is perfect for creating a one-page order form listing your foods. Customers just select their foods and place their order, which is then sent straight to the kitchen.
- Quick 10-minute setup
- Flexible display and layouts
- Works on any mobile or device
- No risk 30-day money back guarantee