Tutorial: Create a WooCommerce Restaurant Ordering System to Order Food Online
An online restaurant ordering system is a must for any fast food delivery or takeaway website. 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.
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. These are perfect options because WooCommerce is the world’s leading e-commerce platform, powering over 41% of all online stores worldwide (including restaurant websites). You can use it on any WordPress website.
In this video tutorial, you can watch me create an online food ordering system for a pizza restaurant. Build yours alongside me, or continue reading 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. While Just Eat is very widely used, there’s also a chance that your restaurant will get lost among all the other fast food businesses.
Restaurants wanting a cheaper alternative to Just Eat can benefit from a WordPress WooCommerce website with online food ordering system. You can set up your restaurant ordering system with no technical expertise, and almost no cost.
What will my restaurant ordering system cost?
You can 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.
- Postcode Based Order Restriction for WooCommerce plugin – free of charge.
- WooCommerce Product Table plugin – currently $75.
- WordPress theme – free of charge (you can buy a premium WooCommerce theme for approx $65 but this tutorial will show you how to add online ordering to your restaurant website using a free theme).
- Ongoing web hosting – there are many hosts for all different price ranges. 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 per cent – 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.
As you can see, this is much cheaper for restaurants than taking online food orders via Just Eat. Next, I’ll show you how to set up your restaurant ordering system using this method.
Before you start
This tutorial assumes that you already have a WordPress website. If you don’t already have a WordPress site, there are loads of online resources to help you get started with WordPress. Alternatively, contact us for a quote for your restaurant website design. Our affordable WooCommerce web design service is perfect for restaurants.
Since this tutorial is aimed at non-coders, I recommend using a WooCommerce-ready theme for the design of your website. My screenshots were all created using Storefront. This is a high quality free WordPress theme by the makers of WooCommerce. If you don’t like the design of Storefront, you can install one of its many child themes. There’s even a deli theme and a bistro theme ideal for a restaurant online food ordering system.
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.
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:
- Set up WooCommerce
- Create a one-page order form for your online restaurant ordering system
- Encourage customers to leave a tip
- Mobile ordering for restaurants
- Managing orders
1. Set up WooCommerce
WooCommerce is the world’s leading e-commerce platform, powering over 34% of ALL online shops worldwide. This will power your online restaurant food ordering system, providing the e-commerce features such as the shopping cart, checkout and online payments.
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.
1a. How to install WooCommerce
- Log into the WordPress admin for your website.
- Go to Plugins > Add New.
- Search for ‘WooCommerce‘, 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 – whether it’s a fast food or takeaway menu or other type of restaurant. Typically, your menu might be divided into Starters, Main Courses, Desserts, Kids Menu, Drinks and Side Orders.
You need to create a separate WooCommerce product category for each section of your restaurant menu:
- Look at how your online 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 for your menu will appear in a list on the right hand side of the page.
1c. Add each food or meal as a WooCommerce product
Next, you need to add each dish from your restaurant menu as a separate product in WooCommerce. This will allow customers to order each dish online.
In the WordPress admin, go to Products > Add New. Add the information highlighted in the screenshot below:
- Title – The name of the dish, as you wish it to appear in the online restaurant ordering system.
- Long Description (optional) – A longer description of the dish. This can appear on your WooCommerce order form, or people can click through to read more information about each food including the description.
- Product Data – In the Product Data section, 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 in the box below. 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) – Fill in the short description if you want to display extra information about the meal, separately to the long description. For example, you might want to let customers click through to a single page for each dish. If you do this, your WordPress theme will probably display the short description at the top and the long description lower down the page. If you’re creating a one-page restaurant order form without individual pages for each food then you probably don’t need a short description.
- 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 paper menu.)
- Product Image – Click ‘Add Featured Image’ and upload a good quality image of the food. Restaurant food photography is a real skill and it’s worth getting this done professionally as it will make a huge difference to your online sales. It’s worth spending some time finding out the optimal size image to upload. Don’t upload huge images from your digital camera as this will slow down your website. If your online restaurant delivery order form will have small images 100 pixels wide then there’s no need to add anything bigger.
- Publish – Click the blue ‘Publish’ button to add the food to your website.
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.
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 Health, 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 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.
- 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‘.
1f. Online food delivery shipping costs
WooCommerce offers lots of different 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 postcode areas.
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.
1g. Set the area your restaurant can deliver food to
Nearly all online restaurant ordering systems have a defined range of postcodes or zip codes they will deliver to. You can restrict your food delivery area using the Postcode Based Order Restriction for WooCommerce free WordPress plugin.
- In the WordPress admin, go to Plugins > Add New.
- Search for ‘Postcode Based Order Restriction for WooCommerce‘, install and activate the plugin.
- Go to WooCommerce > Settings > General > Postcode Based Order Restriction.
- Enable postcode based order restriction and enter the postcodes or zip codes you will deliver to.
If a customer from the wrong zip code area tries to place an order, a message that they’re outside your restaurant delivery area will appear at the top of the checkout.
Tip: To make your online restaurant ordering system more user-friendly, I recommend adding details of your delivery area elsewhere on your site. This 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.
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 foods. 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 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 order 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, 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 https://barn2.co.uk/wordpress-plugins/woocommerce-product-table.
- 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.
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
WooCommerce Product Table 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 uses typical options for a restaurant online food menu:
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 the options that are most relevant for an online restaurant order 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 – this is essential to letting customers order foods online. The documentation tells you how to rename the column headers if you want to.
- Sort by – By default, foods are listed in reverse date order based on when you added them to the website. You’ll probably want to sort alphabetically or by price instead. Maybe you’d rather sort by popularity or rating. You can also choose the sort order.
- Show Quantity – Set this to “true” to let customers select the quantity of each food 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 foods 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).
- 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.
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, and here’s a quick summary:
- Install and activate the Name Your Price plugin.
- 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.
- 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!
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 mobiles.
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.
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.
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 categories of your offline menu. Customers can sort, filter and search the list of foods. They can select variations, 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, your restaurant can save many thousands of pounds as an alternative to Just Eat or other systems. It’s easy to set up, easy to manage and will look really professional.
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 13% commission for recommending it!