The global pandemic is pushing many restaurant owners to offer online only delivery and service. As an agency, we have seen many many requests on how to implement online ordering into your digital presence. Building a platform in WordPress that will allow customers to order ahead, schedule a pick up time and then pay for their purchase is becoming an essential function for any restaurant today.

In this blog post we are going to go over the top 4 WordPress website plugins that will allow you to offer these functionalities to your customers, diversify your income streams, and sell food online. We will compare several plugins, choose the best one, and then build a website using it -- documenting every step of the way. We hope that restaurant owners can follow this guide and implement the same functionality into their new or existing WordPress websites.

Why does this matter?

Many restaurants can offer their services through GrubHub or doordash, but some can't. Implementing a solution that allows you to do this yourself will set you apart from your competition, who follow the traditional model of “phone orders”.  even if you can use a service like GrubHub or doordash, this seriously cuts into your profit. Once you set up your website to offer online ordering, you can push all of your visitors there through social media and Google SEO --  this cuts out the third-party service, and helps you make more money.

Even without the global coronavirus pandemic, selling your food online is becoming more and more standard across the industry.  46% of adults say that the ability to order takeout affects their choice to eat with you in the first place (and this survey was taken before coronavirus).

What are we looking for?

First, we're going to isolate the features that we feel most restaurants need in this day and age. We discussed some of them above, but let's go over them again. If you are a restaurant looking to sell food online, you'll need a plug-in that can:

• Display your menu to customers
• Allow customers to add dishes to their basket
• Allow customers to schedule a pickup time
• Process credit/debit card payments
• Be easy to use and understand

In some cases, this plug-in will replace your entire ordering system. We find that many customers who we build food ordering websites for will purchase a cheap desktop computer with a monitor, and use it as their main point of sale system.

You also want this plugin to be extremely mobile responsive on the customer end, and high-performing in both speed and functionality. This is because, the majority of your customers will find your website on their phone. They'll do this through a typical Google search, Apple's Siri search, Google Maps, or your Instagram bio link. Whatever the case is, they will be viewing the website on a mobile phone screen, which means it needs to be super easy to use in this format. That's why we always recommend you focus on mobile first design, and then build your desktop website from your mobile site.

It's a known fact that websites will load slower on phones then they will on desktops, simply because there's less processing power. That's why it's extremely important to optimize your website for Speed, and she's a plug-in that doesn't require much to load ( The last day to load, and both CSS and JavaScript, the faster your website will be).

There are several service solutions out there for restaurants, but we believe WordPress may be the best option for small, single location restaurants. This is because your monthly costs can stay down, as all you need to do is pay for hosting ($10ish per month). With the services they'll take a chunk out of your payment processing, as well as charge a monthly fee.  WordPress is also highly expandable, and can grow as your restaurant grows.

So in short, we want to add e-commerce capabilities to our restaurant website, and offer local pickup for takeout food.

What are some industry-leading plugins?

There are a collection of industry-leading plugins out there for the WordPress ecosystem, which will allow your restaurant to sell take out online. 

Let's take a look at some of them, and figure out which one is the best value. We're looking for a plug in that contains all the features mentioned above, is simple to implement, and doesn't require much customisation. We're writing this tutorial to help restaurant owners add this functionality to their company, and understand that you may be on a tight budget --  being able to do this DIY is an essential part of our selection.

The Isotropic Agency would love to build your restaurant website for you. We are also happy to consult with you on how best to implement this functionality in your existing or new WordPress website. Whether you choose to build it yourself, or have us do it for you, we would love to be a part of your project. Please reach out!

Here’s the list of plugins that we're going to run through. From a quick Google search, these plugins were the most recommended out of the bunch.

• RestaurantPress
• This is a free plugin that displays your menu on WordPress. To enable the ecommerce (which is the base feature of the site), you'll need to buy a $40 addon.
• Foodomaa 
• Foodomaa is more to build a network of multiple different websites -- like Grubhub. For a single restaurant, this isn't the best solution.
• WooCommerce Food
• This is the first of a few plugins that will allow you to sell food through WooCommerce.
• WooFood 
• A much heavier plugin for WooCommerce that offers advanced features like automatic label printing & live order accept/decline.
• WP Food
• Another plugin that connects to WooCommerce, that's lighter than WooFood.

We ran through every plugin that was mentioned, and found that many didn't great value. Most were published in late 2017, and hadn't been updated since. This means both the design and the performance of the plug-in would probably be lacking.

This is pretty surprising as everybody on the Internet is suggesting that you should use these.

Instead of using a plug-in, we looked to incorporate an entire theme solution. We wanted to be able to build pages with Elementor, but we also needed a solution that worked out of the box. This is because, if you're a restaurant owner looking to do your own website, you don't want to focus on web design, you just want to sell your food online.

Let's look at themes

Moving to a complete theme solution is a bit different than simply incorporating a plug-in. We're going to have to work within the design constraints of the theme, but this might actually make our lives easier as much of the team is pre-built.

If we went to plug in route with Elementor, we'd use the Hello Elementor theme which has virtually no styling. For us, choosing a theme that worked well with Elementor and looked better than the plugins listed above was a necessity.

In the restaurant industry, there are limited amounts of WordPress themes that are designed to sell food online. There are bunch of themes that will allow you to have a great looking WordPress restaurant website, but they're lacking the ecommerce features. Because of this, we took a look at themes designed for grocery stores. These sounded much more promising and can easily be repurposed into making online restaurant sales easy for your customers.

There were two leading themes that we found in this arena:

Greenmart-
This is a highly recommended theme and well-reviewed on Themeforest, but the main issue is that it doesn't play nice with Elementor out of the box.

Naturally-
This is a nice, modern looking theme that integrates with woocommerce and Elementor. Because of these Integrations and the good design, we're going to go with this one. Remember we want Elementor to be able to easily expand our website using a Visual Builder.

Now that we have identified a theme, it's time to set up our WordPress website.

Any website with back-end e-commerce processing, which is what you're trying to build, requires more resources to run smoothly. If you're using subpar hosting, then your website will be slow on both the back end in the front end. In some cases, this can make a website unusable for visitors, and be a detriment to your revenue.  We recommend hosting your website with a server that can offer at least 2 gigabytes of RAM. We also think that your host should be expandable in the future, in both storage and processing power.  Our favorite host for e-commerce website is called Cloudways, and it offers a platform that allows you to host your site on five of the leading cloud services providers (think AWS and DigitalOcean).

 With Cloudways, you can get 30% off your first billing cycle with the code “ISOTROPIC”.

Plugins & Themes

We’ve found our host and set up our base WordPress installation, so it's time to build the actual website.  The first thing to do is install our base set of plugins, and our theme.  We're going to use the Naturally theme and this base set of plugins:

• Elementor -- This is the best plug-in that we will use to build our pages with.
• Elementor Pro -- This is the professional plug-in that we use to build the pages. The pro version of Elementor affords a lot more capability than the free version, so you can build headers, footers, and templates.
• Sendinblue SMTP -- This is a standard plug-in that we install in all of our WordPress sites which allows the website to send emails via SMTP. If you opt to send via your base WordPress installation, there's a chance that it will get marked as spam.
• WooCommerce -- This will be the backbone of the ecommerce system that customers purchase your food with. It's free.

We chose to build the static pages of our website with a page building tool called Elementor Pro. We did this, because it's really easy and user-friendly --  if you're building your own restaurant website, doing it visually is much better than doing it through code.  Elementor allows you to build your website using and intuitive page builder, as you will see in the remainder of this post.

Grab the theme from Themeforest and download the Zip archive. Then, upload it into your WordPress installation by going to Appearances --> themes --> add new, upload.

Install the plugins through the Plugins --> Add New. Install the theme through Appearances --> Themes.

After uploading the theme to your website, click activate, and then follow the included wizard that will walk you through the base configuration. Import demo content as this will make our job designing the website a lot easier.  With demo content will have a base set of pages to work from, and instead of building new ones we can simply change the colors, wording and typography of the existing pages.

As this is a demo site, we're not going to build the whole thing -- but let's run through some things that will help you set up your site to sell restaurant takeout quickly.

First, this theme comes with a TON of demo pages. The quickest way to build your site would be to repurpose the existing content into something that fits your brand. Go through the pages and find the one that you like most. Do this for the:

• Homepage
• About Page
• Blog Page
• Contact Page
• FAQ Page
• Shop Page
• Any other pages you may need

Once you've found a page that you like, go to the admin bar and click edit with Elementor. The Elementor page builder will load and you will be able to visually edit the content on the page. We recommend changing the colors, text, and photos in the static pages to assets that match your brand.

When editing with Elementor, the main things you should focus on is the styling, and the content. For the default styling of colors and fonts, go to Appearance --> Theme options.

From this page, you'll be able to fully customize your theme to suit your needs:

For the content, in the page builder specific to the paeg you need to edit, go to the text that you actually want to change, click on it, and enter what you want in the sidebar.

Once your pages are set, go to Appearcne --> Menu, and set the menu to display the needed pages.

Configure The Site To Sell

The first plugin to install is WooCommerce, a free plugin.  This is the underlying e-commerce framework, which will allow you to automate your taxes, track your sales, and process payments.  We do this by installing the WooCommerce plugin, and following the simple setup wizard.

We also recommend that you install WooCommerce Admin, which is a plug-in that offers a modern reports dashboard where you can review revenues, net sales, and more.  you can sort this by day, and access advanced analytics and gain insights from this. This is free as well. 

Finally WooCommerce related plugin that you may want to look at is the WooCommerce Stripe payment gateway. It allows you to process payments through stripe, which is a service that many small businesses are already using. Depending on what service you use for payments, you can typically find an extension to WooCommerce for that specific processor. You can always add new processes, and remove existing ones as your business needs to grow and evolve.

There are many tutorials, detailed documentation, and YouTube videos that discuss how to properly configure each of the plugins that we've listed above. We're not going to go into the specifics of setting each of these up, but it should be pretty simple and straightforward.  When configured properly, you'll have a fully functional e-commerce system that accepts credit card payment through Stripe. You’ll also have access to extremely detailed Analytics:

This plugin is optional but could be really helpful, especially if you're a popular restaurant. Limit Orders for WooCommerce lets you limit the number of orders your store will accept per day, week, month, or hour (probably your use case, limiting it to 20 orders per hour) while giving you full control over the messaging shown to your customers when orders are no longer being accepted. Once limiting is in effect, “Add to Cart” buttons and the checkout screens will automatically be disabled. This can make it so your shop is not overwhelmed with 100 orders in one hour.

Once you have configured your website to your liking, it's time to actually add your menu.  First, configure categories. For example if you sell pizzas and pastas, make a category for pizza and make a category for pasta. You can repurpose an existing theme demo item by changing the title and description, or you can add your own and delete the demo items. 

Be sure to add a thumbnail image as this is shown on the front end of the theme.

Now, if you go to WooCommerce, products, you'll be able to add your individual food items. This is pretty easy and simple.

Simply click the “add new” button, enter your menu item information, and hit publish. Be sure to categorize your menu item in one of the categories that you just made. Now you can check on the shop page of your website, and you'll see the new menu item. Do this for all items in your menu, and be sure to add images, titles, descriptions and set your price accordingly.

If you set up your theme correctly, you should be able to click on the item, add it to your cart and check it out. You can also add it to your wishlist, if you have configured that functionality.

Here’s what a menu item looks like. If you changed this to fit the needs of your restaurant, it may say “Medium Pizza”, be categorized as a pizza, show the image of the pizza, and cost $22.

If you were a customer you could add whatever you, the restaurant owner as listed on the website. So under drinks, they could add a Coke if you added it to the website.  Once they’ve added all of their food and ready are to check out, they can do so through the cart functionality:

As long as you have configured your payment options in WooCommerce, this theme will automatically build the e-commerce checkout pages and style them to your specified colors and fonts. 

When they check out, the order will be emailed to you, and they can be redirected to a page that states (Order will be ready in 30 mins!). You can also set WooCommerce to email this to them. Their credit card payment will be sent to your Stripe Account. Because you collect phone numbers at check out, you can text or call your customer when the food is ready for pickup.

We discussed the backend reporting/analytics setup for WooCommerce, but you can also set up realtime notifications using the plugin below.

When you get an order, this notification will pop up. You can click on it which will send you directly to the order. That'll display what menu items were ordered & at what time, so you can begin making them.

A setup could be an old desktop, monitor and peripherals in the corner of the kitchen. Every time a new order comes in, your staff can see it on the screen and prepare it accordingly. Because WordPress is the most expandable CMS that you could use, you can also add in label printing, live email alerts, live text alerts, and a lot more.

This blog post should have introduced to you the best ways to make a WordPress website for your restaurant, so you can have a strong digital presence and sell takeout online.  If you would like guidance on creating the most cost effective website for your restaurant, feel free to schedule a consulting call with us, or speak with us about building your business a custom website.