Want to create your very own restaurant ordering system using WordPress? Those third-party ordering systems sure are convenient, but they usually take a hefty chunk of your sales – and that sucks!
With WordPress and WooCommerce, you can create your own fully-functioning restaurant ordering system where you get to keep all the money. No more third-parties eating up your margins!
And in this post, I’m going to show you exactly how you can use WordPress and WooCommerce to create such a restaurant ordering system:
Let’s do it!
What You Need To Create This Restaurant Ordering System
Let’s start at the beginning…
If you want to pull this off, you’re going to need a WordPress site. If you’ve already built your restaurant’s website with WordPress – congrats! You’re ahead of the game.
If not, it’s pretty dang easy to create your own restaurant site with WordPress. These guides can help:
- How to Create a Website With WordPress – takes you step-by-step through how to get set up with a working WordPress site.
- 12 Best Restaurant WordPress Themes – these help you make that site look like a restaurant website.
Once you have a working WordPress site for your restaurant, you’ll use the following two plugins to actually set up your restaurant ordering system:
- WooCommerce – free – this plugin adds eCommerce functionality to your store. By the numbers, WooCommerce is the most popular eCommerce platform on the entire Internet.
- WooCommerce Product Table – $75 – this plugin helps you create a restaurant order form that displays your entire menu.
I’ll also recommend some other extensions that come in handy for certain things, so you might end up wanting some of those as well.
Essentially, you’ll use:
- WooCommerce to manage menu items and categories, as well as process payments and manage customer details.
- WooCommerce Product Table to create the actual restaurant order form that people will pick food items from.
I’m going to assume that you have both plugins installed at your site for this tutorial.
If you struggle with how to set up WooCommerce, you can check out our beginner’s guide to WooCommerce for some extra help. And don’t worry about any configuration with WooCommerce Product Table – that’s what I’ll cover in this article.
An Example Of This Method In Practice
Want to see an example of how food ordering works via this method before digging in?
I live in Hanoi, and I discovered that one of my local restaurants actually uses this exact method to power their self-hosted restaurant ordering system. It really is pretty convenient…
How To Create A Restaurant Ordering System With WooCommerce
Once you have both WooCommerce and WooCommerce Product Table installed at your WordPress site, here’s a step-by-step guide to getting set up with your very own self-hosted restaurant ordering system.
Step 1: Add WooCommerce Product Categories For Your Menu Categories
Your restaurant’s menu probably has several different categories. For example, an Italian restaurant might have categories for:
- Pizza
- Spaghetti
- Salads
- Etc.
You get the idea…
To preserve the same structure in your restaurant’s ordering system, you’ll use WooCommerce product categories.
To create categories for your menu, go to Products → Categories in your WordPress dashboard and create as many categories as needed:
Repeat the process until you have WooCommerce product categories for every menu section that you want to include in your online ordering system.
Step 2: Add Individual Menu Items As WooCommerce Products
Now that you’ve created the actual categories for your menu items, it’s time to add your individual menu items.
To do this, you’ll add each item as a WooCommerce product. This one is a bit trickier because there are more fields to fill out – but I’ll take you through it.
To create a new product, go to Products → Add New. You’ll see a ton of different fields, but you don’t need to fill all of them out:
Let’s cover the big stuff first:
- Enter the food item’s name in the Product name box
- Enter a description in the main text editor
- Add an image of your food item in the Product image box
- Use the Product categories area to select the right menu category
- Optionally use the Product tags to add additional information (e.g. to mark vegetarian items)
Then, you need to dig into the Product data box that appears under the main text editor.
First, choose the product type from the drop-down.
- If the food item only comes in one “version” – like a salad with set ingredients – you can use Simple Product.
- If the food item has multiple “versions” – e.g. different sized pizzas, optional add-ons (like adding chicken to a salad), then you’ll want to use a Variable Product. And if you want to let shoppers really customize your items (e.g. choosing from lots of different toppings), then you might also want to use the official Product Add-Ons plugin.
This screenshot demonstrates the difference between a variable product and the Product Add-Ons plugin:
For a Simple Product, you can pretty much enter the price and call it a day:
For a Variable Product, you’ll first need to enter some Attributes (for example, the different sizes of a pizza would go in the “size” attribute):
Then, you can add prices for each variation in the Variations tab:
I know – variable products can be a bit tricky. If you need some more help, I recommend checking out this help article. And once you get the hang of it, it will get a lot easier for future menu items – I promise!
Once you finish adding your first menu item, repeat the process for all your other food items.
Step 3: Use WooCommerce Product Table To Create Your Restaurant’s Order Form
Once you’ve added all your menu items, the next step is to give visitors a user-friendly way to order them. That’s where WooCommerce Product Table comes in.
It takes your individual menu items and displays them as a list on the frontend, complete with options that let visitors select variants and add menu items to their carts.
To use WooCommerce Product Table, you can either configure the plugin’s styling in a graphical interface by going to WooCommerce → Settings → Products → Product tables. We have a guide on how to use the plugin here.
Or, you can just build your shortcode using shortcode parameters – you can view all the possible parameters here.
To make your life easier, I’m going to just skip ahead and give you a shortcode that should work great for most restaurant order forms:
[product_table columns="image,title,description,price,add-to-cart" show_quantity="true" variations="true" links="tags" sort_by="title" description_length="-1" filters="false" pagination="false" category="pizza"]
Make sure to replace category="pizza" with the actual menu category you want to display.
For example, if you add two separate shortcodes for two menu categories like this:
Then your restaurant delivery order form will look like this on the front end:
Visitors can either use the checkboxes to select multiple menu items. Or, if they just want to order a single item, they can directly add it to their carts.
And remember – you can use the shortcode as many times as needed to cover all of your different menu categories.
Once visitors add items to their carts, they’ll be able to check out using the normal WooCommerce checkout system. That means you can use whatever payment gateway you prefer, or even accept cash on delivery:
Step 4: Configure Misc. Details To Make Things Work Perfectly
At this point, you have a working restaurant ordering system built on WooCommerce.
But there are still a couple of smaller details that you’ll likely want to address:
- People can order from any location. Unless you want to ship your food across the country, you’ll probably want to restrict the areas to which you’ll deliver. You can use WooCommerce Delivery Area Pro to restrict delivery area by zip code (visitors can even enter their own zip code to check if delivery is available).
- You haven’t addressed your store opening hours. Right now, people can still order even at 4 am. To close your ordering system when your restaurant is closed, you can use the WooCommerce Opening Hours & Chosen Times plugin.
- You might want more obvious notifications. Because you don’t want to make your customers wait around to get their order, you need a way to instantly know when a new order comes in. WooCommerce will send you emails, but you can get alerts via different methods by using plugins like WooCommerce Order SMS Notification to get a text. Or you can use Zapier to connect to a bunch of other services.
There are also lots of other great WooCommerce extensions that you can use to add other helpful functionality.
Final Thoughts On Accepting Online Orders At Your Restaurant
Once again, WordPress shows its versatility! With WooCommerce and the WooCommerce Product Table plugin, it’s easy to set up your own restaurant ordering system and stop paying that 13% commission to a middle-man!
You can use core WooCommerce functionality to manage most parts of your system. And then you can tack on WooCommerce Product Table to create your order form, as well as some of the other optional extensions I mentioned to further refine how your online ordering works.
Have any other questions about how to create a restaurant ordering system with WordPress? Let us know in the comments!
0 comments:
Post a Comment