Tutorial: Create a WooCommerce Online Food Ordering System for a Restaurant

Online food ordering systemA online food ordering system 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 a restaurant online ordering system with no technical expertise.

I’ll show you how to use WooCommerce and WooCommerce Product Table plugins to create a one-page online food ordering system. You can use this for 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 than Just Eat?

Just Eat is by far the market leader in restaurant online ordering. By listing your food on Just Eat, you have access to a huge market of potential 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 all the other fast food businesses on the site.

Online fast food ordering system

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 facility with no technical expertise, and almost no 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 – $49.
  • 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 food 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 you receive a lot of restaurant orders online then you can save more money by using a different payment provider such as Stripe, with lower fees.

As you can see, this is much cheaper 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 web design service is perfect for restaurants.

Since this tutorial is aimed at non-coders, I recommend that you use a WooCommerce-ready theme for your website. My screenshots were all created using Storefront, 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 that are 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.

Online food delivery system integrated with kitchen

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 restaurant online 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 it will form the core of your restaurant ordering system.

1a. How to install WooCommerce

  1. Log into the WordPress admin for your website.
  2. Go to Plugins > Add New.
  3. Search for ‘WooCommerce‘, 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 food delivery 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 menu

Online food ordering WooCommerce categoriesMost 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 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 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 menu as a separate product in WooCommerce so that customers can order them online.

In the WordPress admin, go to Products > Add New. Add the information highlighted in the screenshot below:

  1. Title – The name of the dish, as you wish it to appear on the online food order form.
  2. 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.
  3. Product Data – In the Product Data section, choose your product type from the dropdown list. If you only offer 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.
  4. 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 if you will be letting customers click through to a single page for each dish then your WordPress theme will probably display the short description at the top and the long description lower down the page. If you’re only having a one-page takeaway order form without individual 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 food ordering systems would have 1 category for each dish, just like a paper menu.)
  6. Product Image – Click ‘Add Featured Image’ and upload a good quality image of the dish. 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 food delivery order form will have small images 100 pixels wide then there’s no need to add anything bigger.
  7. Publish – Click the blue ‘Publish’ button to add the meal to your website.

WooCommerce add new product

1d. Add product attributes, if required

Lots of online restaurant menus include extra information about each food. For example you may wish to mark certain dishes as healthy, vegetarian, vegan or gluten free.

There are 2 easy ways to do this – tags or product attributes. Think carefully about which one is most appropriate for the information about your foods.

Tags

Product tagsTags can be displayed as a single column in your restaurant online order form. They should be used for repeatable information that applies to more than one dish on your restaurant menu.

For example if a product 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 if you have already entered ‘gluten free’ for a different item on your menu, 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 food delivery order form. Use them to record data that is needed for most of your dishes, for example calorie count. Product attributes can be displayed as static data about a meal (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 your meals, 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 dish, ticking ‘Visible on the product page‘ will display the attribute on that page as well as the order form.
  6. To allow customers to select an attribute (e.g. choose the meal 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 product attributes food delivery ordering system

1e. Add product variations, if required

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.

  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

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 food delivery postage costs.

1g. Set the area you will deliver food to

Nearly all online restaurant ordering systems have a defined range of postcodes or zip codes they will delivery to. You can restrict your delivery area using the Postcode Based Order Restriction for WooCommerce free WordPress plugin.

  1. In the WordPress admin, go to Plugins > Add New.
  2. Search for ‘Postcode Based Order Restriction for WooCommerce‘, install and activate the plugin.
  3. Go to WooCommerce > Settings > General > Postcode Based Order Restriction.
  4. Enable postcode based order restriction and enter the postcodes or zip codes you will deliver to.

Online food ordering system delivery areas

If a customer from the wrong zip code area tries to place an order, a message that they’re outside your delivery area will appear at the top of the checkout.

Tip: To make your online food 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 your main navigation menu.
  • If your website has a sidebar (right or left hand column), add a prominent widget listing your delivery postcodes. Or even better, add a custom Google map showing your delivery area.

1h. Configure your email notifications

WooCommerce will email you (the administrator) and the customer whenever an order is placed. Go to WooCommerce > Settings > Emails and configure these emails as needed.

2. Create a one-page order form for your online food ordering system

By now you’ve set up WooCommerce, divided your e-commerce online shop into the sections on your menu and added your meals. 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 delivery orders.

Your customers can search, sort and filter the list to find the dishes they want. They can choose their variations, select the quantity and add meals to their cart directly from the order form page. When they’ve finished adding dishes 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 https://barn2.co.uk/wordpress-products/woocommerce-product-table.
  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.

2b. Create a page for your restaurant online 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 products 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 interactive order form listing all the foods in the category you selected.

The list of products 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 food ordering system for your restaurant.

2d. Configure how the product table works

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 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”]

These shortcodes may not suit you perfectly. Here are links to the options that are most relevant for a restaurant online order form:

  • Columns – List the exact columns that you want to include in the table. A restaurant 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 your foods online. The documentation tells you how to rename the column headers if you want to.
  • Sort by – By default, your foods will be 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. You might even want to sort by popularity or rating. You can also choose the sort order.
  • Show Quantity – If you want to let customers select how many of each dish they wish to add to the cart, set this to ‘true’. This will add a quantity selector next to the ‘Add to Cart’ button. Otherwise they’ll only be able to add meals to their cart one at a time.
  • Variations – Set this to ‘true’ if you want customers to be able to select product variations before adding to the cart. You’ll need this if you want customers to choose between different options for a dish (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 if you want to show the full text of the description. You’ll want to do this if you’re not letting customers click through to a separate page for each product.
  • Image Size – This lets you set the size of the image of each meal that appears on the order form, if you’re displaying the ‘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 product. This lets customers add multiple products to the WooCommerce cart.

2e. Add product tables for your other menu categories

When you’re happy with the list of products 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 order form

Order management for your online food ordering system

There are many ways to manage the online orders that your restaurant receives in WooCommerce:

  • When you receive an order, you will receive an email notification from WooCommerce. Your kitchen staff could 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 an order is received.
  • You can integrate your WooCommerce food ordering system with a GPRS printer. This will automatically print new food delivery 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 orders with your existing kitchen processes.

Online Chinese takeaway ordering system

See a WooCommerce food 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 food ordering system.

Customers can view your 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, they can choose the quantity of each dish and they can add to the cart 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 food 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!