Aug 13 2020

A Short Guide on Creating a Food Ordering System through WooCommerce

AnnexCore

If you are running any type of food joint or eatery, you must have understood the importance of delivery services during the ongoing pandemic. Besides offering customers an easy way to get their food, delivery systems have helped food businesses not go broke during these testing times.

Even before COVID-19 kicked in, online food delivery had already become an integral part of the business. In 2019, the worldwide revenue came from online food delivery segment crossed the magical figure of $100 billion. It is projected to go to $136 billion this year, and by 2025, it might touch the 200 billion mark.

The availability of the internet and smartphones, the growth of online food order companies, and the rising sedentary lifestyle have collectively made online food delivery a hit. Who would dress up, go out, and wait for the meal to get served when they can get piping hot food at their doorstep with a couple of taps? This thinking now widely prevails among consumers. Therefore, any new restaurant entering the market has to embrace this reality to make their gig a success.

If you have just established a food joint and now mulling over introducing online delivery but don’t want to depend on third-party online food ordering platforms, keep reading this blog post. We will discuss how you can make your own food ordering system through WooCommerce on your WP-hosted website.

WooCommerce Food Ordering System vs. Online Food Ordering Companies: What to Pick

But before we delve into discussing the things needed and steps to follow for creating the WooCommerce food ordering system, it will be better to have a comparative look at these two delivery options. This comparative analysis will help all those owners who are sitting on the fence and can’t decide between setting up their own delivery system and outsourcing it to a platform.

For a new food business entering the market with limited resources, partnering with a food delivery app with an impressive footprint seems like a logical move. However, down the line, people running the business realize that they should have gone with their own food ordering system. There are two major reasons why third-party food delivery platforms are not meant for budding food businesses.

  • Famous food delivery apps with lots of traction (Grubhub, UberEats, etc.) take hefty commissions on every order. These large commissions may not hurt a food joint handling hundreds of orders a day. But for a small-scale eatery that is still trying to find its feet in the market, those commissions can mess up their bottom line.
  • Food ordering platforms and apps have turned into competitive marketplaces. A new food joint is often buried in the listing among lots of famous and established eateries. Instead of getting any visibility, the food joint becomes even more invisible to prospective customers.

On the other hand, you have the option to create your own food ordering system with full control over its content and layout. Like WordPress, WooCommerce also offers a lot of flexibility in developing a web page. You can create your restaurant’s own online food ordering system via WooCommerce without needing any HTML, CSS, SQL, and PHP expertise.

Things You Will Need To Create Your Own Food Ordering System

First of all, you need to export the WooCommerce plugin on your restaurant’s website. The entire point of this plugin is to facilitate ventures that want to run their business via the web interface. The second thing you will need is the Product Table for WooCommerce.

It is a WooCommerce plugin that lets you make well-though-out, content-rich, and easy-to-navigate product tables on web pages. Whether you deal in apparel, toys, or food, you can use the Product Table plugin accordingly. It allows you to make sub-categories, add filters and customized boxes, and any type of content to the entries on the list. For making a robust food ordering system, the Product Table plugin is a must.

You will also need images, descriptions of the food items you want to offer on your delivery portal. Although you can use stock photos and pre-written descriptions, it would be better if this content has a touch of personalization.

A Step-by-Step Guide of Creating WooCommerce Food Ordering System

Until now, we have discussed why you need to make your own food ordering system and the plugins and content you need to make one. Let’s now walk through the process of creating the WooCommerce food ordering system step by step.

1. Install and Configure WooCommerce

Before installing and integrating WooCommerce on your WP site, we recommend you add a WooCommerce-optimized theme to the site. Any good WooCommerce-optimized theme will be mobile-responsive and boast a simple non-clustered interface. These optimized themes further improve the functionality of WooCommerce and help you make the most of the web interface you developed with it. A WooCommerce development expert can help you pick the most suitable theme for your online food ordering system.

After settling on the theme and installing it, download, install and activate the WooCommerce plugin to your website. Once activated on the site, it will show you the Setup Wizard. The Wizard will let you add the required e-commerce features to your food ordering WP website. Here, you will need to configure/set at least the two major features of your food ordering system: the area you are covering with the food delivery and the respective shipping charges and the payment options you are offering your consumers.

Shipping Settings

When you go to the Setting tab on WooCommerce’s main interface, you will find the option of Shipping there. From here, you can create shipping zones and set the delivery charges. As a budding food joint catering to a single locality, all you need to do is enable Flat Rate Shipping in the Shipping Window. But if you want to deliver to patrons in more than one area, you need to create shipping zones within the same menu for different delivery charges.

Payment Settings

You also need to configure payment settings of your food ordering system before adding anything to the menu. WooCommerce lets you choose among a range of payment options. From PayPal to bank transfers and offline payments, you can choose all those payment options through which you can facilitate your customers. For instance, if you are planning to get a POS machine, you can check the Debit/credit card box. Moreover, if you are delivering yourself, you must check on cash on delivery.

Try to offer as many payment options as possible. This variety and choice of payments improve customer experience.

2. Create a Food Menu

Once you are done configuring shipping and payment settings, start creating a food menu. For that, you will need to add your food items as WooCommerce Products to your website. Before adding food items as individual entries, it will be better to define the different categories you are dealing with. For instance, make categories for starters/appetizers, main course, beverages, and desserts. By defining these categories, you will make it easy for customers to put up their delivery menu.

Now, go the WordPress admin panel, navigate to Products and click on Add New (assuming that you have already installed and activated WooCommerce). Clicking on Add New will open a window where you will see these boxes to be filled: Title, Short Description, Category, Price, and Product Image.

Since we are creating a food menu, the details will be filled accordingly. We will provide you with one example of how to fill this section.

  • Title: The name of the food [e.g., Creamy Mushroom Pasta]
  • Short Description: A couple of lines for hyping up the given food item and increasing patrons’ appetite (e.g., our creamy mushroom pasta makes for a big bowl of comfort. The savory mix of cream, white wine, parsley, lemon zest, and parmesan will make your lunches and dinner more flavorsome.)
  • Category: Main course
  • Price: Regular and sales prices
  • Product Picture: An appetizing shot of o bowl of creamy pasta

Like this, add all the food you make and serve at your restaurant to WooCommerce Products. To add different servings and sizes of the same product, pick the Variable option from the same product menu.

3. Create Food Ordering Form through Product Table Plugin

This is the most crucial part of creating a WooCommerce food ordering system. Before displaying anything on the front-end, you need to put up a one-page food ordering form via Product Table plugin you have installed earlier. Go to Settings, select Products, and click on Product Table there.

While configuring the Product Table plugin for your online food ordering page, you need to take care of these three settings: content, column, and control.

Content Settings

The Table Content window of the plugin lets you organize the content of every food entry you want to display on the online food ordering form. For instance, you can select name, image, add-to-cart, description, and price columns on the form. You can also choose the image size you want to display on the form and the word length of the food description.

Add-to-Cart Settings

How you configure the add-to-cart setting on the Product Table will define the user experience of your food ordering system and, ultimately, your sales as well. Let’s see how to configure it for the best user experience.

  • You can choose between Checkbox Onlyand Button and Checkbox options for the add-to-cart button. The latter option allows consumers to add multiple food options in the same spree, and hence, it makes for better UI.
  • Check the Quantitiesbox so consumers can select the quantity they want to order for each food.
  • Select “Dropdown lists in add to cart column in Variations This option will let consumers select the serving size they want to order right there on the food ordering form.
  • Select the “above and below table” for the “Add Selected” position, so consumers don’t have to look for the “Add” button while putting multiple items to their carts.

Control Settings

The most important thing to take care of on this window is the product category. You can enable Product Filters and Custom Filters from it. Product Filters let you choose the filter (category, tag, price, or custom criterion) through which consumers can navigate the product menu. In Custom Filters, you can put the categories you have created yourself (vegetarian, non-gluten, etc.).

The Control Settings page can also let you decide the number of products you want on the page, where the search box should be displayed, and how pagination should be carried out.

4. Displaying the Food Ordering System on the Front-End

By now, we have completed the back-end configuration of the WooCommerce and Product Table. So, it is time to display the food ordering system to the front-end of your WP website. To do this, go to the Pages from the WP admin panel and Click on Add New. Enter a title that you want to give to your food ordering system (e.g., places your order, make your platter). Then create a shortcode block and add Product Table to it.

Finally, click on the publish button and preview the page. In last, consider adding some short descriptions to the page that can help consumers to navigate through it. If your food menu is a long one, try to break it down into categories.

Final Thoughts

With WordPress and WooCommerce at your disposal, it is not difficult to create an agile online food ordering system for your establishment. Nonetheless, you need to give time to create a well-thought-out WooCommerce food ordering system while picking the right themes, plugins, categories, and adding the most suitable content.

If you already have too much on your plate and fear that you might not pull it off the way you imagine, delegate the creation of your food ordering system to WooCommerce development experts. Professionals at AnnexCore can help you in developing a food ordering system for your restaurant. With our successful experience of assisting many food businesses in the past, we can make you a highly functional and user-friendly online food ordering site.

This post may contain affiliate links for which we receive commission if you visit a link and purchase something based off our recommendation. By making a purchase through an affiliate link, you won't be charged anything extra. We only recommend products and services we've thoroughly tested ourselves and trust.