Tutorial: Create a WooCommerce Restaurant Ordering System to Order Food Online

WooCommerce restaurant website ordering

If you run any kind of food delivery or takeaway service, you’ll know just how important it is for customers to be able to order online through an online restaurant ordering system. 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 WordPress WooCommerce platform is actually a really simple process. It will take just a few hours of your time, 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 no technical expertise.

WooCommerce restaurant ordering website WordPress

I’ll show you how to use WooCommerce and WooCommerce Product Table plugins to create a one-page restaurant ordering system for online food deliveries.

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, mobile ordering, and the ability to take orders if your business is part of a wider chain.

Sound good? Let’s get started!

VISIT PLUGIN DEMO

Get the plugin now

WooCommerce Product Table

Create your WooCommerce Restaurant Ordering System today!

BUY PLUGIN

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 look at whether it’s worth creating a WooCommerce restaurant ordering system as an alternative to Just Eat.

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.

However, 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. It’s easy for your restaurant to get lost in among all the others.

Online restaurant ordering system

Restaurants wanting a cheaper, bespoke alternative to Just Eat can benefit from a WordPress WooCommerce website with online food ordering system.

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 WooCommerce restaurant ordering system with no technical expertise, and almost no cost.

What will my restaurant ordering system cost?

The main financial advantages to starting up a WordPress site for your restaurant are that almost all of the costs are fixed one-off, upfront fees, so 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 the costs to build 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, I’ll show you 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 WordPress 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, you can 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.

Before we get into the setup instructions, let’s look at some real-world case studies of restaurants which have followed this tutorial to create their own WooCommerce restaurant ordering system. We’ll do that using examples from our existing customers.

Case study #1 – easy online ordering for Deliciously Clean Eats

WooCommerce restaurant website plugin case study

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:

  1. First, the customer uses the filterable table to choose lunches and meals.
  2. Next, they add sides, sweets, drinks or breakfast options.
  3. 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

WooCommerce Food Catering Website

Helletun Catering have followed the steps in this tutorial to develop an online food ordering system to sell tapas dishes in WooCommerce, creating an eye-catching website that uses WooCommerce and our 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 order form

WooCommerce Product Table Food Order Form PluginProvenance 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).

Read on and I’ll show you how you can create your own online food order system :)

DIY or managed restaurant website?

Below, I’m going to tell you how to create a WooCommerce restaurant ordering website. 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 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 WordPress 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:

  1. Setting up WooCommerce
  2. Creating a one-page order form for your online restaurant ordering system
  3. Encouraging customers to leave a tip
  4. Mobile ordering for restaurants
  5. Managing orders

Or if you want to create a ‘build your own product’ system – for example so that customers can design their own pizzas or burritos, then check out our other tutorial.

Online restaurant ordering delivery system integrated with kitchen

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, providing the e-commerce features such as the shopping cart, checkout and online payments.

However, we won’t be using WooCommerce 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:

  1. Log into the WordPress admin for your website.
  2. Go to Plugins → Add New.
  3. Search for ‘WooCommerce‘, and install and activate the plugin.
  4. 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.)
  5. 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

Online restaurant ordering WooCommerce categoriesMost 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:

  1. Look at how your food delivery menu is structured and write a list of categories.
  2. In the WordPress admin, go to Products → Categories.
  3. 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.
  4. 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:

  1. Title – The name of the dish to appear in the online restaurant ordering system.
  2. Long Description (optional) – A longer description. This can appear on your WooCommerce order form, or people can click through to read more information about each food.
  3. 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.
  4. Product Short Description (optional) – Add a short description if you want to display extra information about the meal. For example, if you’re letting customers click through to a single page for each food, then your WordPress theme will probably display the short description at the top and the long description lower down. If you’re creating a one-page restaurant order form without individual food pages then you probably don’t need a short description.
  5. Product Categories – Tick the category from your menu 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.)
  6. 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. Don’t upload huge images as this will slow down your website. If your online restaurant order form will have small images then there’s no need to add anything bigger.
  7. Publish – Click the blue ‘Publish’ button.

WooCommerce restaurant ordering system

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.

Food tags

Online food ordering system for restaurant

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

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).

  1. Go to the Product Data section on the Add Product page and click the ‘Product Attributes‘ tab.
  2. Click the grey ‘Add‘ button next to ‘Custom product attribute‘.
  3. Add the name of the attribute group. For example if you’re adding size options for the food dishes, call it ‘Size’.
  4. In the Value(s) box, list all the attributes separated by |.
  5. 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.
  6. 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.
  7. Repeat steps 2-6 for any further attribute groups you wish to add.
  8. Click ‘Save attributes‘.

WooCommerce restaurant ordering system
1e. Add product variations or add-ons to create options for each food

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.

WooCommerce pizza restaurant order system with extra toppings
How to add product variations

  1. Select ‘Variable product‘ in the Product Data section of the Add Product page.
  2. Make sure you have already added all your product attributes and have ticked ‘Used for variations‘ (see section 1d, above).
  3. Go to the ‘Variations‘ tab.
  4. Either select ‘Create variations from all attributes‘ from the dropdown, or add each variation individually and click ‘Go‘.
  5. Click the little triangle arrow that appears when you hover over a variation and add the variation price and any other information.
  6. Finally, click ‘Save changes‘.

Add Variation WooCommerce restaurant ordering system

How to create Product Add-Ons

  1. Buy, install and activate the WooCommerce Product Add-Ons plugin.
  2. In the ‘Product Data’ section for each product, you’ll see a new ‘Add-Ons’ tab.
  3. Use the plugin documentation to create your add-ons.
  4. 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.

Local collection

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. WooCommerce 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

Woo Delivery Area Pro pluginFor 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.

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.

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

  1. Buy WooCommerce Product Table plugin from here.
  2. From the order confirmation page, download the plugin files and copy your license key.
  3. In the WordPress admin, go to Plugins → Add New → Upload.
  4. Upload the zip file for WooCommerce Product Table and activate the plugin.
  5. 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

  1. 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.
  2. Add any introductory text that you want to display above or below the order form.
  3. 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.

[product_table category="<category-id>"]

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.)

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:

  • 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.

Online restaurant ordering form

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 tabs, 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 ordering system:

  1. 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.
  2. Add a product table to each tab. Each table should list the products from the relevant section of the menu.

WooCommerce restaurant order form plugin

3. Encourage customers to leave a tip

Upselling is key to the success of any WooCommerce store, including online restaurant 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.

WordPress expert Chris Lema has come up with a fantastic way for restaurants to take tips using WooCommerce. You could just add the tip as a normal product, or you can use the Name Your Price WordPress plugin to let customers choose the tip amount. Chris’ article provides full instructions, but here’s a quick summary:

  1. Install and activate the Name Your Price plugin.
  2. Add a new ‘Tip’ product. In the ‘Product Attributes’ section, tick the ‘Name Your Price’ box and fill in the extra fields that appear. For example, you might want to add a Suggested Price which customers can change.
  3. 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 this link and add a tip to their order!

4. 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.

WooCommerce restaurant opening hours plugin

A note on 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 online restaurant 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.
  • 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 online restaurant ordering system with your existing kitchen processes.

Take online orders for restaurant chains

So far, we’ve talked about creating a WooCommerce restaurant ordering system for a single location. 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 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:

  1. 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.
  2. 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.

 

Online Chinese takeaway restaurant ordering system

See a WooCommerce restaurant ordering system in action

We’ve created a demo where you can see the online restaurant ordering system in action. Have a play with the search, sort and filter and see how it can use it on your own WooCommerce website.

A fully functional online 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.

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 plugin so that customers can view foods in an interactive list which displays all the relevant information and makes it easy to choose what they want. The list is neatly divided by category, reflecting the subdivisions of your menu: starters, mains, drinks, and so on. Customers are able to use the WooCommerce Product Table 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 WordPress 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 WooCommerce for your own online restaurant 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.

Get the plugin now

WooCommerce Product Table

Create your WooCommerce Restaurant Ordering System today!

BUY PLUGIN