Tutorial: Create a WooCommerce Restaurant Ordering System to Order Food Online
If you run a food delivery or takeaway service, you’ll know just how important it is to have an online restaurant ordering system. Fortunately, anyone can set one up using a WordPress food delivery plugin and WooCommerce.
A number of third-party services, such as Just Eat, have sprung up to offer restaurants the ability to give patrons this option. But these often take a substantial commission, and don’t offer significant ease-of-use advantages over just doing it yourself.
While it might seem daunting, setting up your own bespoke online restaurant ordering system using the WooCommerce platform (with a WordPress food delivery plugin) is actually a really simple process. It will take just a few hours of your time, is straightforward to manage, and in the long run will save you a lot of money.
If you’re looking for a low-cost Just Eat alternative without the fees, this tutorial will teach how you to create an online food ordering system with a simple WordPress food delivery plugin – with no technical expertise.
This post will first show you how to install and setup WooCommerce – the world’s top e-commerce platform, powering over 41% of online stores – on your WordPress site.
You’ll learn how to use this powerful system to develop product categories, attributes, variations, and so on to fully recreate your restaurant’s menu online.
Next, we’ll cover how to setup the WooCommerce Product Table plugin to create an easy-to-use, one-page ordering form for your customers to browse, pick, and customize their orders.
Finally, I’ll also show you how to add additional features, such as tipping, quick view, mobile ordering, and the ability to take orders if your business is part of a wider chain.
Sound good? Let’s get started!
Video tutorial – WooCommerce restaurant website
In this video tutorial, you can watch me create an online food ordering system for a pizza restaurant. Build yours alongside me, or read the written instructions below.
First, we’ll see whether it’s really worth creating a WooCommerce restaurant ordering system as an alternative to Just Eat, with your WordPress food delivery plugin.
Are WordPress & WooCommerce cheaper restaurant ordering systems than Just Eat?
Just Eat is by far the market leader in online restaurant ordering systems. By listing your restaurant on Just Eat, you have access to a huge market of potential online food delivery customers.
It’s not ideal for everyone. Just Eat takes a big cut of the revenue from your online restaurant orders – 14% at the time of writing. Whilst Just Eat has a massive user base, it also has a large number of businesses competing for custom, so it could be easy for your restaurant to get lost in among all the others.
Restaurants wanting a cheaper, bespoke alternative to Just Eat can benefit from a WordPress WooCommerce food ordering system (/WordPress food delivery plugin).
Not only do you not have to worry about the problems of affiliating to a third-party platform, but having a dedicated website will make your business appear more “professional”, and having an ordering system on the site will encourage more customers to spend more time on your site, building loyalty.
You can set up your Woo restaurant ordering system with no technical expertise, and almost no cost.
What will my restaurant ordering system cost?
There are financial advantages to getting a WordPress site for your restaurant. For example, almost all of the costs are fixed one-off, upfront fees. As a result, rather than losing a percentage of every sale, the benefit improves with every customer you gain. You can therefore start saving money almost immediately.
These are costs of building the website described in this tutorial
- WordPress content management system – free of charge.
- WooCommerce plugin – free of charge.
- WooCommerce Product Table plugin.
- WordPress theme – free of charge (you could buy a premium WooCommerce theme for ~$65 but this tutorial will show you how to add online ordering to your restaurant website using a free theme).
- Ongoing web hosting – web hosting comes at all different price points to suit any size business. We offer premium WordPress hosting which is ideal for an e-commerce website with online restaurant ordering system.
- Payment processor fees – if you take payment online (which isn’t essential) then your payment processor will take a percentage of the fees. In this tutorial, you’ll learn how to take payment via PayPal, as this is the most popular for online food ordering and easiest to set up. PayPal’s fees are a few percent – much cheaper than Just Eat’s 14%. If your system receives a lot of restaurant orders online then you can save more money by using a different payment provider. For example, Stripe is good and has lower fees, although it’s a little more complicated to set up.
As you can see, setting up a WooCommerce product table to process online food orders yourself can be far cheaper than using a third-party platform such as Just Eat.
Not convinced? Let me show you how simple it is to set up your restaurant ordering system using this method.
Before you start
This tutorial assumes that you already have a WordPress website for your restaurant. If you don’t already have a WordPress site, there are loads of online resources to help you get started with WordPress.
Since this tutorial is aimed at non-coders, I recommend using a WooCommerce-ready theme for the design of your website. The screenshots in this article were all created using Storefront. This is a high quality, free WP theme from the makers of WooCommerce.
If you don’t like the design of Storefront, you can install one of its many child themes. There are even themes specially designed for restaurants with online food ordering systems, such as their Deli and Bistro themes.
Alternatively, buy a WooCommerce-ready theme in the WooCommerce section of ThemeForest. There’s a lot to choose from – this link will take you straight to a list of WooCommerce-ready themes, sorted by popularity.
Now, let’s get into the setup instructions, and then we’ll see some real-world case studies of restaurants which have followed this tutorial to create their own WooCommerce restaurant ordering system, using examples from our existing customers.
DIY WordPress food delivery plugin, or managed restaurant website?
Below, I’m going to tell you how to create a WooCommerce restaurant ordering website using a simple WordPress food delivery plugin. This is a great option and you don’t need any technical know-how. If you’d rather have someone else set up the website for you using a WordPress food delivery plugin, just forward this tutorial to your WordPress developer.
If you’d prefer to build your own WooCommerce restaurant order system, keep reading and I’ll show you how.
Creating your WooCommerce restaurant ordering system
Once you’ve got a WP website with a WooCommerce-ready theme installed, you can carry on with this tutorial. Either follow it from start to finish, or jump straight to a specific section:
- Setting up WooCommerce
- Creating a one-page order form for your online restaurant ordering system
- Adding quick view
- Encouraging customers to leave a tip
- Mobile ordering for restaurants
- Managing orders
1. Setting up WooCommerce
WooCommerce is the world’s leading e-commerce platform, powering over 34% of all online shops worldwide. This will be the heart of your online restaurant food ordering system and basis for installing your WordPress food delivery plugin, providing e-commerce features such as the shopping cart, checkout and online payments.
However, we won’t be using Woo to display the foods on your menu. You’ll need WooCommerce Product Table for that, which we’ll cover later in this tutorial. However, WooCommerce will form the core of your restaurant ordering system, and is the platform on which the rest of the system will run.
1a. How to install WooCommerce
Here are the steps you need to follow in order to install WooCommerce on your WordPress site:
- Log into the WordPress admin for your website.
- Go to Plugins → Add New.
- Search for ‘WooCommerce’, and install and activate the plugin.
- A button will appear towards the top of the WordPress admin prompting you to enter the WooCommerce setup wizard. Go through the wizard and enter your currency, shipping, tax details etc. Tell the wizard to create the basic pages needed for WooCommerce such as Shop, Cart and Checkout. (If the wizard doesn’t offer sophisticated enough shipping options for your online restaurant ordering system, you can finish setting this up in section 1f, below.)
- In the payment options section of the setup wizard, choose ‘PayPal Payments Standard’ and enter your PayPal email address. This is the quickest way to get started and you can always set up other payment options later. If you don’t want to take online payments, select ‘Cash on delivery’ and your restaurant delivery drivers can take payment instead.
1b. Create product categories for the sections on your restaurant menu
Most restaurant menus are divided into sections: Starters, Main Courses, Desserts, Kids Menu, Drinks, and so on. You need to create a separate WooCommerce product category for each section of your restaurant menu:
- Look at how your food delivery menu is structured and write a list of categories.
- In the WordPress admin, go to Products → Categories.
- In the ‘Add New Product Category’ section on the left, create a category for each section on your menu. You need to add the Name and Slug and can ignore the other fields.
- Click the blue ‘Add New Product Category’ button.
The WooCommerce product categories you’ve just created for your menu will appear in a list on the right hand side of the page.
1c. Add each dish or meal as a WooCommerce product
Next, add each food from your restaurant menu as a WooCommerce product.
In the WordPress admin, go to Products → Add New. Add the information highlighted in the screenshot below:
- Title – The name of the dish to appear in the online restaurant ordering system.
- Long Description (optional) – A longer description. This can appear on your WooCommerce order form, or people can click through to read it.
- Product Data – Choose your product type from the dropdown list. If your restaurant only offers 1 version of the dish then choose ‘Simple Product’ and add the price. If you offer choices (e.g. Small, Medium and Large), choose ‘Variable Product’ and add the remaining information in steps 1d and 1e, below.
- Product Short Description (optional) – Add a short description to display extra information about the meal. For example, if you’re using quick view then you can show this in a lightbox to list ingredients, allergy information and so on. Or if you prefer, you can include it on your one-page restaurant order form.
- Product Categories – Tick the menu category that the food should appear in. (WooCommerce lets you select multiple categories but most online restaurant ordering systems would have 1 category for each food, just like a printed menu.)
- Product Image – Click ‘Add Featured Image’ and upload a picture of the food. Restaurant food photography is a skill and it’s worth getting this done professionally as it will make a huge difference to your online sales. If your online restaurant order form will have small images then you should keep the file sizes small.
- Publish – Click the blue ‘Publish’ button.
1d. Add product attributes for your foods, if required
Lots of online restaurant ordering systems include extra information about each food. For example you may wish to mark certain dishes as healthy, vegetarian, vegan or gluten free.
There are 2 easy ways to do this – tags or product attributes. Think carefully about which one is most appropriate for the information about your foods.
Tags can be displayed as a single column in your online restaurant order form. They should be used for repeatable information that applies to more than one product on your restaurant menu.
For example if a food has 3 tags – ‘Healthy’, ‘Vegetarian’ and ‘Gluten Free’ – then the ‘Tags’ column (which you can call whatever you like) will list Healthy, Vegetarian and Gluten Free. If you like, customers can click on a tag to view all foods with that tag.
To add tags to your foods, simply type them into the ‘Product Tags’ box on the right of the Add Product screen in WooCommerce. If you want customers to be able to filter by tag, click ‘Choose from the most used Product tags’ instead of typing an existing tag, as otherwise they will be listed as separate tags. For example, you might have already entered ‘gluten free’ for a different item on your menu. If so, next time you add a gluten free dish, you should select the existing tab instead of creating a new one.
Product attributes can be displayed as separate columns in your online restaurant ordering system. Use them to record data that is needed for most of your foods, for example calorie count. Product attributes can be displayed as static data about a food (e.g. ‘1,098 calories’), or they can be used as variations that customers can choose (e.g. Small/Medium/Large).
- Go to the Product Data section on the Add Product page and click the ‘Product Attributes’ tab.
- Click the grey ‘Add’ button next to ‘Custom product attribute’.
- Add the name of the attribute group. For example if you’re adding size options for the food dishes, call it ‘Size’.
- In the Value(s) box, list all the attributes separated by |.
- If you’re having an individual page for each food, ticking ‘Visible on the product page’ will display the attribute on that page as well as the main restaurant order form.
- To allow customers to select an attribute (e.g. choose the food size) then tick ‘Used for variations’. To make this work, you also need to follow the instructions in section 1g, below.
- Repeat steps 2-6 for any further attribute groups you wish to add.
- Click ‘Save attributes’.
1e. Add product variations or add-ons to create options for each food for your WordPress food delivery plugin
If you only offer 1 version of each dish, you can ignore this section. If you want to give customers a choice – for example to choose their Size or pizza toppings – then you need product variations or add-ons.
Variable products are built into WooCommerce. You can list each type of variation as a dropdown list alongside each product in your online restaurant ordering system. Customers can select 1 variation from each list.
If you want customers to be able to make multiple selections, then you need add-ons instead. You can add more flexible options with the official WooCommerce Product Add-Ons plugin. It works perfectly with the Product Table plugin we’re using for the food order system. You can use it to add checkboxes, radio buttons, multi-select dropdowns, text input fields where the customer can type a special message, and more. For example, a WooCommerce pizza restaurant will need Product Add-Ons so that customers can order as many extra toppings as they like.
Next, I’ll show you how to add both types of extra product option. You can use them separately or together in your WooCommerce restaurant ordering system.
Too many variations to fit on the WooCommerce restaurant order form? Don’t worry, I’ll show you a fantastic alternative in a minute.
How to add product variations
- Select ‘Variable product’ in the Product Data section of the Add Product page.
- Make sure you have already added all your product attributes and have ticked ‘Used for variations’ (see section 1d, above).
- Go to the ‘Variations’ tab.
- Either select ‘Create variations from all attributes’ from the dropdown, or add each variation individually and click ‘Go’.
- Click the little triangle arrow that appears when you hover over a variation and add the variation price and any other information.
- Finally, click ‘Save changes’.
How to create Product Add-Ons
- Buy, install and activate the WooCommerce Product Add-Ons plugin.
- In the ‘Product Data’ section for each product, you’ll see a new ‘Add-Ons’ tab.
- Use the plugin documentation to create your add-ons.
- When you create the restaurant food order form later in this tutorial, the add-ons will automatically appear in the add to cart column of your product tables.
1f. Online food delivery collection, shipping options & delivery time slots
WooCommerce offers lots of shipping options. Most restaurants have a flat shipping cost per order for their online food ordering systems. This means that you would charge the same shipping cost regardless of the amount ordered. You may have different shipping costs for different delivery zones. You might offer free shipping for certain post code areas and bill for shipping for other zip codes.
Set up your shipping costs in the WooCommerce → Settings → Shipping section of the WordPress admin. There are lots of options, and you can create shipping zones to charge different rates to different areas. This is covered nicely in the official WooCommerce documentation so I recommend that you read the section on shipping to add your restaurant delivery postage costs.
Use the Local Pickup option to provide a free option for customers to collect their food takeout order rather than having it delivered.
Delivery time slots
Some restaurants like to deliver their online orders as soon as they’re ready. Others let customers order in advance and choose a specific time slot. As a restaurant, you might want to take up to 5 online food orders in each half hour period, and make sure they order at least 15 minutes in advance of their time slot.
The very popular and well-supported WooCommerce Delivery Slots plugin lets customers choose a delivery date and time slot. It comes with all the features you’re likely to need to manage your system. For example, there’s an option to restrict the number of bookings within each time slot. You can also set how long customers must place their orders before their time slot.
If there’s a maximum number of orders that you can accept per day, consider adding the Order Delivery Date plugin. This tutorial tells you how to limit the number of orders or deliveries per day in WooCommerce – perfect for restaurant ordering.
You can also use the ‘Local Pickup‘ shipping option so that customers can collect their order from your restaurant. A lot of takeaway restaurants offer this option, usually for no extra cost. Local collection can be used on its own, or alongside other shipping options.
1g. Set the area your restaurant can deliver food to
Nearly all online restaurant ordering systems have a predefined range of postcodes or zip codes they will deliver to. There are several ways to restrict your food delivery area in WooCommerce:
WooCommerce shipping zones
It’s possible to set a specific delivery area in WooCommerce without adding any extra plugins. You can do this using the shipping zones option in WooCommerce → Settings → Shipping.
Simply create a shipping zone for your WooCommerce restaurant delivery area. (Create more than one zone if you charge different delivery costs to different zip codes.)
For each shipping zone, select the postcode or zip code areas that it applies to. Add one or more shipping methods for each shipping zone that you deliver to.
At the bottom of the list, there will be a ‘Rest of the world’ shipping zone. Make sure there are no available shipping methods for this zone. WC will accept orders from people in your main shipping zones, and will prevent anyone else from placing an order.
Don’t make customers wait until the checkout!
To make your online restaurant ordering system more user-friendly, I recommend adding details of your delivery area elsewhere on your site. This handy WordPress plugin will prevent people from the wrong area from ordering. However it’s best to tell them upfront to avoid disappointment. Here are some ideas on how you can do this:
- Add a ‘Delivery Area’ page with a link in the main navigation menu of your restaurant website.
- If your website has a sidebar (right or left hand column), add a prominent widget listing your restaurant’s delivery postcodes. Or even better, add a custom Google map showing your online food delivery area.
Woo Delivery Area Pro plugin
For a more fully featured way to restrict shipping zones, try the Woo Delivery Area Pro plugin. This lets you define shipping areas for your WooCommerce restaurant ordering system, adds postcode checkers for your customers, and more.
This is a relatively new plugin and doesn’t have that many reviews yet. However, it’s well presented and is definitely worth trying. If you try it, please add a comment below to help other people who use this tutorial.
1h. Configure your email notifications
WooCommerce will email you (the administrator) and the customer whenever an online order is received. Go to WooCommerce → Settings → Emails and configure these emails as needed.
1i. Configure how you accept payments
With your WooCommerce restaurant ordering system, you have two main options for how you accept payments:
- You can accept online payments through WooCommerce using a variety of payment gateways, including PayPal, Stripe, Amazon Payments, etc.
- You can skip online payments and use your “normal” in-person payment system, whether that’s cash, credit, or both.
To edit the payment methods for your restaurant ordering system, go to WooCommerce -> Settings -> Payments. This will list all of your installed payment methods. If you don’t see the payment gateway that you want to use, you can browse all of the supported payment gateways at the WooCommerce extension directory.
If you want to accept online credit card payments directly on your website, two good options are:
The money from orders that process online would end up in your PayPal or Stripe account, respectively.
On the other hand, if you don’t want to bring online payments into the mix, you should choose the Cash on delivery option. With this gateway enabled, customers will be able to submit their food orders online without paying. Then, you can collect payment from them in-person, either when you deliver their food or they pick up their order.
2. Create a one-page order form for your online restaurant ordering system
By now you’ve set up WooCommerce, divided your e-commerce online shop into the sections on your restaurant menu and added your dishes. Next, it’s time to display your foods on a single web page so that customers can choose their dishes and order online.
We’ll do this using the powerful WooCommerce Product Table plugin. WooCommerce provides its own layouts but they’re not really suitable for an online food ordering system. WooCommerce Product Table lists your products in a one-page form which is perfect for restaurant ordering within your WordPress food delivery plugin.
Your customers can search, sort and filter the list to find the foods they want. They can choose variations or add-on options, select the quantity and add foods to their cart directly from the order form page. When they’ve finished adding foods to the cart, they can click through to the cart and check out. The customer can then enter their details, pay online and place the order.
2a. Install WooCommerce Product Table
- Buy WooCommerce Product Table plugin from here.
- From the order confirmation page, download the plugin files and copy your license key.
- In the WordPress admin, go to Plugins → Add New → Upload.
- Upload the zip file for WooCommerce Product Table and activate the plugin.
- Go to WooCommerce → Settings → Products Product tables and enter your license key. Here, you can also choose the default settings for your restaurant ordering system.
2b. Create a page for your restaurant food ordering system
- Create a new page for your website (Pages → Add New). This will be the one-page order form where customers can choose foods and add them to their shopping cart.
- Add any introductory text that you want to display above or below the order form.
- You can then add various subheadings to the page. Create a subheading for each section of your restaurant menu. (You need a subheading for each of the Product Categories you created in step 1b earlier.) For example you might add subheadings for Starters, Main Courses, Desserts and so on.
2c. Add product tables to the page
Under each subheading, you need to add a product table displaying foods from the relevant category. To do this, add the following shortcode to an empty line after the subheading.
Instead of <category-id>, add the actual ID for the category that you created in step 1b. To find this, go to the Products → Product Categories page and hover over the ‘View’ link for the category. Look for the ID in the URL for the category page. (See video tutorial for more advice on this.)
Publish and view the page. You will see that WooCommerce Product Table has added an online restaurant order form listing the foods in the appropriate category.
The list of foods probably won’t be quite how you want it yet. The next few steps will help you to configure the product table into a fully functional online restaurant ordering system for your foods.
2d. Configure your restaurant order form
The WooCommerce Product Table plugin has plenty of options that let you get it working exactly as you like. These are fully described in the plugin documentation so you should spend some time getting it right.
To get you started, try out these shortcodes which use typical options for a restaurant online food menu. (Tip: If you already selected any of these options as defaults on the plugin settings page in 2a, above, then you don’t need to add them to the shortcode in your WordPress food delivery plugin.)
If you’re using tags:
[product_table columns="image,title,description,tags,price,add-to-cart" show_quantity="true" links="tags" sort_by="title" description_length="-1" filters="true"]
To display attributes (replace att:size with att: followed by the actual slug for the attribute):
[product_table columns="image,title,description,att:size,price,add-to-cart" show_quantity="true" links=tags" sort_by="title" description_length="-1" filters="true"]
If you’re using variations:
[product_table columns="image,title,description,price,add-to-cart" show_quantity="true" variations="true""links="tags"sort_by="title" description_length="-1" filters="true"]
More shortcode options
These shortcodes may not suit you perfectly. Here are links to some of the other options that are most relevant for an online restaurant ordering system and your WordPress food delivery plugin:
- Columns List the exact columns that you want to include in the table. A restaurant ordering system is likely to need name, description, tags, image, stock, price, add-to-cart and attributes. List the columns in the order that you want them to appear in the table – e.g. image first. If you’re using attributes, scroll down a bit for specific instructions on how to display product attributes as columns in the table. Make sure you include the add-to-cart button – otherwise your customers won’t actually be able to place their orders! The documentation tells you how to rename the column headers if you want to.
- Filter widgets Use filters to make it easy for customers to find the meals they like. Choose between filters dropdowns above each table, and/or WooCommerce filter widgets in a left or right sidebar.
- Sort by By default, foods are listed in reverse date order based on when you added them to the website. This option allows you customise how your products are sorted. You’ll probably want to sort alphabetically or by price instead. Maybe you’d rather sort by popularity or rating – it’s up to you. You can also choose the sort order (A-Z vs. Z-A, high-to-low vs. low-to-high, etc).
- Show Quantity Set this to “true” to let customers select the quantity of each item before adding to the cart. This will add a quantity selector next to the ‘Add to Cart’ button. Otherwise they’ll only be able to add dishes to their cart one at a time.
- Variations Set this to “true” to let customers select product variations before adding to the cart. You’ll need this if you want customers to choose between different options for a food (e.g. small, medium or large), unless you’re using Product Add-Ons instead.
Other options you might want to use
- Description Length By default, the Long Description field will only display the first 15 words. Set this to -1 to show the full text of the description. (I recommend doing this if you’re not letting customers click through to a separate page for each product.)
- Image Size You can set the size of the food images on the restaurant online order form. (Only applies if you’ve included an ‘image’ column.)
- Links Use this to disable the link to the single product page for each meal.
- Multi-add-to-cart checkboxes Instead of the standard add to cart buttons, you can add a tick box beside each food. This lets customers add multiple products to the WooCommerce cart.
2e. List the foods from your other menu categories
When you’re happy with the list of foods in your first restaurant menu category, you can add all the others. To do this, simply copy the shortcode from your first category and paste it after each of the other subheadings on the page. Replace the category slug (e.g. category=”main-courses”) with the slug for each category to make it show the correct foods for each section of the menu.
2f. Optional – divide your restaurant menu into tabs
So far, we’ve looked at creating a WooCommerce restaurant ordering system with a vertical layout. The various sections from your menu are presented on top of one another, and customers can scroll down to order their foods.
If you prefer, you can create a tabbed structure for your restaurant order form. Each section of the menu can be added to a different tab, creating a more horizontal layout. Customers can read the tab headings and click on the sections they want. Check out our takeaway ordering demo where you can see this in action.
To create a tabbed layout for your WooCommerce food ordering system:
- Add tabs to the page using the tab layout provided in your theme (if there is one). If your theme doesn’t come with tabs, then we recommend using the free Shortcodes Ultimate plugin.
- Add a product table to each tab. Each table should list the products from the relevant section of the menu.
3. Add Quick View links to the restaurant order form
So far, you’ve learned how to create a WooCommerce restaurant order form with an add to cart column. Any meal variations or add-ons are listed directly within the order form.
That’s great if you just have a few options for each food. But what if you have too many options to fit neatly into a one-page food order form?
That’s where product quick view comes in. The WooCommerce Quick View Pro plugin is designed to add extra ‘Quick View’ links to the restaurant order form. Instead of making customers buy foods directly from the order form, they click on a button to view the purchase options in a quick view lightbox popup. It’s much more user-friendly than having customers visit a separate page for each food they wish to buy. They simply click the quick view button for each item, choose their options, and immediately return to the order form where they can continue adding foods to the cart.
You can choose what information to display in the food product quick view. For example, you can show extra images of each food, and choose whether to include things like the category and short description. You can also customize the text in the quick view buttons, e.g. to ‘Build Meal’ or ‘Customize’.
4. Encourage customers to leave a tip
Upselling is key to the success of any WooCommerce store, including WooCommerce food ordering systems. It’s all about increasing the average customer order value so that each customer spends more. This is a much more cost-effective marketing strategy than attracting new customers. It’s an ideal way to increase revenue for your restaurant.
Use the Name Your Price WordPress plugin to create a ‘Tip’ product that encourages customers to add a tip to their order. Include this on your restaurant order form page:
- Install and activate the Name Your Price plugin.
- Add a new ‘Tip’ product. In the ‘Data’ section, tick the ‘Name Your Price’ box and choose a suggested price. Also choose the wording that you want to appear in the box (e.g. “Add a tip”). For example, you might want to add a Suggested Price which customers can change.
To upsell even more effectively, you can also promote the Tip product directly on the checkout page. To do this, go to the ‘Pages’ section in the WordPress admin and click on the Checkout page. Above the [woocommerce-cart] shortcode (which makes the checkout appear), add some prominent text saying something like “Want to leave a tip?” Link this text to the Tip product you just created.
Hopefully, customers will click on these links and add a tip to their order!
- Most restaurant customers add a tip of 10-15% of the total order value, depending on your country. The Name Your Price plugin only supports a fixed suggested order amount, and customers can choose to accept or override this. I recommend setting the suggested amount as 10-15% of your average order value. This will help you to get bigger tips.
- The Name Your Price plugin only works with the add to cart button style in WooCommerce Product Table and not the checkboxes. To use the two plugins together, you will need to choose the cart button style on the WooCommerce Product Table settings page.
5. Add restaurant opening times
Lots of restaurants are only open during specific hours, so you don’t want to receive orders at other times.
You can achieve this by adding another WooCommerce plugin such as WooCommerce Opening Hours & Chosen Times. Once you’ve set up the restaurant opening hours plugin, message will appear at the top of the cart and checkout if they try to order outside of your opening hours. This tells customers that the order will not be fulfilled until your restaurant is open.
6. Offer meal deals, such as buy-one-get-one-free (BOGOF)
Lots of WooCommerce restaurant websites provide special offers and meal deals. These are a fantastic incentive to encourage customers to buy more.
Use the official WooCommerce Dynamic Pricing plugin create a huge range of restaurant deals. For example, you can create buy one get one free (BOGOF) meal deals, or buy one pizza and get 50% off your second one. These deals can be global or specific to a category, so you can offer deals on pizzas or sandwiches while keeping the side dishes and desserts full price, and so on.
7. Mobile ordering for restaurants
WooCommerce doesn’t come with a mobile app for customers to order via their smartphones. At least, I’m not aware of any good ones. (Leave a comment below if you find one!)
However most WordPress themes are fully responsive, which means they’re mobile-friendly and look great on any device. This means that your customers can view your foods and order from your restaurant online using their device of choice – no need to worry about setting up a separate mobile version!
Managing orders in your WooCommerce food ordering system
There are many ways to manage the online food orders that your restaurant receives in WooCommerce:
- When you receive an order, you will receive an email notification from WooCommerce. Your kitchen staff can monitor this email address so that they’re notified as soon as an order arrives.
- If you have a busy restaurant with many online orders, you can keep the WordPress admin open on your screen during your restaurant opening hours. Train your staff to refresh the WooCommerce → Orders page regularly so they can take action as soon as a food delivery order is received.
- The official WooCommerce iOS mobile app lets you view and manage your restaurant orders from any Apple iPhone or iPad. It’s often much more convenient for restaurant owners and staff to use mobiles or tablets than a desktop computer.
- You can integrate your WooCommerce food ordering system with a GPRS printer. This will automatically print new online restaurant orders as soon as they’re received. You can do this using a WordPress plugin such as WooCommerce Print Orders or WooCommerce Automatic Order Printing.
- Use the YITH WooCommerce Desktop Notifications plugin to automatically play a sound alert on your desktop computer, laptop or tablet whenever you receive a new order.
- If you’d rather receive a text when you receive a new order from your WooCommerce restaurant website, try the SMS Notification for WooCommerce plugin.
- WooCommerce can be integrated with many external systems. If you’re using a specific system for manage your restaurant orders, look up how this can be integrated with WooCommerce.
Think creatively and you’ll be surprised how easy it is to integrate your WooCommerce food ordering system with your existing kitchen processes.
An example of how the backend process could work
To make those methods a little more concrete, let’s look at a hands-on example of how the backend processes might work on your restaurant ordering system with just WooCommerce’s built-in features and the official WooCommerce app.
Let’s say you use a computer as your main POS at your restaurant and you also have a dedicated smartphone for your staff to take orders over the phone.
First, you can leave the WooCommerce dashboard open on your computer. When a new order comes in, it will show up in the dashboard right away:
You could also create a dedicated email address for online orders and leave that open in your browser. WooCommerce will send an order confirmation email right away (if you use Gmail or G Suite, you’ll see this new email popup in the browser tab):
Finally, you could also set up the official WooCommerce app so that you get a push notification as soon as a new order is placed:
Your staff can then pull up that order information via the computer or on the smartphone app.
Take online orders for restaurant chains
So far, we’ve talked about creating a WooCommerce restaurant ordering system for a single location with a simple WordPress food delivery plugin. With a couple of tweaks, you can extend this to take orders for multiple restaurants or whole restaurant chains. There are 2 ways to achieve this:
Method 1 – WordPress multisite, with a separate site for each restaurant
You may want to keep your restaurants really separate, with unique content for each one (e.g. a different homepage, about page and contact us). If so, you can use WordPress multisite to create a separate sub-site for each restaurant in the chain. This is better than having completely separate websites because you get the best of both worlds: a single WordPress food delivery plugin installation with shared hosting and maintenance costs; with unique content for each restaurant.
WooCommerce and WooCommerce Product Table can be active on each site. However, each site will have its own set of products, avoiding any crossover.
WPBeginner have an excellent tutorial on How to Install and Setup WordPress Multisite Network. This is compatible with all the steps in this tutorial.
Method 2 – Single website, with separate categories & order notifications for each restaurant
A simpler option is to take orders for each restaurant from your main WordPress website. There are two ways you can do this:
- Create separate product categories for each restaurant. On the online food ordering page for each restaurant, use WooCommerce Product Table to list products from the correct category/ies only.
- Use either the official Product Vendors add-on, or Dokan Multivendor plugin to add products from multiple vendors (treat each restaurant as a separate vendor), and then use WooCommerce Product Table to create a separate product table for each restaurant.
Next, set up the WooCommerce Advanced Notifications plugin to send order notifications to a different email address depending on which category the customer has ordered from. This lets you ensure that the new order emails are sent to the correct restaurant. Your entire WooCommerce restaurant ordering system remains on a single website.
Now let’s look at some real-world case studies of restaurants which have followed this tutorial to create their own WooCommerce restaurant ordering system, with real examples from our existing customers.
Case study #1 – easy online ordering for Deliciously Clean Eats
Deliciously Clean Eats used this tutorial to sell one-off and weekly pre-prepared meals for home delivery. They created a customer-friendly 3-step process for ordering food online:
- First, the customer uses the filterable table to choose lunches and meals.
- Next, they add sides, sweets, drinks or breakfast options.
- Finally, they complete their food order using the WooCommerce checkout.
Each section of the menu is displayed within a separate tab. Customers can quickly choose foods from one tab, add to the cart, and then navigate to further tabs to expand their order. All the meals are available from a single page, with variation dropdowns to choose different meal options. As well as quick add to cart buttons and checkboxes, there’s a ‘Details’ button linking to the single product page for more information about each meal.
Deliciously Clean Eats designed the website using the impressive-looking Uncode theme. This creates a light and airy look that makes you want to order their meals.
Let’s next look at a second real-world example.
Case study #2 – online tapas ordering for Helletun Catering
Helletun Catering have followed the steps in this tutorial to develop a WooCommerce food ordering system to sell tapas dishes in WooCommerce, creating an eye-catching website that uses our WooCommerce Product Table plugin to create a user-friendly food order form.
The website is designed using the Ronneby theme, which is a particularly stylish WordPress theme.
As you can see, the food order form integrates beautifully into the overall design of the website. There’s a separate table for each section of the menu, each with columns of essential information such as the dish name, allergens list, price, and a multi-select “add to cart” column.
Customers can quickly choose tapas dishes, select variation options (e.g. number of portions), and add to the cart in just a couple of clicks. The tables are clean and simple in style, and any unnecessary elements are hidden in order to draw attention to what’s most important: the tapas dishes themselves.
Case study #3 – Provenance Meat WooCommerce food ordering system
Provenance Meat use our WooCommerce Product Table plugin to create an online food order form for their ethically sourced New Zealand lamb. Chefs and restaurant owners all over the world use the WooCommerce order form to buy lamb.
The one-page order form lists lamb products with essential information such as image, item code, type of cut, and price. Restaurant owners can select the quantity of each cut, tick all the items they require, and add to the cart in a single click. They can then progress to the WooCommerce cart and checkout.
This is a much quicker way for restaurant owners to buy supplies in bulk.
Provenance Meat have used a membership plugin to protect their food order form so that only logged in users can access it. You can achieve a similar result with our WooCommerce Private Store or WooCommerce Password Protected Categories plugins (depending on whether you want to hide your whole WooCommerce store or just parts of it).
Before I show you how you can create your own online food order system, have a look at this review:
Reduces the number of clicks for the customer.
See a WooCommerce restaurant ordering system in action
Check out our demo where you can see the online restaurant ordering system in action. Have a play with the search, sort and filter and see how you can use it on your own WP WooCommerce restaurant website.
We’ve also created a showcase where you can find more real-life examples of restaurants and food ordering websites that use WooCommerce Product Table. Filter by Industry to find examples of ‘Food Ordering’ websites.
A fully functional WooCommerce food ordering system for your restaurant, fast food or takeaway business
And there you have it! If you follow all the steps in this tutorial then you can create a complete online restaurant ordering system from scratch with a straightforward and easy to use WordPress food delivery plugin.
You’ve learned how to install and set up the WooCommerce platform to handle all of your menu’s products, as well as their attributes, variations, and so on.
You’ve also seen how you can use the WooCommerce Product Table and WooCommerce Quick View Pro plugins to list foods in an interactive order form. The list is neatly divided by category, reflecting the subdivisions of your menu: starters, mains, drinks, and so on. Customers can use the restaurant order form to sort, filter and search the list of foods. They can select variations or other extras, choose the quantity of each dish and buy straight from the one-page order form. Finally, they can place their order and pay online.
By using aWordPress food delivery plugin and WooCommerce to take your online food orders as an alternative to Just Eat or other systems, your restaurant can save many thousands of dollars or pounds. It’s easy to set up, easy to manage and will look really professional. Next up, you can use our top 10 tips to improve your WooCommerce conversion rate and get even more sales :)
I’d love to hear how you’ve used a WordPress food delivery plugin and WooCommerce for your WooCommerce food ordering system. Please leave your comments below. And if you find it useful, register as a WordPress plugins affiliate and earn 30% commission for recommending it! Happy ordering :)