Set up your ordering site
This guide takes you from a WooCommerce store to a working ordering page with the Checkout block. Each step links to a page with more detail.
1. Add your dishes
Section titled “1. Add your dishes”Add your dishes as WooCommerce products and put them in product categories. The categories become the sections of the menu, for example Starters, Pizza and Drinks. Give products an image and a short description; both are shown on the menu.
For choices such as size or toppings, use variable products or WooCommerce Product Add-Ons. The guest picks them in the product popup.
2. Set up shipping
Section titled “2. Set up shipping”Food Online uses WooCommerce shipping methods for the three modes:
| Mode | WooCommerce setting |
|---|---|
| Delivery | A shipping zone for your delivery area with Flat rate, Free shipping or Shipping Zones by Drawing. |
| Pickup | WooCommerce → Settings → Shipping → Local pickup, turned on and with at least one location. |
| Eat in | The Eat Here Method added to your shipping zones. |
See Delivery, Pickup and Eat in.
3. Create the ordering page
Section titled “3. Create the ordering page”Go to WooCommerce → Settings → Food Online Premium → Blocks Guide and click Create Ordering Page with Menu Flow. This creates a draft page with Menu Flow and opens it in the editor.
In the editor:
- Select Food Online Menu Flow and choose the modes you offer under Modes.
- Select the Food Online Menu inside it and choose a design under Display Settings → Select layout template.
- Publish the page and add it to your site menu.
With a block theme you can also show the menu on the WooCommerce shop page. See Menu page and design.
4. Set up the checkout
Section titled “4. Set up the checkout”- Under Food Online Premium → Checkout, set Checkout engine to Checkout Blocks.
- Make sure your checkout page uses the WooCommerce Checkout block, and that it is selected as the checkout page under WooCommerce → Settings → Advanced.
- Open the checkout page in the editor. Food Online has added Food Online Shipping Mode to the checkout. Select it and choose the same modes as on the menu page, and which fields each mode needs.
See Checkout reference.
5. Set opening hours and times
Section titled “5. Set opening hours and times”- Under Food Online Premium → Availability Schedule, add rows with the application Time Picker Slots for the days and hours you take orders.
- Under Time Picker, turn on the time picker for pickup and/or delivery and choose the step between times.
- Under Order Time Management, set how long an order takes to prepare.
See Opening hours and order times.
6. Check addresses (optional)
Section titled “6. Check addresses (optional)”To check delivery addresses before the guest orders, get a Google Maps API key and enter it in the Food Online Address Checkup block inside Menu Flow. A postcode check works without Google. See Address check and Google APIs.
7. Test an order
Section titled “7. Test an order”Place a test order for each mode you offer. Check that:
- the right modes, times and fields are shown in the checkout
- the order in WooCommerce → Orders shows the mode, the time and, for pickup, the location
- the order emails include the same information
What the restaurant sees
Section titled “What the restaurant sees”Food Online saves the guest’s choices on the order:
- Admin order page: under the billing address, the order type (Delivery Order, Pickup Order or Eat at Restaurant), the chosen time, the table number for eat in, the pickup location, and a map link when the guest picked the delivery spot on a map.
- Orders list: turn on Checkout → Show delivery mode in admin orders table? for a column with the mode.
- Emails: the mode, time and pickup location are added to the order emails. For a pickup order, the New order email goes to the email address of the chosen pickup location, if it has one.