In this article, I will show you how to create a WooCommerce restaurant order system from scratch. I will mention each step in detail so you can easily implement and achieve better results.
So, continue reading…
Running a restaurant business can be quite difficult. And, when we plan to create an online website for our restaurant, it becomes more complicated. Managing orders, attending calls, and managing the staff is indeed a tough challenge. But a WooCommerce takeaway order system helps you make the work easier.
The takeaway order system helps your customers buy their food online and specify a delivery time or pick when it is prepared. With the help of a takeaway order system, users can order food online from your website itself. In addition, you don’t need to create a separate mobile application, which will help you save resources and time at the same time.
.
On This Page
What do You need to Create a WooCommerce Takeaway Order System?
To create a WooCommerce takeaway order system, you will need a few resources. You will require a few plugins to create a takeaway order system in WooCommerce. Here are all the plugins you will need.
WooCommerce: This is the most important thing you will need to create a takeaway order system. Without WooCommerce, you can’t even build a fully functional and advanced eCommerce store. WooCommerce is a free plugin that lets you create an eCommerce store with many advanced features. This plugin will help you from selling the products to accepting payments online.
WooCommerce Product Table Plugin: The WooCommerce Product Table plugin lets you display your menu items beautifully. It makes the whole takeaway ordering system smooth and easy to use. You can create a food menu, divide food by categories, etc.
These are the two main plugins we will need to create a WooCommerce takeaway order system. Read the following section to know how much it will cost to create a takeaway ordering system.
How Much Does It Cost to Create a Takeaway Order System?
All your money will go on plugins and other resources. WooCommerce is a freemium plugin. It is freely available for all, but if you want to take it to another level by adding some advanced features. You have to purchase its premium add-ons. Otherwise, WooCommerce is a free plugin.
You also need the WooCommerce Product Table plugin starting at $8.25 per month, which will help you create a takeaway order system in WooCommerce. Besides this, you don’t need to pay any additional amount for any other plugin.
Continue reading ahead to figure out how to create a WooCommerce Takeaway Order System.
How to Create A WooCommerce Takeaway Order System
Follow the given steps to create a WooCommerce Takeaway Order System.
1. Install and Activate WooCommerce
The first and foremost step is to install and activate WooCommerce. Head over to your WordPress’s Plugins section, and search for WooCommerce. Click on Install and then Activate the plugin. Else, you can manually upload the plugin. You can download the Plugin by clicking here.
After that, configure the WooCommerce plugin and make the basic settings like your Woo store information. Follow the WooCommerce plugin setup wizard and make the required changes.
If you want to receive payment online, add payment methods like PayPal and Stripe. Otherwise, if you want to take offline payments, add the Local Pickup Delivery method.
2. Add New Dish or Meal to your Ordering system
Once you have set up WooCommerce, the next step is to create new products or items to add to your online restaurant menu.
Suppose you are new to WooCommerce and don’t know how to create products in WooCommerce. So follow the given steps.
Log in to your WordPress dashboard with your login credentials. After that, look for the Products option in the WordPress toolbar and click on it. After that, click on the Add New button.
2.1 Product Name: enter the name of your new dish, for example, Fillet 8oz. This will appear on the menu.
2.2. Category: To assign categories, you must first create categories in your WooCommerce store. This will help you categorize your menu and look more organized.
2.3 Product Data: In the product data, enter the price for the new dish. In addition, you can set the product type to variable product to add more customization options for your customers to select from.
2.4 Short Description: You can mention the ingredients it contains, how it would be served, toppings, and many more
2.5 Image: This will help you show your serving and menu more attractively. In addition, good images will encourage customers to order the dishes on your WooCommerce store.
2.6 Publish: After making all the changes, click on the Publish button to publish your product or item online.
Once you are done creating this menu item. Follow the same steps for all new items. Read the next section to know how to add customization options for the customers.
3. Add Customization Options (optional)
In our example above we used the 8oz Fillet dish, now let’s say we wanted to allow customers to choose whether they would like it medium or large.
We would simply change the product type from ‘simple product’ to ‘variable product’ type and this will allow us to add various addons to our dish.
- Select ‘Variable product’ in the ‘Product Data’ section of the ‘Add/Edit Product’ page.
- Navigate to the ‘Attributes’ tab, > click add next to ‘Custom product attribute’. Now enter the product information that customers will be choosing between, and tick ‘Used for variations’.
- Navigate to the ‘Variations’ tab.
- Either select ‘Create variations from all attributes’ from the dropdown, or add each variation individually and click ‘Go’.
- Hover over your variation and click the triangle arrow to expand and add the variation price and any other information.
- Click ‘Save changes’. Now when customers orders this dish they will be able to choose from your variations before adding them to the cart.
For more customization over addons you can check out this plugin.
4. Create WooCommerce Takeaway Ordering System
Let’s take a quick look at what we have done till now. Until now, we have installed WooCommerce on our WordPress website. After that, we created multiple items to add to our online menu. Then, we figured out how to create categories and assign them to our menu items for better categorization. Later, we checked how to provide more customization options to our customers.
We will finally check out how to create a WooCommerce takeaway ordering system. In this step, we will see how to display your food items well and make the process more seamless.
I am assuming that you have already installed and activated Woosuite product table plugin.
4.1 Order Form Settings:
- In the WordPress admin, go to Woosuite → Product table → click “Add new table”
- Name your table (for internal reference). We will create multiple tables for each section of our food menu. In this example, I will create one for our main menu.
- Now we will specify what information to show on a restaurant ordering form. Here I am adding an image, inner column(withing this I added the dish name, short description, and price) and an add to cart button.
Mote: In this section, I will make a few extra tweaks to our mains food menu. I adjusted the image size to display as 200×150 px, set products link to none, and uploaded a custom add-to-cart icon.
4.2 Add to Cart settings:
1. Add to cart button: Here we set the display as a button so we can utilize the custom button we added earlier.
2. Toggle on Ajax add to cart button
3. Toggle on quantities if you want customers to add multiple items to the cart at once.
- For the variation setting, we set this as a dropdown so customers can select any extra option you offer, such as meal size, etc..
4.4 Form control:
1 Create a filter for your menu – this is where you will tell the system what dish to display in the menu table. Since this is our mains menu, under list rules I will select the type as ‘categories’ for compare I will select IN and the value will be where our mains menu is located
2. Set Product filters to disabled
3. Set page length to hidden
4. Set search box to hidden
5. Set Product totals to hidden
6. Set pagination buttons to hidden
4.5 Form design
In this section, we will make our product table headless, since we will be adding multiple product tables to our one page restaurant ordering for each menu.
All you need to do is toggle ‘Disable heading’ and click save changes at the top of the screen.
’
By now you would have created the first section of your menu ordering system, thankfully the next few steps are a lot easier.
To create the other parts of your food menu, head back over to Woosuite product table main setting page and click duplicate. Once you have duplicated the table all you would need to change is the form display title and specific which category for food products to display.
5. Customize your Food Menu
This section is where we start to put everything together in terms of our food menu.
- Go to Pages > Add New in order to create a new page where your online menu will be showcased to your customers.
- Copy the Shortcode for each of the product tables you created earlier and paste them on your new menu page. I created a hero image on today’s promotion and separated our menu by the appropriate subheading.
4. Preview your one page restaurant ordering menu.
6. Set up delivery, collection, and delivery time slots
Deciding how you going to set up and structure your delivery/collection method, this is the last piece of the puzzle, Below are a few recommendations.
Manage your delivery drivers
Yes, you guessed it. there’s a plugin for this to help you efficiently manage your drivers to ensure every delivery is profitable. For this, we recommend this free WordPress plugin.
Scheduled collection.
You can use this a free WordPress plugin to enable your customers to specify a time that suits them to collect their order. This plugin does have some pro addons such as setting a maximum amount of deliveries per day. And also the minimum intervals delivery intervals per order and much more.
WooCommerce Builtin Shipping Options
If you want to keep it simple and just go with the default shipping options, you can provide your customers with options such as a flat rate shipping, free delivery over a certain order amount, or even offer them local pick up without specifying this particular time.
Conclusion
We hope you’re now able to create your own online ordering system and take back control over your customers.. If you have any issues during the whole process or with the plugin, you can contact our support team. We will be happy to assist you.
It is worth noting that if you are not technical you can take advantage of our setup and installation service for a small fee.
Take control of your own customers, create your own restaurant ordering system click here to get started today!
