Documentation - Food Online Premium

Documentation - Food Online Premium

This documentation is describing the latest release of the Food Online Premium version. The free version can be downloaded from


  1. Download the extension from your Arosoft Dashboard
  2. Navigate to Plugins -> Add New
  3. Then click Upload Plugin
  4. Now click Choose File and select the .zip
  5. Click Install Now
  6. Deactivate the free version of Food Online (if activated)
  7. Click Activate Plugin

Update of new version

  • Download the new version from your Arosoft Dashbord
  • Make sure that the option Delete Settings? is unchecked so that your settings are preserved.
  • Remove your current installation of Food Online Premium from your Plugins tab at the WordPress dashboard.
  • If you are upgrading from the free version of Food Online you have to deactivate the free version.
  • Install the new version as above.


Get information on the latest and previous releases from the changelog.

Getting Started

The settings page can be found as a tab in the WooCommerce Settings.

Insert the Food Online Menu at the WooCommerce shop page by selecting “Show menu” option at the main settings tab. If you like to use the standard WooCommerce page template and only use the delivery features, select option “Show only delivery feature”.

It is also possible to insert the Menu at another page using the shortcode [foodonline].  Choose sorting, categories and products with shortcode arguments, see the shortcode section below for further instructions. To only insert the delivery feature at another page, use shortcode [foodonline_delivery].

If you are using a Theme or other plugin that interviene with the WooCommerce product loop it is possible to use shortcode [foodonline2] as an alternative.

You are now ready to show the Menu with the plugin default settings. Add simple or variable products in WooCommerce to start fill your Menu.

Delivery Features

To activate and setup the delivery features, go to the settings tab “Delivery Features” at the Food Online Premium settings section. Choose Address Validation to validate the user delivery addresses. If you choose Post Code Validation, the Google Maps API will not be needed. 

Get Started with Delivery Address Validation

Before it is possible to start validating delivery addresses at the Menu, you have to get your Google Maps API Key.

To get started with Google Maps Platform you will need a google billing account. Read this Get Started guide.

Be sure to include Maps JavaScript API, Places API, Geocoding API and Directions API as shown in the figure below.

Selection of APIs

It is recommended to restrict access to the key by IP number or HTTP-address. Remember to add an asterix (*) if you don´t adding the exact path. For example*

Restriction of API Key

Insert the API Key at the “Delivery Features” settings section.

Insert Google Maps API Key

Setup of WooCommerce Shipping Zones & Methods

If you are a beginner working with WooCommerce Shipping Zones, it is recommended to first read trough the documentaion.

Be sure that you are aware on how the shipping zones work, and especially that only shipping methods from the first matched zone are being included at checkout.

Shipping zones match customer address from top to bottom — the first to match the customer address is always used. If no custom zones match, then Locations not covered by your other zones is used.

WooCommerce Shipping Zones Documentation

The “Pick Up” mode of the delivery selector will use the WooCommerce shipping method “local pickup” and the “Delivery” mode will use “flat rate”, “free shipping” or other methods like “shipping zones by drawing”.

To be sure that the delivery selectors mode “Pick Up” will work, make sure to add the shipping method “local pickup” to all of your WooCommerce shipping zones. Do not forget to also add it to the zone “Locations not covered by your other zones”.

Delivery Mode

The delivery mode is the pimary setting when setting up the delivery feature. There are four available options that differ in both display and functionality.

Delivery Switch always with the choices Pick Up and Delivery

Dropdown Selector with the choices Pick Up, Delivery & Eat at Restaurant.  Choose if to include one, two or all three of them in the selector.

Only Delivery mode doesn´t show any switch or selector but the address- or post code validation form is shown and all other implications of a delivery order ( such as checkout set up, time picker, order times, minimum order value etc.) will be applied.

Only Pick Up mode enables all implications of a Pick Up order such as checkout set up, time picker and order times.

Default Mode of Delivery Selector

Choose if the initial state of the delivery selector should be “Pick Up” or “Delivery”.

If the delivery mode is “Dropdown Selector”, it is also possible to choose “Eat at Restaurant” as default.

If a customer session is already active, the latest choice will be shown when a customer return to the menu page.

Delivery Selector

Make Selection Mandatory

It is possible to set the initial position of the delivery selector as neutral and thereby force the user to make a choice. It won´t be possible to checkout without an selection made.It is possible

Delivery selector 3-way

Delivery Address & Post Code Validation

At the Menu page, it is possible to let the users insert their delivery addresses or post codes to get them validated regarding if delivery is possible and to get information about fees.

If you select not to validate, the delivery options will be shown at checkout as a standard WooCommerce setup.

Address and post code validation

Pick Delivery Location from Map

If the user enter an address that can´t be geolocated as an exact delivery address, a map will be shown to let the user pick the exact delivery location.

A map link to the picked delivery location will be attached to the admin and customer e-mails.

This feature can be nessesary if you are in a country or area where google has poor address coverage.

Pick delivery location Map
Pick delivery location from map

Allow user to bypass address validation

Choose this option to show a checkbox beneth the address validation form that let user skip the address validation and continue to checkout. The delivery options avalible will be shown at checkout as at a standard WooCommerce checkout page.

Bypass address validation

Minimum Order Value / Items per Order

You can set a minimum order value limit for delivery, default is 0 which means no limit. It is also possible to set a minimum quantity of items per order for delivery.

These limits will be controlled when a customer press the checkout button and the user will be informed if the conditions are not fulfilled.

Delivery location validation feedback

You can use colors ( green for positive & red for negative ) as part of the delivery location feedback.

It is also possible to choose how the messages appeare at screen. Either by a pop up or by printing on to the screen.

Color code message
Positive feedback
Negative feedback
Delivery message printed out to screen

Add Shipping Cost Suffix

When a user selects an delivery address from the address form, it will be validated and the user will get recieve a notice if delivery is possible or not.

If using this option, the notice will also contain the shipping cost.

Show Best Shipping Method

This option open up to only show a single shipping method at checkout. The method with the lowest cost will be chosen. If there are more than one shipping methods with equal cost, the top sorted shipping method will be chosen.

As an example, this could be nessesary if several shipping methods are used with different levels of minimum order amount limits. It would then be a good behaviuor if the unnesisary methods are hidden.

Add Delivery Mode Column in Orders Table

It is possible to add a extra column in the admin orders table to easily visualize the chosen mode of delivery.

Menu Layout and Styling

Menu Layout Settings

There are three layouts to choose of. One Column, Two Columns and 2020 Template

One Column Layout
Two Column Layout

2020 Template Layout

Accordion Menu

To only display one category at time at the Menu, choose to display it with an accordion behaviour.

Accordian Option
Accordion Menu Behaviour

Top Bar

The top bar apperar above the Menu and contain the delivery selector, delivery address form, order time notice, a link to the cart and a info icon that shows relevant information when the user interact at the Menu.

If the top bar is not choosen the content of it will be placed in the right side bar.

Top Bar above the Menu

Categories Menu Position

A menu with product categories can be displayed above or to the left of the food Menu. If the option “Show Sub Categories along with Parent Category” is choosen, the sub category will not show up in the category menu.

Left and Top position of Category Menu

Layout at Mobile Devices

The Menu will be adjusted to the current device width and there is an option if to show a category menu at the top. It is also posible to show the categories with a dropdown.

A bottom bar with links to the cart, checkout and back to main Menu can also be shown at the pages you choose.

Mobile Bottom Bar
Mobile Category Menu as Dropdown
Dropdown Menu

Customizing Bottom Bar Icons

The icons in the mobile bottom bar uses Fontawesome icons and it is possible to change the icon with some additional CSS.

Find the icon you like to use and insert the Unicode in to the additional CSS as shown below.

/* Cart Link */
.fdoe-handheld-footer-bar ul>a::before {

content: “\f57b”;


/* Menu Link */
.fdoe-handheld-footer-bar ul li.minicart>a::before {

content: “\f07a”;


/* Checkout Link */
.fdoe-handheld-footer-bar ul li.fdoe_checkout_2>a::before {

content: “\f061”;


.fdoe-handheld-footer-bar ul li.fdoe_checkout_2 .fdoe_checkout_22 {

Subcategories Settings

By default, product subcategories are treated as ordinay categories and displays as other categories in the Menu.

If you wish to present the Menu in a hierarchical manner and place subcategories beneath the parent category it is possible with the option shown below.

In the example below it is shown how the subcategories Vegetarian and Non Vegetarian are sorted under their parent category Italian Pizza. Remark that the subcategories are not shown at the category menu.

Example of subcategory

Menu Style Settings

Below follows a concise list of the different Menu style option.

Menu Color

The Menu color will affect icons and Menu headings.

Menu Background Color

Choose a Menu background color. Leave blank to make it transparent.

Menu Items Separator Style & Color

Choose the style and color of the border between Menu items.

  • Dashed
  • Solid
  • Dotted
  • None
Menu Titles Icon

Choose the icon to display along with Menu titles like shown below.

The Menu titles in the Menu Layout 2020 will not have any icons displayed.






Chile Pepper




Item Icon

Choose the item “Add” icon in the Menu as shown in the example below.



Square Shape Plus


Knife & Fork

Shopping Basket

Shopping Cart

Shopping Cart with Plus

Product Images

Choose size of product images or to not show them at all.

Product Image Type

Select if to use our default uncropped and light product image type or to use WooCommerce Thumbnail type.

“WooCommerce Thumbnail defaults to 600px width, square cropped so the product grids look neat. The aspect ratio for cropping can be customized by the store owner.”

Category Images & Descriptions

Choose to show image and description in the Menu.

The placement will vary depending on the Menu Layout chosen.

Main Settings Tab

Main Settings


Choose to make booth left menu bar and right side cart sticky. As a result the side bars will always be visible on the screen.

It is also possible to set the stickyness bahaviour for mobile devices

Smooth ScrollingSmooth or “soft” scrolling will be implemented when clicking in menu links. 
Show confirmation when added to cartA label with the text, “Added to cart” will inform you that the item is added. 
Hide the Storefront Theme HeadingsChoose to hide the Menu, Search fields and Cart in the page headings? (Only for the official WooCommerce Storefront Theme) 

Product Pop Up Options

Pop-up simple products?Use pop-up for simple products when add-to-cart.
If you choose not to show the pop-up the item will be added directly to cart.
Pop-up variable products?

Use pop-up for variable products when add-to-cart or add them directly to cart. It is not possible to directly add a variation product with a selection.

It is also possible redirect to the standard WooCommerce product page.

Product Pop-up Source

Choose how to display content in product pop-up?

  • Theme Template    – Your Theme template will decide the content in the pop up.
  • Food Online Original – The original Food Online template
  • Food Online Style 1– A new clean product popup
Product Pop-up Content

Select content for the product pop-up. (This is not applicable when using the Theme template as content provider)

  • Product Image
  • Product Meta
  • Product Rating
  • Product Description

Minicart Settings

Hide the Minicart from Menu page?

Hide the Cart from the Menu page at the right side bar.

Minicart Style

Choose how to style the mini-cart

  • Pop-up Style    – remove button will show when hover over a cart item
  • Basic Style – remove button will always be visible
  • Theme Default – use the active Theme mini-cart template
  • +/- Buttons – increment buttons to change the items quantity

Minicart Order

Select where added products appear in minicart. At bottom or at top of the cart.

Checkout Settings

Checkout Page

It is possible to change the field set of the checkout page and thereby remove some forms and lock some other forms.

The setup of the checkout page are depending on the choice of the delivery selector and are:


  • For “Pick Up” choice or when the delivery selector is turned off
  • For “Delivery” choice
  • For “Eat at Restaurant” choice
Extra? Popup

Show a popup when users proceed to checkout with featured products as supplementary.

A product can be marked as “Featured” in the WooCommerce products archive. Only “Simple” products can be added since no choice selection is possible in the popup.

Food Online Shortcodes

[foodonline] & [foodonline2]

Use the shortcode [foodonline] or [foodonline2] to insert the Menu at any page you like. It’s important that you NEVER uses curly quotes.

Likewise use [foodonline categories="pizza,kebab,salad"] to only show certain categories in a certain order. Use the category “slug” name that you find in the category section of the admin panel.

And even [foodonline tags="food, drinks"] will work to only show certain tags.

To show only certain products use [foodonline ids="XX, YY"].

Decide the product order using [foodonline orderby="menu_order"]. Use order attributes from below. If it does not work, read this topic.

date – The date the product was published.
id – The post ID of the product.
menu_order – The Menu Order, if set (lower numbers display first).
price – Price sorting. Change to high to low with adding order="desc".
popularity – The number of purchases.
rand – Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
rating – The average product rating.
title – The product title. This is the default orderby mode.

It is possible to combine the shortcode attributes like [foodonline ids="id-2" categories="seafood"]. 

Make sure not to use a curly quote character (as above) in the shortcode. Be aware of this if you copy paste a shortcode from somewhere.


To only use the topbar delivery feature at another page (than the shop page) use shortcode [foodonline_delivery].

As an example, you can use it together with the WooCommerce shortcode “products” to display products with a standard look as seen in figure below.

Order Time Management

This section let you calculate an approximate time for an order to be ready.

Fixed time per order

Set a fixed time in minutes for preparing a single order.

Extra time per processing order

Set additional time in minutes per order or item already processing. Quantity of order or order items with the status “Processing” will be counted and multiplied with this time.

Use Order or Items?

Here you can choose to calculate extra time per processing order or per processing item.

Choose Categories to Include

Select product categories to include when counting the processing items. Only order items belonging to at least one of the selected product categories will be added to the extra time.

Calculate time until ready for pickup?

How do you want to calculate  the time until a pickup order is ready.

  • None
  • By a fixed time – The time chosen in “Fixed time per order” will be used
  • By fixed time & extra time  – The sum of fixed time and extra time per processing order will be used

Calculate time until delivery?

Set how the time until a delivery order can be delivered will be calculated.

  • None
  • By a fixed time  – The time chosen in “Fixed time per order” will be used
  • By fixed time & extra time  – The sum of fixed time and extra time per processing order will be used
  • By fixed time & shipping time  – The sum of fixed time and shipping time will be used
  • By fixed time & orders in progress & shipping time – The sum of fixed time, extra time per processing order and the shipping time will be used

Set shipping time

Choose how the shipping time will be calculated.

  • None
  • Fixed shipping time  – the shipping time will be fixed according to the option below, “Fixed Shipping time”
  • Calculate shipping time  – the shipping time will be calculated with Google Maps API. Google will calculate the time to travel between the store address and the given delivery address.

Fixed shipping time

Set a fixed time in minutes for a delivery order.

Set vehicle

Select a vehicle type that will be used to calculate shipping time with Google. The selection will also reflect the icon shown with the time.

  • By car or truck
  • By bicycle


The order times can be used to postpone the Time Picker times. More information about this can be found at the section below.

 If you check the option Show order times at Menu page? the calculated order times will be shown at the menu page depending of the type of order. “Eat at Restaurant” orders will have the equal order time as a Pick Up order. 

Time Picker

The Time Picker feature ables to let the customer choose the time for when to pick up an order or when to get an order delivered. The time picker will be inserted at the checkout page and the selected time will be attached to the order data and will be avalible at order emails and at admin order pages.

It is also possible to postpone the first time slot avalible with the calculated order time from the “Order Time Managment” tab. If time slots are choosen to be postponed with extra time, it is possible to decide how many minutes before it´s time slot a processing order will be included in the postponement.

If you have a limit of how many orders or how many product items of a certain category you can handle at a single time slot there is an option to set this limit. 

The times avalible for selection are decided by week day open hours and by a choosen time step.

A delivery mode needs to be enabled at the “Delivery Features ” tab. The Time Picker is only active together with a delivery mode such as “Delivery” or “Pick Up”.

Availability Schedules

The availability schdule feature makes it possible to add schedules for certain product tags or categories when using the Time Picker. If the cart contains any product of the selected category or tag, the avalible time slots will be according to this schedule. Remember that open/close times from the Time Picker settings will serve as the outer boundaries for the available time slots.

 If a schedule is added for a category or tag for a specific weekday, all other weekdays are disabled from the timepicker for that category or tag. So it is mandatory to add a schedule for all weekdays that are meant to be activated. 

It is also possible to add schedules for the Delivery Dropdown Selector and for when it is possible to place an order at checkout. 


Menu Category Sorting

Click the setting tab called Menu Category Sorting and you will be able to choose which categories to show in the Menu at shop page. And you will be able to sort among the categories to decide the order of them.

This setting does not affect the Menu when using shortcode [foodonline] or [foodonline2]. When using the shortcodes, category selection and sorting can be specified in the shortcode as arguments.

Advanced Settings

Lazy Load Menu Images

If the Menu contains many items with images, page load will be faster if images are loaded when they appear on the screen (Lazy Loading).

Javascript Loading Overlay

Show a overlay while loading content with javascript

Do Not Restrict Google Autocomplete to IP-located country

By default, the autocomplete address suggestions will only be from the user located country. With this option it is possible to allow address suggestions from the whole world.

Geolocate user for improved Autocomplete suggestions

With this option enabled, the browser will try to geolocate the user and thereby improve address suggestions by searching for addresses inthe nearby region.

Force Enqueue Google Maps JS & Deactivate Google Maps JS

Theese settings are for testing purposes by advanced users and might be helpful if other Themes and plugins also loads Google scripts.

Show error messages at checkout

Enable WooCommerce error messages at checkout page.

Delete Settings

Enable this option to delete the plugins settings in database on plugin removal. Make sure to not use the option when upgrading to a new version.

Product Sorting by Title

Override WooCommerce and sort products by title on shop page?

Fallback Product Popup Loading

Choose if to load entire product popup content at page load. As standard, the content is loaded when the popup open which reduces the page load time.

Multiple Shorcode Instances

Theese settings are for testing purposes by advanced users and allow multiple shortcode instances? (not recommended)

WooCommerce REST API

WooCommerce REST API brings the possibility that via GET and PUT requests read or update Food Online options and order meta values such as choosen pick up times, delivery times, delivery modes etc.

First, read this documentation for how to make the basic WooCommerce REST API configuration.

Update an option

Food Online setting options can be updated with a PUT request described in the WooCommerce REST API documentation. The <group_id> should be fdoep and the <id>  should be the id of the option.

The option id can be found in the complete options reference.

Example. If you would like to change the time for preparing an order (the option to the right) from 20 to 30 minutes a request should be like below where the option id is fdoep_pickup_fixed.

PUT Request updating an option

Update an orders meta data

Food Online stores certain information about an order as meta_data. The data can be read or updated with GET or PUT requests according the to WooCommerce REST API documentation.

The Food Online order meta data are

  • Delivery Modefdoe_delivery_mode – [delivery, pickup, eathere]
  • Picked Time from Timepicker – fdoe_picked_time – [date & time string]

PUT Request updating the delivery mode

Example. In this example we are changing the selected delivery mode to Pick Up for an order with order id 4705. We are using a HTTP PUT Request and a raw JSON object.
JSON raw data
"meta_data": [
"key": "fdoe_delivery_mode",
"value": "pickup"


Is it possible to define the delivery area through a drawn zone?

Yes, Food Online is compatible with the free plugin Shipping Zones by Drawing.

Does this work with WooCommerce Add-Ons?

Yes, from version 1.6 it´s compatible with WooCommere Add-ons.
You could then offer toppings, side dishes and more.

Is support included in the price?

Yes, the price includes six month support and updates.

Why does not product sorting work when using shortcode [foodonline]?

There seem to be a cache issue, please read this topic.