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.

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

Skip Address Input Form

Let users input their delivery address at checkout page insted of at the Menu page.

No address validation will be performed but “local pickup” will be chosen as delivery method at checkout if the user selects “Pick Up” at the selector. In the same manner, shippable delivery methods like “flat rate” or  “free shipping” will be chosen if the delivery selector has “Delivery” chosen at the selector.

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

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.

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

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

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?

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.