Online ordering is becoming one of the highest revenue streams for the restaurant industry. Many restaurants are adapting to this new concept of letting customers order online for pickup or delivery.
However, restaurants are relying on 3rd party platforms that take a fee or commission for every order. There are also 3rd party platforms that make customers pay an extra fee just to order, which could create more friction for orders.
After creating dozens of online food ordering websites on WordPress, I’ve listed out the must-have plugins you need to make your site look and perform just as great as UberEats or Doordash, without having to pay fees or commissions.
- Change Quantity on Checkout for WooCommerce
The standard WooCommerce checkout process involves customers adding products to the cart, then going to the cart, then going to the payment page. However, this process is one step too many for ordering food. Customers should be able to review and change their order while they are on the payment page, to make any last minute removals or additions. To do this, we need to install this plugin so that customers can edit their order on the payment page.
The original checkout page looks like this:
While the checkout page after plugin installation looks like this:
Now customers can go straight to the payment page and make any last minute changes to their order there!
- Direct checkout, WooCommerce Single page checkout, WooCommerce One page checkout
As mentioned above, we want customers to skip the cart page because that step is not needed. The more steps and actions we require the customer to take inbetween adding items and paying, the more friction we create before the order is completed.
We want to completely disable the cart page, so this plugin will help us do that.
Once installed and activated, you can find the settings page under WooCommerce > Direct Checkout.
There are a couple of tabs of options, with the first one being Basic setting.
In here, enable the Disable cart page but don’t enable the Enable single checkout page.
You also don’t want the Enable redirect on add to cart. This option will automatically redirect the customer to the payment page after they add just 1 item to the cart. This will disrupt their experience if they originally intended on adding multiple items to their order.
The next option should be disabled too: Disable continue shopping button.
The next tab controls what the “Add to cart” button text says. We definitely want to change this to be more consistent with food ordering, so we want to enable this and change the text to “Add To Order.”
We can skip the rest of the tabs.
This plugin does a lot for your online food ordering experience, and your WordPress site should be well on it’s way to accepting online orders!
After this plugin, you’ll send your customers directly from adding menu items to the payment page and change your Add to cart text to Add To Order!
- Elementor & Essential Addons for Elementor
Okay, I listed two plugins as one plugin because realistically this is one plugin with another one being enhanced functionality. Elementor is a visual page builder that let’s you build pages without needing to know any code. It’s very similar to the way you would build a page in Squarespace or Wix. You just drag and drop items like text, images, etc and where ever you drop them on the page is where they will appear!
I use Elementor mostly for the Tabs element where I can show mostly all of my food items in categories without making the customer scroll or lose focus of the page.
Remember, any change in page or loading or new pages has a high chance of interrupting the customer’s buying experience. So I like to keep the customer on one page that is unscrollable if possible.
Tabs lets me do that.
After you install and activate both Elementor & Essential Addons for Elementor, you can create a page that will serve as your menu display.
While you are editing the page, you will see a big button that says “Edit with Elementor.”
This will open a new page with a sidebar full of drag and drop elements. Click on the search box and search for Tabs. You want to drag the Tabs with the EA symbol on the top right on the page.
You’ll now see on the left side panel that you can name each of the tabs and place contents within each tab.
Pro tip: You want to name each of the tabs one category of your menu. To display one specific category of menu items within each tab, place this shortcode within each tab content:where “category” should be replaced with your menu category name, quotes included.
- PPOM for WooCommerce by N-MEDIA
If your restaurant has options like choosing different kinds of rice, noodles, meat or even adding addons, this plugin will help you include all of those options so that your customers can customize their order.
After installing and activating this plugin, you can see the settings under WooCommerce > PPOM Fields.
Your first step would be to create a PPOM Meta Group. Each one of these meta groups would be one specific set of options for any amount of your menu items.
For example, if you sell pizza and have the same size, topping and addon options WITH the same price for all of your pizzas, you only need to create one of these Meta Groups for all of your pizzas.
After you create your Meta Group, you can click on the “Attach to Products” button in the same row as the Meta Group you just created to attach it to any of your menu items.
To make sure that the options are set up correctly, go to the product page of the menu item you just attached the Meta Group too and see if it is exactly how you want it to look like.
- WooCommerce Checkout Manager – QuadLayers
Whether you are offering pickup or delivery, you need to be able to set which billing and shipping fields show on the payment page. For example, if you only allow pickup, you won’t want any billing or shipping address fields to show. You don’t need either pieces of information to let the customer order and make a secure payment.
This plugin will let you disable the billing and shipping fields so that the customer doesn’t see the fields and doesn’t see the dreaded “Enter an address to continue” error message even though the fields don’t show (if only you knew the hours I spent to figure out how to solve this small issue, but hey I now you don’t have to!).
After you install and activate this plugin, you can find the options in WooCommerce > Checkout.
To make it so that the customer doesn’t have to enter any billing or shipping address and be able to complete the order, click on the Billing link just under the tabs on the top of the options. Then Disable all all of the address fields.
Next, instead of changing any of the shipping fields, you want to go to WooCommerce > Shipping > Shipping Options and under the “Shipping destination” set it to “Force shipping to customer billing address”
Go to your payment page now and see if any address fields show. If they don’t, not only do you have a cleaner looking payment page but you also reduce friction for customers completing orders!
One more thing you want to check is if the transaction will work without needing any of the address fields to show or be required. To do this, you can create a test transaction by setting you payment setting to “Test Mode.” I use Stripe so I set my payment mode to Test. Now, visit your payment page in an incognito browser and make a test transaction.
If it works, you’re golden!
- WooODT Lite
It’s important that you let customers order at anytime, but only set a pickup or delivery date and time during your opening hours. This plugin lets you do exactly that.
After installing and activating this plugin, you can see that the options are surprisingly not under WooCommerce, but under it’s own tab called “Order Delivery Time management.”
Looks pretty Ghetto but I tried it and it surprisingly worked flawlessly. Go to the settings page and choose whether you allow Delivery, Pickup or both.
Then, set the amount of days that customer can pre-order. If your operations can stay organized enough, I would put the number of days to 3. If you want to keep it simple, I would set it to 1. You can’t set it to 0.
Set the Time field validation to mandatory. You want customers to NEED to fill out the time before they can finish their payment.
Set your pickup hours and delivery hours. The hours you set here will be the only range of time that customers can choose for pickup and delivery respectively.
You can set the minimum delivery time which will only let a customer choose a date and time that is 30 minutes in the future of their current ordering time.
You can look through the rest of the options but I kept everything else on default.
Now, you can check this functionality by going to your payment page. You should see the option for date and time on the top of the page.
You should notice that you can’t select a time without a date which is exactly what we want.
You can also try a test transaction without setting a date or time and see if the transaction goes through. It shouldn’t.
Now try another test transaction with the date and time fields filled out. The transaction should work and the confirmation email for both you and the customer should have a date and time on the bottom of the email.
The 6 plugins mentioned above were tried and tested with real restaurants that I’ve worked with. I hand-picked these 6 plugins after testing many of their competitors, even competitors that had way more installations and better reviews.
However, I know that even though a plugin is more popular, doesn’t mean it’s the best fit for what I am trying to accomplish.
So just to recap on the functionality that we upgraded from the standard WooCommerce setup to be more for food ordering:
- Changed add to cart button text to add to order – Direct checkout, WooCommerce Signle page checkout , WooCommerce One page checkout by PI Websolution
- Cart disabled and goes straight to checkout – Direct checkout, WooCommerce Signle page checkout , WooCommerce One page checkout by PI Websolution
- Select date and time for pickup/deliver – WooODT Lite by ByConsole
- Order review while paying – Change Quantity on Checkout for WooCommerce by Bhavik Kiri
- Options for menu items – PPOM for WooCOmmerce by N-MEDIA
- Change checkout fields – WooCommerce Checkout Manager by QuadLayers
Which ones were helpful for helping you turn your WordPress site into an online food ordering platform, while saving money from commissions and fees from 3rd party platforms?!