If you’re launching a WordPress restaurant website, using WooCommerce for restaurants is a great way to set up your own online restaurant ordering system.
Using WooCommerce for restaurants not only gives you full control over your food ordering system, but it also means that you won’t have to pay hefty commissions to online ordering services, which can sometimes run as high as 30% for restaurant owners.
In this post, we’ll show you how to set up your own user-friendly WooCommerce restaurant ordering system using the Liber restaurant WordPress theme, WooCommerce Product Table, and some other helpful WooCommerce plugins.
Your visitors will be able to order food using an easy-to-browse restaurant menu:
And the rest of your site will also look great thanks to the Liber restaurant theme:
Ready to learn how to create your own Google SEO-friendly WooCommerce food ordering system? Let’s dig in…
How to Use WooCommerce for Restaurants
Here’s a high-level look at the process:
- Set up the Liber theme and import demo content to create your base.
- Add your food menu items as WooCommerce products, including setting up variations and add-ons as needed.
- Create your front-end food ordering menu using WooCommerce Product Table.
- Configure your backend processes to make sure you can quickly process orders.
1. Use Liber to Create Your Restaurant Design
Before you can get started with WooCommerce for restaurants, you’ll want to choose a WordPress restaurant theme that both:
- Provides you with important restaurant features like HTML food menus and reservation bookings.
- Is compatible with WooCommerce to create your online food ordering system.
For a theme that checks both those boxes, you can use Anariel Design’s Liber theme.
- Includes multiple food menu templates to help you showcase your delicious food to people attending your restaurant in person.
- Lets you accept reservations through your website.
- Makes it easy to display important details, like your contact information, location, and opening hours.
- Is compatible with WooCommerce right out of the box for your online ordering system.
To get started, install and activate the Liber theme, as well as any of the theme’s recommended plugins that you want to use. You’ll especially want to make sure to install and activate WooCommerce (one of the theme’s recommended plugins).
Then, you can head to Appearance → Import Demo Data to choose which pre-made demo site you want to use:
And after a short wait as the demo content imports, you’ll have a great-looking restaurant website. Here’s what the homepage looks like:
Now it’s time to set up WooCommerce for restaurants and create your online ordering system.
2. Add Menu Items as WooCommerce Products
To add your menu items to WooCommerce, you’ll add each unique dish as a “product”.
Go to Products → Add New to add your first menu item. Make sure to fill out the:
- Title – the name of the dish.
- Product category – the menu category. E.g. “Entrees” or “Desserts”
- Description body – you can add a short description of the dish.
- Tags – you can add helpful tags like “Gluten-free”, “Vegetarian”, etc.
- Product image – a picture of the dish.
- Price – the price of the dish.
For a simple dish, that’s all you need. But if you’re like most restaurants, you’ll probably have dishes where customers can choose different items or add-ons. For example, choosing the size of a pizza and/or which toppings to add to a pizza.
To control these additions, you can either use a variable product instead of a simple product or product add-ons:
- Variations – use these when shoppers can only make one choice. For example, the size of a pizza, where customers can only choose one option from a list of “small”, “medium”, “large”.
- Add-ons – use these when shoppers can make multiple choices. For example, the toppings to use on that pizza, where shoppers can choose one or more items from a list like “mushrooms”, “peppers”, “anchovies”, etc.
To create variations, you can use WooCommerce’s built-in Variable product feature.
To create add-ons, you’ll need the official Product Add-ons WordPress plugin from the WooCommerce team.
To finish things out, repeat the process for all your menu items, using categories and tags to keep things organized.
3. Create a Front-End Online Ordering System
While Liber includes a great-looking shop page out of the box, using WooCommerce for restaurants and online ordering can benefit from a more straightforward layout that helps hungry visitors quickly see all your menu items.
To set that up, you can use the WooCommerce Product Table plugin. It lets you display all or some of your products in a table view, which is a great layout for a restaurant menu. You can also…
- Divide your menu into different categories.
- Let shoppers filter your menu, like only displaying gluten-free items.
- Let shoppers order multiple items with a single click by using checkboxes.
- Offer a product quick view to show more details for menu items.
Alternatively, you can use the WooCommerce Restaurant Ordering plugin to create a quick, one-page food ordering system. The plugin lets you display food items in a menu-style layout which makes the online food ordering process intuitive. You can also …
- Create instant food order forms organized by category.
- List food items in 1, 2, or 3 columns just like a menu.
- Choose which food details to display.
- Let customers choose options in a lightbox.
Configure WooCommerce Product Table
Once you’ve installed and activated the plugin, go to WooCommerce → Settings → Products → Product tables to configure how your online food ordering menu will function.
Feel free to check out all the plugin’s settings, but there are a few key settings for using WooCommerce for restaurants:
- Columns – this controls what information appears on your menu. A good starting point is “image,title,description,tags,price,add-to-cart”, but you can check out all the options and create the setup that works best for your restaurant.
- Image size & Image lightbox – if you have great images of your food, you might want to make the images a bit larger to get your customers salivating.
- Add to cart button – use the drop-down to select Checkbox only or Button and checkbox so that customers can use a checkbox to select multiple menu items to add to their order.
- Variations – if you’re using variations for your menu items, the Dropdown lists option is probably the best choice here. It will let customers use a drop-down to select their desired variation (like the size of a pizza).
- Product filters – if you want to let visitors filter by categories, tags, or other criteria, you can enable filters here. For example, you can let them filter out only dishes tagged with “gluten-free”.
Again, feel free to check out the other settings, as you might find something useful for your restaurant website.
Create Your Front-End Online Restaurant Menu
Once you’ve saved your changes, you’re ready to create the front-end online restaurant ordering system.
To do this, you can create a regular WordPress page and use the [product_table] shortcode. You can either…
- Use one shortcode for your entire menu. This might be a good option if you’re using filters to help shoppers filter out different types of menu items.
- Use multiple shortcodes for different menu categories/tags. You can set this up by adding the category or tag parameters to the shortcode. For example, [product_table category=”burgers”].
For example, here’s what it might look like if you divide your online menu into different categories:
And once you publish your page, you’ll have a great-looking front-end restaurant menu:
Enhance Your Menu With Product Quick View (Optional)
If you want to display more information about individual food items, product quick view makes a great option.
You can give visitors a dedicated button to open a modal popup with more details, where you can add ingredient lists, detailed nutrition information, etc.
To integrate product quick view into WooCommerce Product Table, you can use the WooCommerce Quick View Pro plugin, also from Barn2 Media.
Once you install and activate the plugin at your WordPress website, you can add a new quick-view column to WooCommerce Product Table to give shoppers the option to view more details.
Configure WooCommerce Restaurant Ordering
If you choose to go with the WooCommerce Restaurant Oredring plugin instead of the WooCommerce Product Table plugin then here is how you can configure it.
After installing and activating the WooCommerce Restaurant Ordering plugin to your website, head over to WooCommerce → Settings → Restaurant to configure the plugin settings.
Here are the main settings you need to configure:
- Restaurant order page – this lets you choose which page to use for the restaurant order form. The WooCommerce Restaurant Ordering plugin automatically creates a page for you when you install the plugin to your site but you can set it to a different page if you’d like. The plugin will automatically add a shortcode to the page to display the online ordering system.
- Categories – use this option to decide which categories to display on your restaurant order page.
- Order form options – this lets you decide what information and options you’d like to display on the front-end. For example, you can choose to show category titles and descriptions, product images and descriptions, and a buy button.
- Number of columns – this lets you decide how many columns to display the food items in. You can set this to either 1, 2, or 3 columns.
- Image position – you can use this setting to display product images either on the left or right side of the description.
- Product description – you can use this option to limit the description length to fit the available space or show the full description.
- Order method – if you want to let customers add products to their shopping cart instantly, set this to Quick. However, if you want customers to select options, set this to Lightbox. Keep in mind that products that have options (i.e. products with variations) will always open in a lightbox.
- Lightbox options – this lets you decide which product details to display in the lightbox. You can choose to display the product image and description.
Click the Save changes button to proceed.
Create Your Front-End Online Restaurant Menu
WooCommerce Restaurant Ordering lets you choose which page to use as the restaurant order form. If you preview the page on your site’s front-end, it should look something like this:
When a customer adds a variable product to their cart, a lightbox will pop-up that lets them select options. For example, if a customer adds the Four Cheese Pizza to their cart, they’ll be prompted to select the pizza size in the lightbox and set the quantity.
4. Set Up Your Backend Processes
Unlike a traditional eCommerce/WooCommerce store where you can wait until the next day to ship products, using WooCommerce for restaurants requires that your team is able to get immediate notifications whenever a new food order comes in.
By default, WooCommerce can send email notifications for new orders. Or, you can also just have your team keep the WooCommerce dashboard open. For some workflows, that might be all you need.
However, you can also use WooCommerce plugins to use other notification methods:
- Official WooCommerce mobile apps – get push notifications on your smartphone or tablet for new orders. This is especially great if you’re already using one of these devices as a restaurant POS, but you can also just get a dedicated tablet or smartphone for online orders.
- SMS Notification for WooCommerce – get a text notification for new orders.
- YITH WooCommerce Desktop Notifications – get desktop notifications for new orders.
- WooCommerce Automatic Order Printing – automatically print out a receipt for new orders.
- WooCommerce Slack – get notifications on Slack for new orders.
- Facebook Messenger – you can use Integromat to get Facebook Messenger messages for new orders.
By using one or more of the above methods, you can make sure your team is able to start work on orders right away.
Other Tips for Using WooCommerce for Restaurants
At this point, you have a basic restaurant ordering system for online food ordering and food delivery.
However, you still might want to make some other tweaks to use WooCommerce for restaurants. For example, you’ll probably want to configure your food online store so that people can’t order when you’re closed. Similarly, you’ll want to set up maximum delivery distances to ensure people only order inside your delivery zone.
To further enhance WooCommerce for restaurants, here are some other great WooCommerce restaurant plugins to use:
- WooCommerce Delivery Area Pro – lets you restrict delivery areas and also gives shoppers an option to check if you deliver to their zip code before they check out.
- WooCommerce Opening Hours & Chosen Times – lets you close your food ordering system when your restaurant is closed.
- WooCommerce Dynamic Pricing – lets you create deals and promotions. For example, “buy one pizza, get a second pizza 50% off”.
- WooCommerce Delivery Slots – lets customers choose their preferred time slots for delivery. For example, they can order in advance for dinner.
You also might want to make some tweaks to WooCommerce’s native options if you’re using WooCommerce for restaurants.
One big choice is your payment methods for when a customer goes to checkout. 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.
If you accept cash on delivery, you’ll probably want to call customers to verify their order to make sure it’s a valid order before you start prepping the food.
Finally, if you want to allow takeaway orders (orders where customers pick up their food), you can use WooCommerce’s built-in Local Pickup shipping method.
Get Started With WooCommerce for Restaurants Today
Using WooCommerce for restaurants is a great way to take control of your online food ordering system and stop paying commissions to middlemen.
To get started, you’ll want to pick a WordPress restaurant theme that’s compatible with WooCommerce, like Liber. Then, you can use WooCommerce Product Table to create your restaurant order form for online deliveries.
You’ll likely also want to use some of the other plugins we mentioned to further tweak your WooCommerce restaurant website.
Do you have any questions about how to use WooCommerce for restaurants? Let us know in the comments!