Documentation - Shipping Zones by Drawing

Documentation - Shipping Zones by Drawing

This documentation is describing the latest release of the Shipping Zones by Drawing Premium plugin. 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 Shipping Zones by Drawing (if activated)
  7. Click Activate Plugin
  8. Adjust translations or translate to a new language with Loco Translate

Update of new version

  • Download the new version from your Arosoft Dashbord
  • Remove your current installation of Shipping Zones by Drawing from your Plugins tab at the WordPress dashboard.
  • Install the new version as above.

Changelog

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

Getting Started

To perform the address geolocation, Shipping Zones by Drawing needs a Google Maps API Key.

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

 

First, create a key for requests from the client.

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

Selection of APIs
Get Google APIs

It is recommended to restrict access to the key by an HTTP-address. Remember to add an asterisk (*) if you don´t add the exact path. For example https://arosoft.se/*

Restriction of API Key

Insert the Google Maps API Key (Client) at the settings page which can be found as a tab in the WooCommerce Settings as shown below.

Google Maps API Key (Server)

You also need to create a second API Key for the server to server Directions & Geocode APIs requests which are used when running in server mode or when calculating dynamic shipping rates. This Key can not be restricted by HTTP referrers (websites) and should be restricted to the Directions API & Geocode API.

It is recommended to restrict access to the key by an IP-address.*

*IPv6 will be used by some servers. If the plugin don’t work as expected, set Application restriction to “None” . If the plugin now work as expected it’s possible that the server use IPv6 instead of the specified IPv4.

Insert the Server Google Maps API Key at the settings page which can be found as a tab in the WooCommerce Settings as shown below.

When all is set, your API Keys page should look like the figure below with two separate API Keys.

Plugin Settings

The plugin settings page can be found as a tab at the WooCommerce settings section.

Show only lowest cost shipping method?

Check this option if you only like to show the “Shipping Zones by Drawing” shipping method with the lowest cost at checkout.

With this option enabled, you can use multiple shipping methods with different zone restrictions and minimum order value restrictions and only show the customer the lowest cost method at checkout.

Hide shipping costs at cart page?

The WooCommerce cart page can calculate shipping costs but due to that, the full customer delivery address is not set, that calculation may not be accurate when the customer type in their precise delivery address at checkout. 

Therefore it may be good practice to hide shipping costs on the cart page when the shipping costs are depending on a precise delivery address.

Pick Precise Delivery Address from Map

To be able to evaluate a delivery address it needs to be converted into a singular geo-point. If the geolocation fails, the user can pick the delivery point from a map.

You can also choose to show the map as a standard solution, and the user will always be able to pick a delivery point from the map.

Insert saved location marker

For logged-in users, automatically insert a map marker for the latest saved location. When a customer creates an order with a picked map position, a shipping location is committed. The customer can view the saved location on their my-account page.

Automatically insert a location marker

Mandatory to precise at Map?

Make it required for customers to precise their delivery location on the map before an order is placed. 

If the map is chosen only to be shown at geolocating failure, this requirement is active when the map is visible at checkout. If the customer changes their shipping address and the geolocation succeeds, the map will be hidden and the requirement to pick a delivery location at the map will of course get obsolete.

Server Mode

This is now the default operating mode for new installations. and the only possible mode when using blocks checkout. The server mode is when all shipping method filtering is performed at the server.  The benefits are more robustness, especially for setups with custom-made checkout and cart pages. The server mode also requires a server Google API Key with the “Directions” and the “Geocode” libraries activated.

Deactivate Post Code restriction

Some countries or areas may have insufficient postcode coverage. Therefore, it is possible to deactivate the delivery address restriction regarding a correct postcode.

Force shortcode [szbd]?

Check this option to force the loading of shortcode scripts. That may be needed if showing the shortcode in popups etc.

De-activate Google Maps API?

If Google Maps is running from other plugins or Themes with conflicts, there may be a solution to de-activate Google Maps running from Shipping Zones by Drawing Plugin.

Debug mode

When debug mode is activated, the response from the Google calls is shown on the checkout page.

Set Store Location

The store location will be used as a starting point for transport when calculating dynamic shipping prices and when using transportation distance as a shipping method restriction.

It will also be the midpoint when the radius is used as a restriction of a delivery method, and the midpoint of circles displayed with the shortcode [szbd].

By default, the store location will be geolocated from the WooCommerce store address. However, it is recommended to select and save a store location on the map. It will prevent unnecessary Google requests.

Select a store location from the map by clicking on the desired location.

The store location will be seen as the main location when you are choosing the shipping origin for a specific shipping method. Additional shipping origins can be added for selection from the tab “Additional Shipping Origins”.

Google Response Types

As an advanced option, it is possible to adjust which response types from a Google request will be treated as successful.

It is not recommended to change the predefined settings if you are not familiar with Google response types. Further reading about response types can be found at Google Documentation

Draw a Shipping Area

To draw your own shipping area that can be used as a zone restriction at a shipping method, go to “Shipping Zones by Drawing” found in the WooCommerce section at the dashboard.

Just click on the map to add the markers defining the delivery area.

Setup of WooCommerce Shipping Zones

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

Be sure that you are aware of the WooCommerce shipping zones functionality, 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.

With this in thought, it might be best to add all of your Shipping Zones by Drawing methods in one single zone, for example, your country.

Add Shipping Method

When adding a new shipping method to a zone, select “Shipping Zones by Drawing”. The options available for the method are shown below.

The method options available are described below.

Title

Choose the method title to be shown at checkout

Distance Unit

Choose if to use the metric (km) or the imperial (miles) system. This selection will be used when setting a restriction by transportation distance or when setting a shipping rate by transportation distance.

Shipping Rate

When using a dynamic shipping rate the WooCommerce shop address will be used as the origin for the calculation.

  • Flat Rate – enter the flat shipping rate in the option below
  • By Transportation Distance – the shipping rate will be calculated ( distance in km/miles x Distance Unit Rate). If this option is used, make sure to add a secondary Google Maps API Key at the plugin settings section. This key can not be restricted by HTTP. Read more.
  •  By Fixed Rate + Transportation Distance –  the shipping rate will be calculated (Fixed Rate + distance in km/miles x Distance Unit Rate). If this option is used, make sure to add a secondary Google Maps API Key in the plugin settings section. This key can not be restricted by HTTP. Read more.

Tax Status

Select if the shipping rate is taxable or not.

Minimum Order Amount

Choose to use a minimum order amount. If the amount is not reached, the delivery method will not be shown at checkout.

Transport Mode

Choose if shipping will be by car/truck or by bike. The selection will be of importance when calculating the transportation time.

Shipping Origin

Choose from where the shipment will be sent when using the specific shipping method. All calculations like dynamic prices and distance limitations will be using this location as the origin of the shipment.

Restrict the Shipping Method

You can choose to restrict the shipping method by a zone or by transportation distance or transportation time. All chosen restrictions must be fulfilled.

When using a restriction by radius, transportation distance, or transportation time the WooCommerce shop address will be used as the origin for the calculation.

  • Restrict by Zone Choose a drawn shipping zone or use a radius from the shop address in km/miles to define a zone
  • Restrict by Transportation Distance – specify a maximum transportation distance in km/miles from the shipping origin
  • Restrict by Transportation Time – specify a maximum transportation time from shipping origin in minutes using your selection of car/truck or bike

Show a Delivery Zone Map

Use shortcode [szbd ids="xx,yy" title="Delivery Zones" color="blue, #c87f93" ] to display a delivery map.

The arguments are:

  • ids – a list of drawn maps by post ids
  • radius – a list of radii that draws circles
  • circle_color – a list of colors of the circles (optional)
  • radius_unit – kilometer  or miles (kilometer is the default)
  • origin – the origin of a radius map by the post id of the additional origin
  • title – the map’s title to display above the map (optional)
  • color – a list of colors corresponding to the (ids list) delivery zones polygons (optional)
  • interactive – set to “true” if to enable user map interaction (optional, default is false)
  • zoom – set zoom level manually

Usage example. Use the post ID to display maps with shortcode: [szbd ids="4756,43" title="Delivery Zones" color="blue, #c87f93" ]

Usage Example Tutorials

There are many different applications of the plugin that is not obvious at first.  Get some inspiration from the usage example tutorials.

FAQ

Why don’t dynamic shipping rates work?

  1. Make sure to add a secondary Google Maps API Key in the plugin settings section. This key can not be restricted by HTTP. Read more
  2.  Then make sure your WooCommerce shop address is valid. On the plugin settings page, you can test the geolocation of your shop address.

Why don’t my drawn shipping methods show up at checkout?

Remember that WooCommerce always chooses the first shipping zone that matches an address. So remember to put all your drawn shipping methods per country/region/postcode in the same shipping zone.

Which APIs of Google are needed?

Your Google API key needs the Maps JavaScript API, Places API, Geocoding API, and Directions API.

Is there any way to display a delivery map to customers? 

Yes, use shortcode [szbd ids="id1,id2" title="Delivery Zones" color="#c87f93"] to display a delivery map. Read more.

Does Shipping Zones by Drawing support WooCommerce Blocks?

Yes, but you will need to run the plugin in server mode. This setting can be found on the “advanced” settings tab.

Does Shipping Zones by Drawing support WooCommerce Custom Order Table (HPOS)?

Yes.