If you run a restaurant, cafe, bakery, or food delivery business, having an online restaurant ordering page is essential. It’s one of the easiest ways to increase sales and provide a better customer experience.
From a business perspective, it means you don’t have to rely on third-party delivery apps that charge high commissions.
With WooCommerce, creating a professional online restaurant ordering page is affordable and flexible. And, if you’re using the Delicio theme, you’re already starting with a clean, food-focused design that’s perfect for showcasing your menu and creating an enjoyable ordering experience.
In this tutorial, I’ll show you step-by-step how to create an online restaurant ordering page using WordPress and WooCommerce.
Tools we’ll use for the WooCommerce restaurant system
Before we get into the tutorial, let’s take a look at the tools we’ll use:
1. WordPress – I will assume that your website is already built on top of WordPress, so we won’t get into too many details there. However, if you’re new to WordPress and site-building in general, you can quickly create a WordPress site by getting your hosting from SiteGround. We also have an article dedicated to creating a WooCommerce restaurant website from scratch.
2. WooCommerce. Installing this plugin on your WordPress website will give it eCommerce capabilities so that you can start adding your foods and let customers place their orders.
3. Delicio Theme. This is our most popular WordPress theme for restaurants and cafes. It includes full WooCommerce support and a highly-customizable design that can be adapted easily to your brand.
4. Beaver Builder and Beaver Builder Addons. Using these two free WordPress plugins we’ll be able to quickly create a custom ordering page on which you can arrange your restaurant’s menu.
5. WooCommerce Product Table (optional). This is a powerful add-on for WooCommerce that will help you take the ordering page from your website to the next level. It will add special features, such as fast one-page ordering and showing additional details about each dish.
Upgrade Your Website with a Premium WordPress Theme
Find a theme that you love and get a 20% discount at checkout with the FLASH20 code
Choose your theme
How to Create an Online Restaurant Ordering Page
In this section, I’ll show you step-by-step how to create an online restaurant ordering page in WooCommerce. We’ll start by adding food items as WooCommerce products and then set up the online ordering page where they’ll be listed.
Step 1: Add Food Items as WooCommerce Products
In this first step, we’ll have to fill the website with the dishes your restaurant sells.
We’ll add the food items as new products in WooCommerce. Make sure to use quality photos for your products and on your website, in general.
Adding your food in WooCommerce is very simple, and usually, you will have to fill in the following details: Featured Image, Description, Category, and Price.
Make sure to organize your products in the right Categories, as we’ll use these in the next step. It’s also a good idea to ensure your food items are optimized with WooCommerce SEO best practices in mind.
If you have specific dishes (e.g. Pizza) offered in a different size or maybe with additional toppings, you will have to change the Product Type to “Variable Product“. This way, you can create new attributes that will later help you to create product variations, where you can set a different price, for example.
For more details about creating a Variable Product in WooCommerce, please refer to the official documentation.
Step 2: Create the Online Ordering Page for your Restaurant
This is the step I find the most interesting, as you can be as creative as you want in building the page where the food will be displayed. The online ordering page doubles as a menu page. Customers can see the dishes you offer, add them to cart, and place their orders.
On the demo page of Delicio, you can find two different Ordering page designs, so I will explain both methods of below:
Method 1: Create an Online Ordering Page using Beaver Builder
For this step, we’ll use the free version of the Beaver Builder plugin accompanied by our free Beaver Builder Addons by WPZOOM.
The default Shop page generated by WooCommerce doesn’t provide enough flexibility, so that’s why we’ll use a Page Builder and design the page as we want. In this way, we can make the page look more organized and we’ll have full control of what dishes appear and where.
Drag the WooCommerce module included in our add-ons plugin on your page created using Beaver Builder and select the category of products to display. Let’s say we want to display all foods categorized as Starters.
Repeat the same step for as many sections with courses or type of foods your restaurant offers:
You can go even more creative and add a section where you can highlight specific foods.
For example, using the WooCommerce module in Beaver Builder you can display Featured Products or Best Sellers:
You can see how I’ve set everything up on this page for an interactive, live demo.
Method 2: Create an Online Ordering Page using WooCommerce Product Table
WooCommerce Product Table is a commercial plugin created by Barn2 and its price starts from $79.
While in the previous step we’ve created a simple ordering page using Beaver Builder, in this step we will create a page with more advanced options using the WooCommerce Product Table plugin.
You can see the final result in this live, interactive demo.
WooCommerce Product Table can be used for any kind of WooCommerce store, but we find it to be ideal for WooCommerce restaurant websites.
Here are some of the advantages of using WooCommerce Product Table compared to the previous method:
- You can customize the columns with details about each item
- Customers can select multiple items and add them to cart with one click
- The plugin includes additional features like Search, Sort & Filter options
The following example from the demo was created using the default WordPress editor, so no page builder is needed in this case.
To make the page look more organized, we’ll insert the required shortcode multiple times and display only dishes from a specific category in each section:
Here’s an example of the shortcode used above:
[product_table category="starters"]
Customize the Product Table
By default, WooCommerce Product Table will include columns with details like Image, Name, Description, and Buy Buttons.
From the settings page of the plugin located in WooCommerce > Products > Products table, you can easily change the order of the columns or add new ones:
A list with all the available columns can be found in the documentation of the plugin.
What’s Next?
My goal with this tutorial was to show you how easy it is to create an online ordering page for your restaurant with a minimal spending. Thanks to great tools available for free like WordPress and WooCommerce, you can build and manage your own restaurant website with a small budget.
WooCommerce is a complex plugin and there are dozens of add-ons available to add almost any functionality you want to your website.
Here are the next steps you will have to take care of:
- Set opening hours and delivery times. You can do this using WooCommerce Delivery Slots.
- Set up shipping zones and restaurant delivery areas. If you want to allow takeaway orders, you can use WooCommerce’s built-in Local Pickup shipping method.
- Set up payment methods. You’ll need to decide whether you want to accept online payments, accept cash on delivery, or both. You can set up your payment methods by going to WooCommerce → Settings → Payments.
Once that’s done, you can start accepting orders through your online restaurant ordering page.
Recommended Guides
Our friends at Barn2 have more in-depth articles written on their website about creating a Virtual Restaurant with WooCommerce, so we recommend to check them as well:
– Tutorial: Create a WooCommerce Restaurant Ordering System
– Create a Restaurant Ordering System – Start Selling Online in the Coronavirus Lockdown
– Complete Guide: How to Set Up and Run a Virtual Restaurant
Let the WPZOOM team help you get started!
We really hope that you’ll find this article useful for setting up your WooCommerce restaurant website and completing it with the missing features.
Let’s do a quick rundown of the tools you’ll need to create an online ordering page for a WooCommerce restaurant:
1. WooCommerce
2. Delicio Theme
3. Beaver Builder and Beaver Builder Addons
4. WooCommerce Product Table
If you decide to choose our Delicio theme for your website, I guarantee that you’ll have our full support in a timely manner to fully set up your website from start to launch.
So if you’re not sure where to start or need an advice, get in touch with us or ask a question in the comments below.
