1. Knowledge Base
  2. WooCommerce Restaurant Ordering
  3. Setting Up Your Restaurant Ordering System

Adding delivery and collection to your restaurant ordering system

WooCommerce Restaurant Ordering lists your food products in a quick one-page order form. Once customers have selected their foods and added them to the cart, the checkout process is provided by WooCommerce itself. This means that you can use all the amazing features that are built into WooCommerce, including letting customers order food for home delivery or collection.

This article explains how to add delivery and collection options, and also how to allow customers to choose a time slot for delivery during your restaurant opening hours.

Delivery zones

Many online restaurants offer home delivery within a specific area only, while allowing anyone to order food for collection regardless of their location. You might have a free delivery radius and a paid delivery area. You can do all this using WooCommerce Shipping Zones.

For example, the below screenshot shows how you might set up shipping zones and delivery/collection options for a typical online restaurant:

WooCommerce shipping zones restaurant delivery collection

In this example, we created 2 WooCommerce shipping zones and added shipping options to each zone as follows:

  • Shipping Zone 1 – ‘Free Delivery Area’ – This is used for customers in UK postcode areas PL1 and PL2, and gives a choice of free home delivery or local pickup.
  • Shipping Zone 2 – ‘Paid Delivery Area’ – This is used for customers in UK postcode areas PL3-6, and gives a choice of paid delivery or local pickup.
  • Other locations – Customers outside of the above locations can choose local pickup, but can not order food for home delivery.

Delivery costs and free delivery

You can offer free delivery and set shipping costs by adding shipping methods to each shipping zone. This allows you to do perform tasks such as charging for delivery, or offering free shipping for orders over a certain value.

WooCommerce provides a choice of delivery options:

  • Flat rate – Use this for paid delivery.
  • Free shipping – You can offer this to everyone in the shipping zone, or select a minimum order value. Free shipping will only be offered when the cart contents are above the minimum value.
  • Local pickup – Allows customers to avoid paying for delivery by collecting their food order from the restaurant.
WooCommerce restaurant delivery options
Delivery options for a particular shipping zone - this example offers paid home delivery, free delivery over a certain order value, and local collection
WooCommerce restaurant free delivery minimum order value
You can use the free shipping option to offer free delivery for all orders over a certain value

Can customers choose a delivery or collection time slot?

Many online restaurants need a way for customers to choose when to receive their food delivery, or when they can collect their order from you in person. They also need a way to add opening hours, and prevent people from ordering when they’re closed.

To add these extra features, we recommend using WooCommerce Restaurant Ordering with WooCommerce Delivery Slots from IconicWP. The two plugins work perfectly together: WooCommerce Restaurant Ordering provides the front-end food order forms, while Delivery Slots allows customers to choose a date and time slot when you are open.

How to add delivery slots and opening hours

  1. First, install and set up WooCommerce Restaurant Ordering.
  2. Next, get WooCommerce Delivery Slots and install it on your WordPress site.
  3. Go to WooCommerce → Delivery Slots and add your opening hours and available delivery and time slots.
  4. Finally, you need to choose where to display the available delivery slots in your restaurant ordering system. They will always be displayed on the checkout. However, to avoid disappointment, we recommend allowing customers to choose a slot before they start adding foods. There are 3 ways to do this:
    • Option 1: Add a delivery reservation table to a pageYou can list all the available slots directly on a page, above the food order form. To do this, add [jckwds] above the [restaurant_ordering] shortcode.
    • Option 2: List delivery slots in the sidebarTo reduce space, you can also list the delivery reservation table to a sidebar widget so that it appear next to the food order form. To do this, add the shortcode [jckwds] to a ‘Text’ or ‘Custom HTML’ widget in Appearance → Widgets.
    • Option 3: Show delivery slots in a popupAlternatively, you can add a ‘Choose a Delivery Slot’ button which will display the delivery reservation table in a popup window. You can use any type of popup, but these instructions use the free Popup Maker plugin:
      1. Install Popup Maker.
      2. Add a button either above the [restaurant_ordering] shortcode, or to a text widget. Your theme should provide a shortcode or CSS class for creating buttons.
      3. Add the shortcode [jckwds] to the popup.
      4. To trigger the popup when clicking the button, add the CSS class popmake-choose-delivery-slot to the button, replacing ‘choose-delivery-slot‘ with the actual name of your popup. For example, if you were adding an HTML button using the class ‘button’ then you might add this to a HTML block or widget:
<a class="button popmake-choose-delivery-slot" href="#">Choose a Delivery Slot</a>

Can customers check they’re in the right area before they start ordering?

To avoid disappointment, we recommend making your delivery area clear to customers before they start selecting foods. There are several ways you can do this:

  • Woo Delivery Area Pro pluginCreate a ‘Delivery Area’ page and link to it from your main navigation menu.
  • If your restaurant ordering page has a sidebar, add a widget about the delivery area – either containing text or a custom Google map.
  • Install the Woo Delivery Area Pro plugin and add a widget allowing customers to check whether you will deliver to them.
Still need help?
If searching the knowledge base hasn't answered your question, please contact support.

Related Articles