Creating a seamless food ordering experience with WooCommerce

If you're looking to create a food delivery or takeaway service for your restaurant, WooCommerce for restaurants is a great solution. With a WordPress food delivery plugin and WooCommerce, setting up an online ordering system on your website is easy. Keep reading to learn how you can implement WooCommerce for restaurants and create a seamless online ordering experience for your customers.

In this tutorial, we'll be focusing on how to create a restaurant ordering system using WooCommerce for restaurants. Restaurants can greatly benefit from having an online food ordering system because:

Whether you're a seasoned WooCommerce user or just starting out, this free tutorial will guide you through the process of setting up a restaurant ordering system step by step. By the end, you will have a fully functional online food ordering system. It will allow customers to place their orders, select their pickup or delivery options, and make payments securely.

And the best part?

Your WooCommerce for restaurants ordering system will be 100% yours. You own your data, and you get to keep 100% of your profits.

Sound good? Let’s get started!

Why a WooCommerce for restaurants plugin is the best (and cheapest) way to take food orders online

Before we dive into the tutorial, let's look at why a WooCommerce food plugin for restaurants is the best option for taking food orders online.

Many restaurants use hosted third-party services like Just Eat, Uber Eats, Deliveroo and Grubhub. By listing your restaurant with these platforms, you have access to a huge market of potential online food delivery customers. However, it’s not ideal for everyone.

Hosted platforms take a big cut of the revenue from your online restaurant orders. For example, Just Eat takes 14% at the time of writing. Whilst they have a massive user base, you're competing with other restaurants on the same platform, so it's easy for your restaurant to get lost.

As with any hosted system, you don't have full control over your customer data. You have no control over the functionality of your online restaurant ordering system - you can't customize it or add new features.

If you’re looking for a low-cost Just Eat alternative without the fees, this tutorial will teach how you to create a bespoke online food ordering system.

We'll do it using a WordPress food delivery plugin. This means that you don't have to worry about the problems of affiliating to a third-party platform. In addition, having a WooCommerce for restaurants food ordering system on your main restaurant website will make your business appear more professional. It encourages customers to spend more time on your site, building loyalty.

What will my WooCommerce for restaurants ordering system cost?

There are financial advantages to getting a WordPress site for your restaurant. Almost all of the costs are fixed one-off, upfront fees. As a result, rather than losing a percentage of every sale, the benefit improves with every order you receive. You start saving money almost immediately.

These are the costs of building the food ordering website described in this tutorial:

• WordPress content management system – free of charge.
• WooCommerce plugin – free of charge.
• WooCommerce Restaurant Ordering plugin.
• WordPress theme – free of charge (you could buy a premium WooCommerce restaurant theme for ~$65, but this tutorial will show you how to add the best online ordering for restaurants website using a free theme).
• Ongoing web hosting – web hosting comes at all different price points to suit any size of business. We recommend Kinsta's premium WordPress hosting which is ideal for an ecommerce website with an online restaurant ordering system. For lower budgets, SiteGround is also good.
• Payment processor fees – if offer online payment methods (which isn’t essential) then your payment gateway will take a percentage of the fees. This is normally a few percent - much cheaper than Just Eat’s 14%.

As you can see, setting up a WordPress food delivery system plugin yourself is far cheaper than using a third-party platform such as Just Eat.

Still not convinced? Let me show you how simple it is to set up a WooCommerce for restaurants ordering system.

Should I create a DIY WordPress food delivery website, or hire a developer?

Below, I'm going to tell you how to create a WooCommerce for restaurants ordering website using a simple WordPress food delivery system plugin. This is a great option and you don't need any technical know-how.

If you'd rather have someone else set up the website for you, just forward this tutorial to any WordPress developer.

To build your own WooCommerce for restaurant order system, keep reading and I'll show you how.

How to create a WooCommerce for restaurant ordering website

In this video tutorial, you can watch me create a restaurant online food ordering system. Build yours alongside me, or read the written tutorial below.

The following tutorial covers every step of setting up a WooCommerce restaurant website:

1. Create a WordPress websiteWordPress is the world's web building platform. It powers your overall website and makes it easy to add pages and edit content.
2. Install WooCommerceWooCommerce is the world’s top e-commerce platform, powering over 41% of online stores. We'll use WooCommerce to add products and categories, take payments online (including PayPal and credit card), and add delivery and collection.
3. Install WooCommerce Restaurant OrderingThis plugin converts your WooCommerce store into a fully-fledged food ordering system, displaying your products in a user-friendly one-page restaurant ordering system so that customers can browse, pick, and customize their orders. It also lets you set opening times and prevent ordering when you're closed.
4. Add options to your food productsI'll show you 2 easy ways to add extra options for your food items, such as size choices or selling pizza toppings.
5. Delivery and collectionWe'll discover how to add a range of delivery and collection options.
6. Bonus tipsFinally, I'll share some extra tips on perfecting your WooCommerce restaurant ordering system. This includes accepting tips online to increase your average order value; selling discounted meal deals; and online ordering for multiple restaurant chains.

1. Create a WordPress website

This tutorial assumes that you already have a WordPress website for your restaurant. If not, 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 WP theme from the makers of WooCommerce. If you prefer, then you can use a WooCommerce restaurant theme such as Delicio.

2. Install and set up WooCommerce

Once you’ve got a WP website with a WooCommerce-ready theme installed, it's time to install WooCommerce. This will be the core of your online restaurant food ordering system and the basis for installing your WordPress food delivery system plugin, providing behind-the-scenes e-commerce features such as the shopping cart, checkout, and online payments.

However, we won’t be using Woo to display your food menu items. You’ll need WooCommerce Restaurant Ordering for that, which we’ll cover in Step 3.

2a. How to install WooCommerce

1. Log into the WordPress dashboard 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, tax details, etc. (Ignore shipping as we'll do this in step 5). Tell the wizard to create the basic pages needed for WooCommerce such as Shop, Cart, and Checkout.
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 staff or delivery drivers can take payment instead. To take credit/debit card payments without PayPal, then select 'Stripe' and follow the onscreen instructions.

2b. Create product categories for your restaurant menu

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 online menu. Add a Name and Slug, plus a description if you want to display some introductory text for the category on the food order form.
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.

2c. Add each dish or meal as a WooCommerce product

Next, add each food from your restaurant menu as a WooCommerce product.

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

1. Title – The name of the dish to appear in the online restaurant ordering system.
2. Long Description (optional) – This can appear in the lightbox popup for each food (if you enable lightboxes in step 3). It's ideal for listing allergens and nutritional information.
3. Product Data – Choose a product type. If your restaurant only offers 1 version of the dish then choose 'Simple Product' and add the price. If you offer choices (e.g. Small, Medium, and Large), choose 'Variable Product' and add the remaining information in step 4.
4. Product Short Description (optional) – Use this to display extra information about the meal. This can appear on your one-page restaurant order form. It's a good place to list nutritional symbols, such as "GF, VG" for a dish that is Gluten Free and Vegan.
5. Product Categories – Tick the menu category that the food should appear in. (WooCommerce lets you select multiple categories but most online restaurant ordering systems would have 1 category for each food, just like a printed menu.)
6. Product Image (optional) – Click 'Add Featured Image' and upload a picture of the food. Restaurant food photography is a skill and it’s worth getting this done professionally. If your online restaurant order form will have small images then keep the file sizes small.
7. Publish – Click the blue 'Publish' button.

3. Install WooCommerce Restaurant Ordering

By now you've set up WooCommerce, added your dishes and structured them into the sections on your restaurant menu. Next, it's time to create a one-page food order form so that hungry customers can quickly build their meals and order online.

We'll do this using the powerful WooCommerce Restaurant Ordering plugin. WooCommerce provides its own layouts but they're not suitable for an online food ordering system. As a WordPress food delivery plugin, WooCommerce for Restaurant Ordering lists your menu in a one-page order form which is perfect for food ordering.

3a. Install WooCommerce Restaurant Ordering

1. Buy the WooCommerce Restaurant Ordering plugin.
2. Download the plugin files and copy your license key from the order confirmation page or email.
3. In the WordPress admin, go to Plugins → Add New → Upload.
4. Upload the zip file for WooCommerce Restaurant Ordering and activate the plugin.
5. Go to WooCommerce → Settings → Restaurant and enter your license key. Here, you can also choose the default settings for your restaurant food order forms. Use these to configure the order forms. Also add opening times so that people can only order food while you're open.

3b. View your restaurant ordering page

When you activated WooCommerce Restaurant Ordering, the plugin automatically created a one-page food ordering system for you. This lists all your food products, divided by category.

Find the page under the Pages section of the WordPress admin, and see how it looks!

Next, you need an easy way for customers to review and complete their restaurant orders. The best way to do this is to install the WooCommerce Fast Cart plugin. This adds a floating cart popup so that customers can make changes, enter their details and check out without leaving the page. It's really flexible and you can choose whether to open the popup automatically as soon as customers add foods to their order or to display a clickable floating cart icon instead. 

2c. Create more food order forms (optional)

So far, you've learned how to use the default restaurant ordering page, which lists all your foods by category. If you need more flexibility, then you can also create food order forms individually.

You can do this by adding a [restaurant_ordering] shortcode anywhere on your site. Use the shortcode options to choose which categories to include, and customize the settings. This might be useful if:

• You're listing foods on more than one page of your website, for example with one page per category.
• You'd like to use different settings for each food order form, such as showing images or descriptions for some categories and not others.

4. Add options to your food products

If you only offer 1 version of each dish, you can ignore this section. If you want to give customers a choice – for example to choose a size or select pizza toppings – then you need product variations or add-ons.

Variable products are built into WooCommerce. You can list each type of variation as a dropdown list alongside each product in your online restaurant ordering system. Customers can select 1 variation from each list.

If you want customers to be able to make multiple selections, then you need add-ons instead. You can add more flexible options with the WooCommerce Product Options plugin. It works perfectly with WooCommerce Restaurant Ordering 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 Options 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 options. You can use them separately or together in your WooCommerce restaurant ordering system.

Adding product variations

1. Select 'Variable product' in the 'Product Data' section of the 'Add/Edit Product' page.
2. Go to the 'Attributes' tab, add the product information that customers will be choosing between, and tick 'Used for variations'.
   

   

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'. When customers click on food in the restaurant order form, they can choose the variations from a lightbox before adding it to the cart.

How to create Product Add-Ons

1. Buy, install, and activate the WooCommerce Product Options plugin.
2. Go to Products → Product Options in the WordPress admin.
3. Add as many options as you like, structured into groups.
4. When customers click on a food product in your WooCommerce restaurant order form, the add-ons will appear for them to select in a lightbox.

5. Set up delivery, collection and delivery time slots

WooCommerce offers lots of delivery options, which are perfect for restaurants. The free WooCommerce plugin lets you set up delivery areas and delivery or collection options. You can also use an additional plugin to let customers choose a specific delivery time or collection slot.

5a. Delivery areas and options

You can find these in the WooCommerce → Settings → Shipping section of the WordPress admin.

Here are some suggested shipping options that are useful for online restaurant ordering:

• Shipping zonesCreate one or more shipping zones for your different delivery areas. For example, if you offer free shipping for certain zip codes and charge for delivery in other areas, then set up 2 shipping zones. If you also offer collection, add a third shipping zone so that people can 'click and collect' wherever they live.
• Shipping optionsAdd one or more delivery options for each shipping zone. For example, your 'Local Delivery Area' shipping zone might have a 'Free Delivery' option for orders over $20, a $5 'Flat Rate' option for lower value orders, and a 'Local Pickup' option for customers wishing to collect their takeout meal.

Let customers check the delivery area before they start ordering

To make your online restaurant ordering system more user-friendly, I recommend adding details of your delivery area elsewhere on your site. Here are some ideas on how you can do this:

• Add a 'Delivery Area' page to your restaurant website.
• If your website has a sidebar (right or left column), add a widget about your restaurant's delivery area. Or even better, add a custom Google map showing your online food delivery area.
• Install the Woo Delivery Area Pro plugin so that customers can check they're in your delivery area before they start building their meal.

5b. Delivery time slots

Some restaurants like to deliver their online orders as soon as they're ready. Others let customers order in advance and choose a specific time slot. As a restaurant, you might want to take up to 5 online food orders in each half-hour period, and make sure they order at least 15 minutes in advance of their time slot. You can do this with the WooCommerce Opening Hours & Chosen Times plugin.

This excellent plugin lets customers choose a delivery date and time slot, subject to your restaurant's opening hours and capacity. You can restrict the number of bookings per time slot. You can specify how long customers must place their orders before their time slot, giving the kitchen plenty of time to prepare the meal.

6. Bonus tips

Before we finish, I'll share some more top tips for perfecting your WooCommerce restaurant ordering system. You'll learn how to accept tips online, sell meal deals, and more. If you operate a chain of restaurants, then you'll also learn how to adapt this tutorial to set up the best online ordering for restaurants for multiple sites.

Encourage customers to leave a tip

All over the world, restaurant customers expect to leave a tip. Don't miss out just because you're selling online! You can add tipping to your WooCommerce restaurant website using the WooCommerce Donation Or Tip On Cart And Checkout plugin.

This handy plugin adds a 'Tip' field to the WooCommerce checkout page. Customers can enter the value of their tip, significantly increasing your average order value.

Most restaurant customers add a tip of 10-15% of the total order value, depending on your country. Use the plugin to set a default tip as a percentage of the order value. To encourage bigger tips, set the default tip at the upper end of the usual amount in your country. Customers can then override the suggested tip as required.

Manage your delivery drivers

Most WooCommerce restaurant ordering systems use local drivers to deliver the orders.

You can manage your delivery drivers outside of the website. Alternatively, you can save time with the free Delivery Drivers for WooCommerce plugin. This WordPress plugin automates many of the manual tasks, connecting your drivers with your online systems and the customer.

Sell restaurant meal deals

Lots of WooCommerce for restaurants websites provide special offers and meal deals. These are fantastic incentives to encourage customers to buy more.

Use WooCommerce for restaurants ordering with the Quantity Manager plugin to control how many items customers can buy from each category. For example, you might sell a meal deal for two people where they can buy 2 starters, 2 mains, and spend up to $15 on side dishes.

You can also use the official WooCommerce Dynamic Pricing plugin to create restaurant deals and special offers. For example, you can create buy one get one free (BOGOF) meal deals, or buy one pizza and get 50% off your second one. These deals can be global or specific to a category, so you can offer deals on pizzas or sandwiches while keeping the side dishes and desserts at full price, and so on.

Mobile ordering for restaurants

WooCommerce doesn't come with a mobile app for customers to order via their smartphones. However, most WordPress themes are fully responsive, which means they're mobile-friendly and look great on any device.

This means that your customers can view your foods and order from your restaurant online using their device of choice - no need to worry about setting up a separate mobile app!

Managing orders in your WooCommerce for restaurants' food ordering system

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

Email notification of new restaurant orders

When you receive an order, you will receive an email notification from WooCommerce. Your kitchen staff can monitor this email address and be notified as soon as an order arrives.

If you have a busy restaurant with many online orders, then 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.

WooCommerce for restaurants mobile app

The official WooCommerce iOS mobile app lets you view and manage restaurant orders from any Apple iPhone or iPad. It's often more convenient for restaurant owners and staff to use mobiles or tablets than desktop computers.

Auto-print new food orders to the kitchen

You can integrate your WooCommerce for restaurants' food ordering system with a GPRS printer. This will automatically print new online restaurant orders as soon as they're received. We recommend the WooCommerce Automatic Order Printing plugin.

Receive an alert when you receive a WooCommerce for restaurants order

Use YITH WooCommerce Desktop Notifications to automatically play a sound alert on your desktop computer, laptop, or tablet whenever you receive a new order.

If you'd rather receive a text when you receive a new order from your WooCommerce for restaurant website, try the SMS Alert Order Notifications plugin. You can also use the Twilio SMS Notifications plugin to send the customer a text when their order is ready.

WooCommerce can be integrated with many external systems. If you're using a specific system to manage your restaurant orders, look up how this can be integrated with WooCommerce.

Think creatively and you'll be surprised how easy it is to integrate your WooCommerce for restaurant ordering system with your existing kitchen processes.

Online ordering for multiple restaurants

So far, we've talked about creating a WooCommerce restaurant ordering system for a single location, using a WordPress food delivery plugin. With a couple of tweaks, you can extend this to take orders for multiple restaurants or entire restaurant chains. There are 2 ways to achieve this:

Method 1 – WordPress multisite, with a separate site for each restaurant

You may want to keep your WooCommerce for restaurants really separate, with unique content for each one (e.g. a different homepage, about page and contact us). If so, you can use WordPress multisite to create a separate sub-site for each restaurant in the chain. This is better than having completely separate websites because you get the best of both worlds: a single WordPress food delivery plugin installation with shared hosting and maintenance costs; with unique content for each restaurant.

WooCommerce for restaurant ordering will be active on each site. However, each site will have its own set of products and order notification settings, avoiding any crossover.

WPBeginner has an excellent article on How to install and set up WordPress Multisite Network. This is compatible with all the steps in the above tutorial.

Method 2 – Single website, with separate categories & order notifications for each restaurant

A simpler option is to take orders for each restaurant from your main WordPress website. There are two ways you can do this:

• Create separate product categories for each restaurant. On the online food ordering system page for each restaurant, use WooCommerce Restaurant Ordering to list products from the appropriate categories.
• Alternatively, use either the official Product Vendors add-on or the Dokan Multivendor plugin to add products from multiple vendors (treat each restaurant as a separate vendor). Each vendor has their own product categories. Enable the 'Category pages' option in WooCommerce Restaurant Ordering and the beautiful food order form layout will be used for each vendor's products.

Whichever method you choose, you can use the WooCommerce Multiple Email Recipients Notifications plugin to send order notifications to a different email address depending on which category the customer has ordered from. This lets you ensure that the new order emails are sent to the correct restaurant. As a result, your entire WooCommerce restaurant online  food ordering system remains on a single website - while taking orders from multiple restaurants.

Case study: Online Ordering for Ciao Italia

Ciao Italia is an Italian restaurant in the US that started offering curbside pickup to its customers during the COVID-19 pandemic. They use our WooCommerce Restaurant Ordering plugin to let customers place their orders online from home.

The restaurant displays its entire menu (including food, beverages, and a gift card) on a one-page order form. It does this by sorting the food items under different categories and displaying all of the categories on the menu page. Customers can simply click the (+) icon to add food items to the cart. When a customer adds an item to their cart, they see additional purchasing options in a lightbox.

For example, you can use the lightbox to choose the quantity of food or beverages. If you're buying a gift card, then you can choose the value in any denomination. (Tip: They sell gift cards using the 'Customer Defined Price' option in the Product Add-Ons plugin.)

The one-page food order form makes it quick and easy for customers to place their orders and proceed to the checkout page.

Adam Tracksler from Bryce Creative developed the website. He was delighted with WooCommerce Restaurant Ordering:

Want to set up online ordering for your restaurant in 15 minutes?

And there you have it! If you follow all the steps in this tutorial then you can create a complete online food ordering system with an easy-to-use WordPress food delivery plugin.

You've learned how to install and set up the WooCommerce platform to handle all of your menu's food products. You've also seen how you can use the WooCommerce Restaurant Ordering plugin to create customizable food order forms. Customers can choose their selections from each customer, and then place their order and pay online.

By using a WordPress food delivery plugin and WooCommerce as an alternative to Just Eat or other systems, your restaurant can save many thousands of dollars or pounds. It's easy to set up, easy to manage and will look really professional.

Get WooCommerce Restaurant Ordering here, and start selling food online TODAY →