Create a Restaurant Ordering System – Start Selling Online in the Coronavirus Lockdown
Across the globe, millions of restaurants have shut their doors to fight the COVID-19 coronavirus infection. In most countries, restaurants can still sell takeaway food. If you don’t already have a restaurant ordering system, then you’ll want to start selling online straight away. Online takeaway ordering will help your restaurant to survive the coronavirus crisis, providing essential food supplies during the lockdown.
If you’re reading this, then you’re probably looking for a fast way for your restaurant to start selling food online – either for home delivery or local collection. I’m going to show you how to make a food ordering website. You’ll learn how to create an online ordering system for a restaurant, complete with food order form and delivery slots.
It will look something like this:
We’ll do it using WordPress, the world’s leading open source content management system. This gives you full control over your food ordering system. Don’t worry if you have never set up a website before. You don’t need any technical know-how – I’ll provide step-by-step written instructions, plus a video tutorial where you can watch me setting it all up in just 50 minutes!
What you’ll need to set up restaurant online ordering
We’ll build the online takeaway ordering system with some of the best tools available:
- WordPress (free) The world’s leading content management system. This gives you full control over the content of your website. You can create pages, add images and more – all without writing a single line of code.
- WooCommerce (free) The world’s most popular e-commerce platform. Adding WooCommerce converts your WordPress site into a fully featured restaurant e-commerce website. You can add products, set delivery areas and costs, take payment online, and more.
- Kinsta (paid) All websites need to be made available on the website. Kinsta is our recommended web hosting company, and will keep your website online and running smoothly. (If you’d rather choose your own hosting company, that’s fine – everything in this tutorial works with any web host.)
- WooCommerce Product Table (paid) An online restaurant ordering system works best when the foods are listed in a quick one-page order form layout. You need the WooCommerce Product Table plugin for that.
- WooCommerce Delivery Slots (paid) This plugin lets customers choose a food delivery date and time slot, ensuring that all online orders are within your restaurant’s opening hours and capacity.
There are many reasons why WordPress – used alongside the plugins I’ve mentioned – is the best restaurant online ordering platform:
- Save money – If you use a hosted third party takeaway ordering system such as Uber Eats and Just Eat, you’re charged a hefty percentage in commission from EVERY food oder. This adds up to many thousands of dollars before long. By hosting your own food delivery website, you pay a small amount in hosting and software costs, but this is far less than hosted solutions, and the base software remains free forever.
- You’re in control – Unlike Uber Eats and Just Eat, you own your restaurant ordering platform. The solution described in this tutorial is an open source food ordering system, making it flexible and future-proof. You can tailor the design to suit your restaurant’s branding, and you own your data – forever.
- Fully featured – As the world’s leading e-commerce platform, WooCommerce comes pre-built with nearly everything you need including online payment (either by PayPal, credit card, or cash on delivery), stock management, sales taxes, delivery costs, and more. If that’s not enough, there are literally thousands of plugins available to add extra features.
- Beginner-friendly – Creating an online ordering system for restaurants sounds scary, but it’s really not! All the tools in this tutorial are ideal for beginners.
Tutorial: Set it up in just 50 minutes
In this video, you can watch me create a fully functional online restaurant ordering system in exactly 50 minutes. There are no steps missed, so watch the video and copy everything I do.
Video contents (fast forward to the sections you need)
- 4:00 – Create the site on your web hosting account
- 6:07 – Set up WooCommerce
- 19:23 – Add your foods as products
- 20:31 – Create food order form(s) with WooCommerce Product Table
- 36:02 – Add delivery areas/zones
- 40:25 – Add food delivery time slots
- 45:51 – Set your website live on a domain name
Can I add food ordering to my existing restaurant website?
If you already have a restaurant website and simply want to add a food ordering system, that’s fine. Just install the free WooCommerce plugin via Plugins → Add New and skip straight to section 2.
1. Set up web hosting and install WordPress
First, you need to create the basic website on a hosting account.
If you don’t already have web hosting sorted out, then I highly recommend Kinsta. They’re a managed WordPress host that makes it incredibly easy to create and maintain your restaurant website. Your food ordering system will be secure and quick to load – essential when you’re selling online.
If you wish to use a different hosting company for your restaurant website, that’s fine. Just use their documentation to create the basic website and install the free WordPress and WooCommerce plugins.
In your Kinsta account, click the ‘Add site’ button and fill in the information as required:
- First, select ‘Install WordPress’.
- Enter the domain name that you plan to use for the website. If you haven’t chosen one yet, just leave this blank. You can set up your restaurant ordering website with Kinsta’s temporary domain name, and I’ll tell you how to get a permanent website address in section 7.
- Name of this site – this will appear in your list of sites on Kinsta.
- Location – choose a location close to you. Your website will load fastest for visitors near to this.
- WordPress site title – this will appear in the top right corner of your website (unless you choose to upload an image logo).
- WordPress admin username, password and email – choose the information that you will use to log into the WordPress Dashboard where you will edit your restaurant website.
- Finally, tick the boxes to install WooCommerce and Yoast SEO, but not multisite.
After that, wait a few minutes for the site to finish completing. You can then click on the ‘Domains’ tab in Kinsta and click on the link to the WordPress Dashboard.
Now your basic website is set up, and it’s time to add the automated restaurant ordering system!
2. Add e-commerce to your restaurant website
Next, it’s time to set up WooCommerce. This is the e-commerce part of your online restaurant ordering system and provides the shopping cart features. For example, the ability to add each item on your food menu as products; take payment online; and charge for shipping and tax.
Click on the ‘Plugins’ link on the left hand side of the WordPress admin. Find the ‘WooCommerce’ plugin and click ‘Activate’.
Next, you’ll be taken into the WooCommerce Setup Wizard. Follow the onscreen instructions to set up the essential parts of your e-commerce facility. Here are some tips on which settings to choose for an online restaurant ordering system?
- Storefront theme – a WordPress theme controls the design and styling of your website, i.e. how it looks. You can use any WordPress theme that supports WooCommerce. If you want to get up and running as quickly as possible and will be happy with a clean, modern and simple design, then I recommend ticking the box to install the Storefront theme. This free WordPress theme is easy to use and will keep your food ordering website lightweight and easy to maintain. If you don’t like the standard Storefront design, then I recommend the Delicio restaurant theme instead.
A website using WooCommerce Product Table with the Delicio theme
- Payment methods – as a minimum, I highly recommend PayPal. Simply enter the email address you use to log into PayPal, and you can take payments online! If you want to take credit card payments without PayPal, then set up a Stripe account and enable the Stripe payment option. For takeaway food ordering, you might also want to enable the ‘Cash on delivery’ option.
- Shipping options – if you’ll be charging for shipping, then enable the Flat Rate shipping and add a shipping cost. Don’t spend too long on this, because we’ll configure this in more detail in step 6, below.
Once you’re finished, click the button to return to the WordPress Dashboard.
3. Add your food menu
The next step is to each food from your paper menu as a WooCommerce product. We’ll do this in 2 stages:
3a. Create categories for your online restaurant menu
You can list the foods in each category separately on your food order form. Most restaurants create a category for each section of their paper menu, for example Starters, Main Courses, Desserts, Kids, Side Dishes, Drinks, etc.
Go to Products → Categories and create as many categories as you like.
3b. Add your foods as WooCommerce products
Next, it’s time to add each food as a product. Go to Products → Add New and complete the information on the Add New Product screen:
- Keep it as simple as possible. The title and price are compulsory, and everything else is optional. I also recommend selecting a category so that you can structure your restaurant ordering system logically. You can add an image, short and long description if you wish to display these in your online food order form.
- You can use product tags to record useful information about your foods. This is useful for displaying health or dietary information such as ‘Gluten Free’, ‘Healthy’, ‘Dairy Free’, ‘Contains Nuts’, ‘Vegan’ or ‘Vegetarian’. Later, I’ll show you how to add filters to the food order form so that customers can view – for example – vegan dishes only.
- If you offer a choice of options for a dish – for example, small and large options for a pizza – then you can do this with product variations:
- Instead of ‘Simple product’ (the default), select ‘Variable product’ from the dropdown at the top of the ‘Product Data’ section.
- Go to the ‘Attributes’ tab and add attributes and some options. For example, you might create a custom ‘Size’ attribute and add the terms ‘Small’ and ‘Large’. For each attribute, tick the ‘Used for variations’ option.
- Now click onto the ‘Variations’ tab. Open the ‘Add variation’ dropdown, select ‘Create variations from all attributes’, and click Ok (ignore the warning that appears). This will create a variation for each combination of attributes that you created in the previous step.
- Open up each variation and add a price.
- Variations appear as dropdown lists in the online food order form. If you’d rather set a base price for each dish and let customers select one or more extras, then you should add these with the Product Add-Ons plugin instead. This lets you add checkboxes to your food order form. For example, if you offer extra sauces or pizza toppings then customers can tick as many as they like. Each option will add to the price of the pizza.
Repeat the process until you’ve finished adding all your foods as products.
4. Create a food order form with WooCommerce Product Table
Now comes the exciting bit! It’s time to see your online restaurant ordering system come to life on the front end of your food delivery website. We’ll need the WooCommerce Product Table plugin for that, so get it now:
4a. Set up WooCommerce Product Table
When you buy WooCommerce Product Table, you’ll receive an email containing a download link and license key.
- Download the zip file, then go to Plugins → Add New in the WordPress admin.
- Upload the WooCommerce Product Table zip file and activate it.
- Click on the ‘Settings’ link next to the WooCommerce Product Table plugin in your list of plugins.
- Enter your license key and activate it.
- Now go through the WooCommerce Product Table settings and configure your food order forms. You can set it up however you like, and here are some options that I particular recommend for a restaurant ordering system:
- Columns – WooCommerce Product Table supports a large number of columns. For a restaurant, you probably want:
image, name, description, tags, price, add-to-cart(remove any you don’t need).
- Product links – type
nonein this box, as most restaurant ordering systems don’t require a separate page for each food.
- Add to cart button – choose ‘Button and checkbox’ or ‘Checkbox’, as most restaurant order forms work best when customers can tick multiple foods and add them to the cart together.
- Quantities – tick this so that customers can order more than one of each food.
- Variations – choose the ‘dropdown’ option if you’ve added any variable food products. This allows customers to select the options from a dropdown list.
- Add selected position – your food order form will be most user-friendly if you display this below each list of foods.
- Product filters – choose ‘Custom fields’ and enter
tagsto add filters for categories and/or tags above the food order form. This makes it easier for customers to narrow down the list to see foods that fit their requirements (e.g. vegan).
- Page length, search box and product totals – these options are designed for product tables listing large numbers of products. They’re usually not relevant for online restaurant ordering systems, so you can set these to ‘Hidden’.
- Reset button – hide this unless you’re using product filters, in which case you need a reset button.
- Columns – WooCommerce Product Table supports a large number of columns. For a restaurant, you probably want:
- When you’ve finished, save your changes.
4b. Create your online food order forms
The next step is to create a page where you’ll list your food menu for online ordering:
- Go to Pages → Add New.
- Add a title to the top of the page.
- Underneath, add the shortcode
[product_table]if you want to list all your foods together, without dividing the food order form into sections. If you’d rather list each category separately with headings in between, then use the shortcode
[product_table category="starters"]– use the category slug that you created in Products → Categories.
4c. Structure your restaurant website
Now you’ve finished creating the food order form, it’s time to incorporate it into the overall structure of the website. This helps customers to find it easily. There are two ways to do this:
- Set it as the homepage – In the WordPress admin, go to Settings → Reading and select the food ordering page as the homepage.
- Add it to the website menu – If you don’t want to use the food ordering page as your homepage, that’s fine. Instead, go to Appearance → Menus and create a navigation menu for your website. Add all the pages that you wish to appear in the menu, such as the food order form, cart, and any other pages you’ve created. Tick the appropriate box at the bottom of the page to set it as your primary menu. These links will appear across the top of the screen, so that visitors can find their way around easily.
4d. Creating more complex navigation structures
I’ve tried to keep this tutorial as simple as possible – for example, just having one food ordering page which lists your entire restaurant menu online. If you’re feeling confident, then you can create more advanced structures. For example:
- On the WooCommerce Product Table plugin settings page, tick the boxes to enable the food order form layout on category pages. You can then direct visitors to the individual category pages, instead of having multiple order forms on the same page.
- Alternatively, you can create as many pages as you like, and add different product table shortcodes to each one. That way, you can split the different parts of the restaurant food ordering system across multiple pages.
5. Set up shipping zones and restaurant delivery areas
When we did the WooCommerce Setup Wizard earlier, we added some basic shipping settings. Let’s build on these next, so that people can only order food for delivery within the correct area.
If you just deliver to a single area, and will charge the same delivery cost to each one, then you only need one shipping zone. If you want to change the delivery cost depending on the area, then you need multiple shipping zones.
- Go to WooCommerce → Settings → Shipping.
- Click ‘Add Shipping Zone’.
- Add a ‘Zone Name’ and select your country under ‘Zone regions’, then click the ‘Limit to specific ZIP/postcodes’.
- Now enter the postcodes or zip codes for this delivery area.
- Next, click ‘Add shipping method’ and add one or more delivery options for this zone. These will appear on the checkout page. The choices are:
- Flat rate – Charge a fixed delivery fee for each order,
- Free shipping – Offer free shipping. If you like, then you can set a minimum order value before free shipping becomes available.
- Local pickup – Allow customers to collect their food order from your restaurant.
- Repeat these steps for each shipping zone.
Tip: As well as restricting the shipping area on the checkout page, avoid disappointing your users by clearly stating your delivery area elsewhere on the site. For example, mention it on the food ordering page.
6. Set opening hours and delivery times with WooCommerce Delivery Slots
All automated restaurant ordering systems need to manage their customers’ expectations around delivery timescales. You can do this with the WooCommerce Delivery Slots plugin.
- When you buy the plugin, you will receive an email containing the plugin download link and license key. Download the plugin and copy the license key to your clipboard.
- Go to Plugins → Add New and upload the plugin, then activate it.
- Next, go to WooCommerce → Delivery Slots and go through the various tabs to configure your delivery dates and time slots. For a food ordering website, you’ll probably want to use the following features:
- Set your opening hours – for example, if you’re closed on Mondays then you can disable delivery slots on Mondays. You can also add time slots (e.g. by the hour or half hour) and opening times.
- Add delivery dates and time slots – add delivery slots that reflect the way you structure your deliveries.
- Enable the ASAP delivery option – lots of customers ordering takeaway food online want their meal to arrive as soon as possible.
- Set a maximum number of deliveries per slot – help to manage kitchen capacity by adding a limit of the number of orders per delivery slot.
Once you’ve set up your time slots, you can also let people reserve a delivery slot before they start choosing their foods. This is an excellent way to avoid disappointment later. To insert a table of available time slots, add the shortcode
[jckwds] to any page (e.g above the food order form).
7. Get a restaurant website address
Now, your restaurant ordering website is complete! The final step is to give it a proper website address/domain name, for example myrestaurant.com.
If you don’t already own a domain name, then you can buy one from any domain name registrar, for example Namecheap or 123-Reg. Once you’ve done that, you can link to your website to your domain name as follows:
- Log into your web hosting account (e.g. at Kinsta), and find the IP address for your website. In Kinsta, this is on the ‘Info’ tab – hover over ‘Site IP address’ and click ‘Copy’.
- Now log into your domain name registrar, and find the Advanced DNS settings.
- Find the root A record (either indicated by a blank, an @ or *) and set it to the IP address where your website is located.
- Back in your web hosting account (e.g. Kinsta), add the domain. The exact process depends on your host, and in Kinsta this is on the ‘Domains’ tab. Add the www and non-www versions of the domain.
- Finally, wait a few hours and your website will go live on the domain! If you can get any problems, ask your web host for help.
8. Launch your finished food ordering website
Finally, it’s time to go live and start taking food orders online. Follow the steps in our go-live checklist, and start promoting your new restaurant online system to the public!
When you receive an order, you’ll receive an email so that you can start preparing the food and get it to the delivery driver. If you want to automate this, there are various WooCommerce SMS notification and WooCommerce cloud printing plugins that you can use to automatically send new food orders to the kitchen.
Create your own restaurant ordering system
The COVID-19 crisis is changing our lives in ways we never thought possible. It has affected all industries, and is making a huge difference to how restaurants must operate in order to survive the coming months. Even if you never offered takeaway services before, this is now a necessity – and automated online ordering can help to ease the pressure.
As you can see, it’s surprisingly easy to create a restaurant ordering system. By building your own food ordering website, you get full control and ownership – and it costs a fraction of the price of third party platforms such as Uber Eats.
To get started, you’ll need:
- WordPress as the overall platform for your website.
- WooCommerce for the e-commerce features.
- Kinsta to host your website.
- WooCommerce Product Table for the one-page food order form.
- WooCommerce Delivery Slots for delivery rules and time slots.
Follow the steps in this tutorial to set everything up, and start accepting online food delivery orders today.