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 WordPress.org.

Installation

  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.

Changelog

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 that option at the main settings tab. 

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.

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.

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 https://arosoft.se/*

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

Default Mode of Delivery Selector

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

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.

Menu Layout and Styling

Menu Layout Settings

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

One Column Layout
One_column
Two 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 li.shop>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 {
display:none;
}

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.

Star

Dots

Lines

Leef

Ring

Chile Pepper

Pizza

Hamburger

Apple

Item Icon

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

Standard

Plus

Square Shape Plus

Leef

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

Sticky

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

Minicart Style

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 
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 Shortcode [foodonline]

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.

Order Time Management

This section let you display an approximate time to the customer 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 already processing. Order with the status “Processing” will be counted and multiplied with this time.


Show time until ready for pickup?

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

  • Hide – No time will be showed
  • By a fixed time – The time chosen in “Fixed time per order” will be showed
  • By fixed time & orders in progress  – The sum of fixed time and extra time per processing order will be showed

Show time until delivery?

Show if and how the time until a delivery order can be delivered will be showed.

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


Set shipping time

Choose how the shipping time will be calculated.

  • None    – shipping time will not be shown
  • 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. Traffic situation will considered if you choose to deliver by car or truck

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

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 [food online] 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)

FAQ

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.