Tutorial: Create a WooCommerce Restaurant Ordering System
The coronavirus lockdown has forced millions of restaurants to close their doors or change the way they work. Suddenly, creating an online restaurant ordering system is essential to staying in business. Fortunately, anyone can set up a food delivery or takeaway service using a WordPress food delivery plugin and WooCommerce. Keep reading to learn how.
A number of third-party services, such as Deliveroo, Uber Eats and Just Eat, have sprung up to allow restaurants to take food orders online. However, they normally charge a big commission, and don’t offer significant ease-of-use advantages over just doing it yourself.
While it might seem daunting, it’s actually really simple to set up your own online restaurant ordering system using the WooCommerce platform (with a WordPress food delivery plugin). It’s quick to set up, straightforward to manage, and will save you a lot of money.
By the end of this free tutorial, you’ll walk away knowing exactly:
- What you need to start taking online orders for your restaurant
- How to set it up in under 15 minutes, from start to finish (without any technical experience).
- How to do all of this EVEN if you don’t have a website yet.
And the best part?
Your WooCommerce restaurant ordering system will be 100% yours. You own your data, and you get to keep 100% of your profits.
Sound good? Let’s get started!
Why a WooCommerce restaurant plugin is the best (and cheapest) way to take food orders online
Before we dive into the tutorial, let’s look at why a WooCommerce restaurant ordering system is the best option for taking food orders online.
Many restaurants use hosted third party services like Just Eat, Uber Eats, Deliveroo and Grubhub. By listing your restaurant with these platforms, you have access to a huge market of potential online food delivery customers. However, it’s not ideal for everyone.
Hosted platforms take a big cut of the revenue from your online restaurant orders. For example, Just Eat takes 14% at the time of writing. Whilst they have a massive user base, you’re competing with other restaurants on the same platform, so it’s easy for your restaurant to get lost.
As with any hosted system, you don’t have full control over your customer data. You have no control over the functionality of your online restaurant ordering system – you can’t customize it or add new features.
If you’re looking for a low-cost Just Eat alternative without the fees, this tutorial will teach how you to create a bespoke online food ordering system. You don’t have to worry about the problems of affiliating to a third-party platform. In addition, having a WooCommerce food ordering system on your main restaurant website will make your business appear more professional. It encourages customers to spend more time on your site, building loyalty.
What will my WooCommerce restaurant ordering system cost?
There are financial advantages to getting a WordPress site for your restaurant. 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 order you receive. You start saving money almost immediately.
These are costs of building the food ordering website described in this tutorial:
- WordPress content management system – free of charge.
- WooCommerce plugin – free of charge.
- WooCommerce Restaurant Ordering plugin.
- WordPress theme – free of charge (you could buy a premium WooCommerce restaurant 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 recommend Kinsta’s premium WordPress hosting which is ideal for an e-commerce website with online restaurant ordering system. For lower budgets, SiteGround are also good.
- Payment processor fees – if you take payment online (which isn’t essential) then your payment processor will take a percentage of the fees. This is normally a few percent – much cheaper than Just Eat’s 14%.
As you can see, setting up a WordPress food delivery plugin yourself is far cheaper than using a third-party platform such as Just Eat.
Still not convinced? Let me show you how simple it is to set up a WooCommerce restaurant ordering system.
Should I create a DIY WordPress food delivery website, or hire a developer?
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, just forward this tutorial to any WordPress developer.
To build your own WooCommerce restaurant order system, keep reading and I’ll show you how.
How to create a WooCommerce restaurant ordering website
In this video tutorial, you can watch me create a restaurant online food ordering system. Build yours alongside me, or read the written tutorial below.
The following tutorial covers every step of setting up a WooCommerce restaurant website:
- Create a WordPress websiteWordPress is the world’s web building platform. It powers your overall website, and makes it easy to add pages and edit content.
- Install WooCommerceWooCommerce is the world’s top e-commerce platform, powering over 41% of online stores. We’ll use WooCommerce to add products and categories, take payments online (including PayPal and credit card), and add delivery and collection.
- Install WooCommerce Restaurant OrderingThis plugin converts your WooCommerce store into a fully fledged food ordering system, displaying your products in a user-friendly one-page restaurant ordering system so that customers can browse, pick, and customize their orders.
- Add options to your food productsI’ll show you 2 easy ways to add extra options for your food items, such as size choices or selling pizza toppings.
- Delivery and collectionWe’ll discover how to add a range of delivery and collection options, as well as opening hours and delivery time slots.
- Bonus tipsFinally, I’ll share some extra tips on perfecting your WooCommerce restaurant ordering system. This includes accepting tips online to increase your average order value; selling discounted meal deals; and online ordering for multiple restaurant chains.
1. Create a WordPress website
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 prefer, then you can use a WooCommerce restaurant theme such as Delicio.
2. Install and set up WooCommerce
Once you’ve got a WP website with a WooCommerce-ready theme installed, it’s time to install WooCommerce. This will be the core of your online restaurant food ordering system and basis for installing your WordPress food delivery plugin, providing the behind-the-scenes e-commerce features such as the shopping cart, checkout and online payments.
2a. How to install WooCommerce
- 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, tax details etc. (Ignore shipping as we’ll do this in step 5). Tell the wizard to create the basic pages needed for WooCommerce such as Shop, Cart and Checkout.
- 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 staff or delivery drivers can take payment instead. To take credit/debit card payments without PayPal, then select ‘Stripe‘ and follow the onscreen instructions.
2b. Create product categories for 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. Add a Name and Slug, plus a description if you want to display some introductory text for the category on the food order form.
- 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.
2c. 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 in the lightbox popup for each food (if you enable the lightboxes in step 3). It’s a good place to list allergens and nutritional information.
- 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 step 4, below.
- Product Short Description (optional) – Add a short description to display extra information about the meal. This can appear on your one-page restaurant order form. It’s a good place to list nutritional symbols, such as “GF, VG” for a dish that is Gluten Free and Vegan.
- 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 (optional) – 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.
3. Install WooCommerce Restaurant Ordering
By now you’ve set up WooCommerce, added your dishes, and structured them into the sections on your restaurant menu. Next, it’s time to create a one-page food order form so that hungry customers can quickly build their meal and order online.
We’ll do this using the powerful WooCommerce Restaurant Ordering plugin. WooCommerce provides its own layouts but they’re not suitable for an online food ordering system. As a WordPress food delivery plugin, WooCommerce Restaurant Ordering lists your menu in a one-page order form which is perfect for food ordering.
3a. Install WooCommerce Restaurant Ordering
- Buy the WooCommerce Restaurant Ordering plugin.
- Download the plugin files and copy your license key from the order confirmation page or email.
- In the WordPress admin, go to Plugins → Add New → Upload.
- Upload the zip file for WooCommerce Restaurant Ordering and activate the plugin.
- Go to WooCommerce → Settings → Restaurant and enter your license key. Here, you can also choose the default settings for your restaurant food order forms.
3b. View your restaurant ordering page
When you activated WooCommerce Restaurant Ordering, the plugin automatically created a one-page food ordering system for you. This lists all your food products, divided by category.
Find the page under the Pages section of the WordPress admin, and see how it looks!
If your WordPress theme provides page layouts that have a sidebar, then you can go to Appearance > Widgets and add the ‘Cart’ widget. This displays the contents of the customer’s cart as they add to their order:
If you prefer the full-width layout or don’t have a sidebar, then you can use WooCommerce Restaurant Ordering with a floating cart plugin instead.
2c. Create more food order forms (optional)
So far, you’ve learned how to use the default restaurant ordering page, which lists all your foods by category. If you need more flexibility, then you can also create food order forms individually.
You can do this by adding a
[restaurant_ordering] shortcode anywhere on your site. Use the shortcode options to choose which categories to include, and customize the settings. This might be useful if:
- You’re listing foods on more than one page of your website, for example with one page per category.
- You’d like to use different settings for each food order form, such as showing images or descriptions for some categories and not others.
- You want to create a tabbed layout for your WooCommerce restaurant ordering system, with a separate tab for each category.
4. Add options to your food products
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 a size or select 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.
Adding product variations
- Select ‘Variable product’ in the ‘Product Data’ section of the ‘Add/Edit Product’ page.
- Go to the ‘Attributes’ tab, add the product information that customers will be choosing between, and tick ‘Used for variations’.
- 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’. When customers click on a food in the restaurant order form, they can choose the variations from a lightbox before adding to the cart.
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 customers click on a food product in your WooCommerce restaurant order form, the add-ons will appear for them to select in a lightbox.
5. Set up delivery, collection and delivery time slots
WooCommerce offers lots of delivery options, which are perfect for restaurants. The free WooCommerce plugin lets you set up delivery areas and delivery or collection options. You can also use an additional plugin to add opening hours and delivery time slots.
5a. Delivery areas and options
You can find these in the WooCommerce → Settings → Shipping section of the WordPress admin.
Here are some suggested shipping options that are useful for online restaurant ordering:
- Shipping zonesCreate one or more shipping zones for your different delivery areas. For example, if you offer free shipping for certain zip codes and charge for delivery in other areas, then set up 2 shipping zones. If you also offer collection, add a third shipping zone so that people can ‘click and collect’ wherever they live.
- Shipping optionsAdd one or more delivery options for each shipping zone. For example, your ‘Local Delivery Area’ shipping zone might have a ‘Free Delivery’ option for orders over $20, a $5 ‘Flat Rate’ option for lower value orders, and a ‘Local Pickup’ option for customers wishing to collect their takeout meal.
Let customers check the delivery area before they start ordering
To make your online restaurant ordering system more user-friendly, I recommend adding details of your delivery area elsewhere on your site. Here are some ideas on how you can do this:
- Add a ‘Delivery Area’ page to your restaurant website.
- If your website has a sidebar (right or left column), add a widget about your restaurant’s delivery area. Or even better, add a custom Google map showing your online food delivery area.
- Install the Woo Delivery Area Pro plugin so that customers can check they’re in your delivery area before they start building their meal.
5b. Delivery time slots and opening hours
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. You can do this with the WooCommerce Delivery Slots plugin by Iconic.
This excellent plugin lets customers choose a delivery date and time slot, subject to your restaurant’s opening hours and capacity. You can restrict the number of bookings per time slot. You can specify how long customers must place their orders before their time slot, giving the kitchen plenty of time to prepare the meal.
To avoid disappointment, we recommend encouraging customers to choose a delivery or ‘click and collect’ slot before they start adding foods. There are several ways to do this, which you can read about in the WooCommerce Restaurant Ordering plugin documentation:
6. Bonus tips
Before we finish, I’ll share some more top tips for perfecting your WooCommerce restaurant ordering system. You’ll learn how to accept tips online, sell meal deals, and more. If you operate a chain of restaurants, then you’ll also learn how adapt this tutorial to set up online ordering for multiple sites.
Encourage customers to leave a tip
All over the world, restaurant customers expect to leave a tip. Don’t miss out just because you’re selling online! You can add tipping to your WooCommerce restaurant website using the WooCommerce Donation Or Tip On Cart And Checkout plugin.
This handy plugin adds a ‘Tip’ field to the WooCommerce checkout page. Customers can enter the value of their tip, significantly increasing your average order value.
Most restaurant customers add a tip of 10-15% of the total order value, depending on your country. Use the plugin to set a default tip as a percentage of the order value. To encourage bigger tips, set the default tip at the upper end of the usual amount in your country. Customers can then override the suggested tip as required.
Manage your delivery drivers
Most WooCommerce restaurant ordering systems use local drivers to deliver the orders.
You can manage your delivery drivers outside of the website. Alternatively, you can save time with the free Delivery Drivers for WooCommerce plugin. This WordPress plugin automates many of the manual tasks, connecting your drivers with your online systems and the customer.
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.
Mobile ordering for restaurants
WooCommerce doesn’t come with a mobile app for customers to order via their smartphones. 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 app!
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 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. Since Google CloudPrint is being discontinued soon, we recommend the WooCommerce Automatic Order Printing (PrintNode) plugin.
- 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 Alert Order Notifications plugin. You can also use the the Twilio SMS Notifications plugin to send the customer a text when their order is ready.
- WooCommerce can be integrated with many external systems. If you’re using a specific system to 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.
Online ordering for multiple restaurants
So far, we’ve talked about creating a WooCommerce restaurant ordering system for a single location, using a WordPress food delivery plugin. With a couple of tweaks, you can extend this to take orders for multiple restaurants or entire 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 Restaurant Ordering will be active on each site. However, each site will have its own set of products and order notification settings, avoiding any crossover.
WPBeginner have an excellent article on How to Install and Setup WordPress Multisite Network. This is compatible with all the steps in the above 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 Restaurant Ordering to list products from the appropriate categories.
- Alternatively, 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). You can then use WooCommerce Restaurant Ordering to create a separate product table for each restaurant.
Whichever method you choose, you can use 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. As a result, your entire WooCommerce restaurant ordering system remains on a single website – while taking orders from multiple restaurants.
Case study: Online Ordering for Ciao Italia
Ciao Italia is an Italian restaurant in the US that started offering curbside pickup to its customers during the COVID-19 pandemic. They use our WooCommerce Restaurant Ordering plugin to let customers place their orders online from home.
The restaurant displays its entire menu (including food, beverages, and a gift card) on a one-page order form. It does this by sorting the food items under different categories and displaying all of the categories on the menu page. Customers can simply click the (+) icon to add food items to cart. When a customer adds an item to their cart, they see additional purchasing options in a lightbox.
For example, you can use the lightbox to choose the quantity of food or beverages. If you’re buying a gift card, then you can choose the value in any denomination. (Tip: They sell gift cards using the ‘Customer Defined Price’ option in the Product Add-Ons plugin.)
The one-page food order form makes it quick and easy for customers to place their orders and proceed to the checkout page.
Adam Tracksler from Bryce Creative developed the website. He was delighted with WooCommerce Restaurant Ordering:
A Perfect Plug-in for Today’s Needs
Want to set up online ordering for your restaurant in 15 minutes?
And there you have it! If you follow all the steps in this tutorial then you can create a complete online restaurant ordering system with an 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 food products. You’ve also seen how you can use the WooCommerce Restaurant Ordering plugin to create customizable food order forms. Customers can choose their selections from each customer, and then place their order and pay online.
By using a WordPress food delivery plugin and WooCommerce 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.
- Easy plug-and-play setup.
- Comes with full support and expert advice.
- 30-day money back guarantee – love it or your money back!
Get WooCommerce Restaurant Ordering here, and start selling food online TODAY →