Creating an Online Food Ordering System in WooCommerce

During the global coronavirus crisis, many food businesses and restaurants are switching to take away and delivery-only options. And, to keep their business running, they’ve implemented a WooCommerce food ordering system that allows patrons to place orders using a web browser.

Setting up a WooCommerce food ordering system and offering food deliveries is far more cost-effective and sustainable than managing a dine-in restaurant – especially considering most restaurants have had to close down due to the coronavirus pandemic.

In this article, we’ll show you how you can create your own bespoke WooCommerce food ordering website in WooCommerce in a few simple steps.

Let’s put everything into context before we begin.

Why Food Businesses Should Switch to Take Away and Delivery-Only Operations

If you’re operating a restaurant or food business and only offer dine-in options, now’s a good time to think about switching to take away and delivery-only options.

There are several reasons why:

For starters, operational restrictions during the coronavirus pandemic have caused many food businesses to switch to take away and delivery-only options to sustain their business. And, for most restaurant owners, this move has been more cost-effective and easier to manage than running dine-in operations.

By switching to take away and delivery-only operations, you can automate various processes such as WooCommerce food ordering. In addition to this, you can sign up with third-party delivery services in your locality to deliver food orders to patrons.

Hosted Solutions vs WooCommerce Food Ordering System

Some restaurants have chosen to use hosted solutions like Uber Eats and Deliveroo to stay in business. The problem with hosted solutions like Uber Eats is that they take large commissions. In simple terms, this means you make less profit on each sale which isn’t ideal. Not to mention, you end up competing with established food businesses which means less visibility for your restaurant in listings.

For this reason, many food businesses are exploring the option to create their own WooCommerce food ordering system in WordPress.

With an online food ordering system, you own 100% of your online food ordering website and have full control over its design and content. This means that you can put up as many menu items as you’d like or swap them out whenever you want.

And since WooCommerce is incredibly flexible, you can extend its core features the way you want using plugins. For example, you can add online ordering forms, delivery slots, tipping features, and mobile ordering functionality to your online food ordering website.

WooCommerce also gives you tons of payment methods to integrate which means you can offer patrons the option to pay cash on delivery or make payments using their credit cards of an online payment method.

The Solution: WooCommerce Product Table

The easiest way to create an online food ordering system in WooCommerce is by using the WooCommerce Product Table plugin. It’s incredibly intuitive and easy-to-use for patrons and makes it possible for food businesses to sell all sorts of food items, including foods with variations.

The WooCommerce Product Table plugin creates a front-end table layout with search, sort, and filter options that works like an online food ordering form.

You can add checkboxes and quantity selectors to the one-page order form to let patron place orders for multiple food items (and multiples of each food item) at a time. In other words, a patron could place an order for two hamburgers, a Coke, and an ice cream shake in one go.

The WooCommerce Product Table plugin lets you display both simple foods (for example a hamburger) and variable food items (like a pizza) in the same table layout. This makes it easy for restaurant owners to display their menu and allow customers to place orders.

How to Create an Online Food Ordering System

Here, we’ll walk you through the step-by-step process of creating an online food ordering system in WordPress. Here’s what you’ll need to follow along:

• WooCommerce
• WooCommerce Product Table
• Photos of food items you’d like to add to your menu

Step #1: Configure WooCommerce Settings

The first thing you need to do is to make sure you have a WooCommerce-optimized theme, like Shoptimizer, installed on your WordPress website. This will help you create a speedy user experience that’s designed for conversions.

Once that’s done, install and activate the WooCommerce plugin to your WordPress website. Upon activation, you’ll see the WooCommerce Setup Wizard. This will walk you through the process of adding eCommerce features to your WooCommerce food ordering website.

Here are the WooCommerce settings you should pay attention to:

Payment Methods

The Payment settings let you pick the different payment options you want to offer your customers.

At the bare minimum, you should offer an online payment option such as PayPal or debit/credit cards.

And, if you plan on offering take away, you might also consider offering Cash on delivery.

Shipping Zones

If you’re just starting out, you might need to charge patrons for shipping. WooCommerce makes this easy by letting you set up shipping zones. Head over to WooCommerce > Settings > Shipping from the admin panel to set up your shipping zones.

Here are some quick tips:

• Delivering food to a single area or locality. If you’re going to be delivering food orders to a single area then you only need to create one shipping zone. You can enable Flat Rate shipping and charge patrons the same delivery costs.
• Delivering food to multiple areas. If you’re going to be delivering food orders to multiple areas then you will need to create multiple shipping zones. This way, you can charge different Flat Rate shipping costs depending on the patron’s area.

How much you charge for delivering food will depend on the third-party food delivery service you choose to work with. Alternatively, if you plan on delivering food orders yourself, you’ll need to work out the costs.

Step #2: Add Food Items as WooCommerce Products

The next step is to create a food menu. For this, you’ll need to add individual food items as WooCommerce products to your online store.

Since you’ll likely be selling different types of food items, it’s a good idea to organize the foods into categories from the get-go. It helps to think of it as a real-world menu. Ask yourself: How would I categorize the menu? What would the different sections be?

For example, if you’re selling fast food, you might create four categories: Main Course, Desserts, and Beverages.

Next, head over to Product > Add New from the WordPress admin panel and enter the following product details for each food item:

• A title which will be the name of the food item.
• A short description.
• Choose the correct product category.
• The product image.

Once that’s done, scroll down to the Product data section and set the price for the food item.

If you want to add a variable food item (like pizza available in different sizes), make sure you use the dropdown to select the Variable product option.

Click the Publish button to continue. Repeat these steps until you’ve added all of the food items as WooCommerce products.

Step #3: Create a One-Page Online Food Ordering Form

Before you can display the online food ordering system on the front-end, we’ll need to configure the WooCommerce Product Table plugin. To do this, head over to WooCommerce > Settings > Products > Product table from the WordPress dashboard.

Here’s what you need to do:

Table content

The Columns option lets you choose which table columns you’d like to display on the front-end. For an online food ordering form, we recommend displaying columns for the food image, name, description, price, and an add to cart button.

To do this, you would simply enter image,name,description,price,add-to-cart in the Columns option.

Since we’re creating a one-page online food ordering form, set the Product links option to none. This way, your patrons won’t accidentally click through to the single product page.

Add to cart column

Set the Add to cart button option to either Checkbox only or Button and checkbox. This way, patrons can add multiple food items to their cart in one go. For example, they can tick the checkbox next to hamburger and Coke to add both food items to their cart.

Make sure the checkbox next to the Quantities option is ticked. This lets patrons order multiples of each food item in the same order, for example, two hamburgers.

Set the Variations option to Dropdown lists in add to cart column to deliver the best user experience. Patrons will see a dropdown menu in the order form that they can use to select the correct variation.

Set the ‘Add Selected’ position option to Above and below table to deliver a good user experience.

Table controls

Set the Product filters option to Custom using the dropdown menu and enter categories in the Custom filters field. By doing so, patrons will be able to filter the products in the order form by the different categories.

Make sure that the:

• Page length option is set to Below table.
• Search box is positioned Above table.
• Product totals option is set to Below table.
• Pagination buttons appear Below table.
• Pagination type is set to Prev/next + numbers.
• Reset button option is ticked.

These configuration settings will help you deliver a good user experience through your one-page online food ordering form.

Step #4: Display Your Online Food Ordering System on the Front-End

Now that we’ve configured both the WooCommerce plugin and the WooCommerce Product Table plugin, it’s time to display the online food ordering system on the front-end.

Navigate to Pages > Add New from the WordPress admin panel and enter a title for your online food ordering system. Next, create a new shortcode block and add [product_table] to it. Click the Publish… button and preview the page on your site’s front-end.

In its simplest form, your online food ordering system will look something like this:

Here are some actionable tips to spruce up your online food order form to make it even more intuitive and user-friendly:

Add Brief Instructions

Consider adding brief instructions explaining how to use the order form directly above the shortcode. For example, you could let patrons know that they can use the filter option and search bar to quickly find the food items they’re looking for.

Divide the Menu Into Separate Sections

If you have a large menu, you can divide it up into separate sections based on categories. This makes it easy for customers to select food items and place their orders.

To do this, simply use the shortcode [product_table category="main-course"]. Replace main-course with the slug of the product category you created.

Bonus Tips

Here are some bonus tips that will help you improve the user experience your online food ordering system delivers and potentially boost sales:

Tip #1: Tipping

You can use the Name Your Price plugin to accept tips from patrons. The plugin lets you add a suggested price and set the wording. You can then add this is a separate item directly to the one-page order form.

Tip #2: Quick View

WooCommerce Quick View Pro lets customers view the purchasing options in a quick view lightbox. This is especially useful for food businesses that sell lots of variable products. You can even use the quick view lightbox to show extra images of the food items.

Tip #3: Mobile Ordering

Most WooCommerce themes, like Shoptimizer, are fully responsive which means customers can simply access your online food ordering website from a mobile device to place their order. In other words, you don’t have to worry about creating a separate mobile site or developing a mobile app.

Tip #4: Taking Orders for Restaurant Chains

If your business is part of a wide chain, you can use WordPress multisite to create separate sub-websites for individual restaurant chains. This way, you can have different food items on the menu for different restaurant chains.

Conclusion

If you’re in the food business, switching to a takeaway or delivery-only model is far more cost-effective and sustainable than managing a dine-in restaurant.

Instead of opting for a hosted solution like Uber Eats, you can easily create a bespoke online food ordering system in WooCommerce using the WooCommerce Product Table plugin. As a result, you’ll be able to increase sales and generate more profit.

If you’re ready to create your own online food ordering system, get the WooCommerce Product Table today!