• Home
  • |
  • Blog
  • |
  • 6 Must Have Free WooCommerce Plugins For Zero Fee Online Food Ordering

March 27, 2020

6 Must Have Free WooCommerce Plugins For Zero Fee Online Food Ordering

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.

  1. 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:

woocommerce standard order summary

While the checkout page after plugin installation looks like this:

woocommerce editable order summary

Now customers can go straight to the payment page and make any last minute changes to their order there!

  1. 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.

woocommerce direct checkout settings placement

There are a couple of tabs of options, with the first one being Basic setting.

woocommerce direct checkout settings

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.”

woocommerce add to cart button text change

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!

woocommerce add to order buttons
  1. 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.”

edit with elementor button

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.

insert tabs into elementor page

You’ll now see on the left side panel that you can name each of the tabs and place contents within each tab.

edit tabs in elementor page

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.

show specific woocommerce category with shortcode
  1. 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.

woocommerce product options and addons

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.

woocommerce product addons and options creator

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.

woocommerce product options and addons editor

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 product options and addons selection page
  1. 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. 

woocommerce checkout field settings placement

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. 

disable woocommerce checkout billing 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”

force woocommerce 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!

no woocommerce billing or shipping fields

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!

  1. 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.”

woocommerce order and delivery time settings placement

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.

woocommerce delivery or pickup time settings

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.

woocommerce delivery or pickup time display

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.

Recap

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:

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?!

Related Posts

Facebook Messenger Bot Setup For Restaurants Using Manychat

Facebook Messenger Bot Setup For Restaurants Using Manychat

Link Facebook Ads with Manychat Facebook Messenger Flows

Link Facebook Ads with Manychat Facebook Messenger Flows

Restaurant SMS Reminder Sequence Using Manychat

Restaurant SMS Reminder Sequence Using Manychat

Restaurant Email Offer Reminders Using Manychat

Restaurant Email Offer Reminders Using Manychat

Wilson Muh


Wilson Muh

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>