Create a WooCommerce takeaway order form

clem onojeghuo 222411 unsplash

In this article, we’ll look at how to create a WooCommerce takeaway order form. The article focuses on takeaway restaurants but could easily be applied to other types of business that would benefit from an order form in WooCommerce.

Please note: you can find a comprehensive article on WooCommerce restaurant ordering systems here.

Definition of a WooCommerce takeaway order form

A takeaway order form is a single page where your customers can select all the dishes for their meal (a bit like a composite product). The customer can browse each dish without leaving the page, select the ones they want, adjust quantities, then add them all to their cart with one click.

Something like this:

WooCommerce takeaway order form

In this post, we’ll cover:

Accepting takeaway orders on your own website

Takeaway restaurant sign

The advantages of third-party services

First of all though, let’s look at whether you’d actually want to create a takeaway order form on your own site. If you’re running a takeaway restaurant business then you will almost certainly have been approached by the likes of Just Eat, Uber Eats, Deliveroo, etc.

These companies provide a third-party service for restaurant. They’ll load up your menu on their website, handle all the online payments, do all the marketing, and send you the orders through as soon as they’re received on their site. All you have to do is cook and deliver the food.

They help your business because they attract a huge number of users who just have to enter a postcode or zip code to get a list of restaurants that deliver or offer takeouts in the area. If you’re registered with the service, then you’ll get listed too.

The disadvantages of third-party services

Now, all that is great. It’s really convenient and lets you concentrate on your area of expertise. The only drawback is the cost – online food and delivery companies like Just Eat take a hefty wedge of cash from you for their services, which you’d expect – even if you’d prefer not to have to pay it. So although they might make your life easier, they come at a price.

Reasons to accept takeaway orders direct on your own site

So apart from the fact that the likes of Uber Eats and Just Eats are going to eat into your profit, there are other reasons to take orders online direct on your own site.

These include:

  • Cost: for a relatively low initial outlay (less than $100), you can have an online ordering system up and running on your WooCommerce site
  • Feasibility: maybe you’re only just starting to think about offering takeaway or delivery services – offering them direct from your own site without a big initial outlay is a practical, cost-effective way to establish feasibility
  • Brand identity: having your takeaway order form on your own site means you can ensure it fits with your overall brand identity and it’s not subsumed by some giant third-party corporation
  • Competitiveness: if your customers are coming direct to your site to place an order, you’re not jostling for their business against hundreds of other restaurants advertising similar dishes
  • Marketing: if you’re putting money into marketing your restaurant’s website, you don’t want to be directing users to another, third-party site when they want to order food
  • Holistic: by keeping users on your own site to place their orders, you’re able to present your entire business to customers, not just your menu

The benefits to your customers

For your customers, you have the opportunity to create a better purchasing experience for them by allowing them to order direct from your own site:

  • You can provide them with more information about each dish
  • You can provide them with more detail about your restaurant as a whole

What types of food business use takeaway order forms?

A WooCommerce takeaway order form is ideal for businesses like:

  • Pizza delivery restaurants
  • Italian restaurants
  • Kebab shops
  • Burger bars
  • Sandwich shops and lunch bars
  • Commercial catering companies
  • Thai cafes and restaurants
  • Indian takeaways and restaurants
  • Curry houses
  • Chinese takeaways and restaurants
  • Takeaway chicken shops
  • And many more

How to create a WooCommerce takeaway order form

In this section, we’ll go through the process of creating an example takeaway restaurant order form in WooCommerce.

Is WooCommerce the right choice?

Before we get into the nitty gritty of creating the products, let’s take a quick look at whether WooCommerce is the best plugin to be using for your restaurant website.

  • WooCommerce is a great ecommerce plugin – millions of users can’t be wrong.
  • Using it on your restaurant website makes perfect sense because it makes it easy for you to accept payment via debit or credit cards, through PayPal, or even to accept cash on delivery with a fee – which is a common payment method for takeaways and deliveries.

But out of the box, it’s not designed for restaurant order forms. Products each sit on their own page and the user navigates around the site from one product page to the next.

It’s designed for users browsing online stores, not for hungry people who want to order their food fast.

To make it work best for your takeaway restaurant, you need to install a WooCommerce extension called WooCommerce Product Add Ons Ultimate.

WooCommerce Product Add-Ons Ultimate featured image

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

WooCommerce Product Add Ons Ultimate

WooCommerce Product Add Ons Ultimate allows you to add additional fields to a WooCommerce product. The Pro version allows you to add other products as additional fields – it’s this feature we’ll be using to create our takeaway form.

Adding products as ‘child’ products to a single product page means that your customers will be able to browse all your dishes from one page. They can select which dishes to add to their order then click the Add to Cart button to create their order in one click.

Install WooCommerce Product Add Ons Ultimate

So, assuming you already have WooCommerce installed and set up on your site, you’ll need to install and activate WooCommerce Product Add Ons Ultimate.

  1. When you purchase the plugin, you’ll receive an email with a licence key and download link
  2. Download the zip file from the download link and save it somewhere on your computer
  3. In your website dashboard, go to Plugins > Add New then click the ‘Upload Plugin’ button
  4. Upload the zip file and click ‘Install Plugin’
  5. Click ‘Activate Plugin’ and the WooCommerce Product Add Ons Ultimate plugin is activated

Create your products

With WooCommerce Product Add Ons Ultimate installed, you can start to create a product for each dish that you want to offer as part of the takeaway form. Once all products are created, you can create a separate product for the form itself.

You can find out more about creating products in WooCommerce here. But let’s create one as an example, just to make the takeaway process clearer.

Add your first dish

In our example, we’re creating a takeaway form for an oriental restaurant. The first dish that we’re adding is the classic ‘Spring Rolls’:

  1. Go to Products > Add New to create a new product
  2. Enter the title, e.g. ‘Spring Roll’
  3. Enter the price in the Product Data section
  4. Add the product image
  5. Write a short description in the ‘Product short description’ field
  6. If you don’t want this dish to appear as a product in your shop archives, set its status to ‘Hidden’
WooCommerce hidden catalog visibility

Here’s what the product looks like on the front end, once you’ve published it:

woocommerce spring rolls

Note that this is using the Storefront theme – but you can use any theme to achieve this.

Add all your dishes

Now you just need to go through your menu, adding each dish as a separate product. You can add them as simple or variable products, as required.

Adding simple or variable child products

When adding dishes, you can choose between simple and variable products.

If you are using variable child products, they’ll allow the user to select their variation, like this:

WooCommerce variable child product

Create the product for the takeaway form

This is where the clever stuff starts. You need to create a WooCommerce product which will list all your dishes as child products.

  1. Go to Products > Add New
  2. Add your title
  3. Add a price (this can be 0 as the price will be set by the customer’s selection of dishes)

So far, so normal. Now go to the ‘Product Add Ons’ panel in the ‘Product Data’ section:

product add ons tab

This is where we’ll add all our dishes as child products.

Create groups for starters, mains, etc

Depending on your menu, you’ll probably want to organise dishes so that your customers can make their selections more easily.

To do this, click ‘Add Group’.

WooCommerce WooCommerce Product Add Ons Ultimate group

You can enter your ‘Group title’, e.g. ‘Starters/Appetisers’, and an optional ‘Group description’, just to help whet your customers’ appetites.

Add as many new groups as you need.

Finally, set the ‘Display groups as’ parameter to ‘Accordion’ so that the user can easily toggle the visibility of each group. This makes browsing the page much easier, particularly if you have a lot of menu items.

Display groups as setting

Add a child products field

With all your groups created, you need to add one field per group. Each field will list all the dishes that belong to that group – so the field in ‘Starters’ will list all the starters etc.

  • To add a field, click ‘Add Field’
  • Choose ‘Products’ in ‘Field Type’
  • In the ‘Child Products’ field, start typing the names of the dishes you want to add to this group
WooCommerce child products field
  • Choose ‘Column’ in the ‘Products Layout’ field – this will present the child products in a single column
  • Finally, choose ‘Independent’ in the ‘Product Quantities’ field – this will allow the customer to choose as many of each item as they wish

This is what the WooCommerce takeaway order form will look like on the front end:

WooCommerce takeaway order form - front end

Note that each product has a separate quantity field. The customer can it to their order by adjusting the quantity or just clicking the ‘Add’ button.

When they’ve added all their dishes, they click the main ‘Add to cart’ button at the bottom and proceed to checkout, just like any other WooCommerce order.

Receiving the order

When someone places an order using your takeaway order form, you receive a standard WooCommerce email, listing all the products in the order, just like you would for any other type of product.

You can also view the details of the order in the backend, e.g.:

WooCommerce takeaway order form in the backend

And that is how you create a WooCommerce takeaway order form.

Buy WooCommerce Product Add Ons Ultimate

I hope you’ve found this article useful. Building a WooCommerce takeaway order form on your own site can potentially save you money, help you establish the feasibility of your online takeaway business, and provide your customers with a better experience.

If you’re interested in this article, you might also be interesting in learning how to create a pizza builder in WooCommerce.

All you need to get started is the WooCommerce Product Add Ons Ultimate plugin.

WooCommerce Product Add-Ons Ultimate featured image

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

Leave a Reply

Your email address will not be published. All fields are required.