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
- Download the extension from your Arosoft Dashboard
- Navigate to Plugins -> Add New
- Then click Upload Plugin
- Now click Choose File and select the .zip
- Click Install Now
- Deactivate the free version of Shipping Zones by Drawing (if activated)
- Click Activate Plugin 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.
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/*
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.
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.
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.
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.
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.
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.
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.
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.
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.
Some countries or areas may have insufficient postcode coverage. Therefore, it is possible to deactivate the delivery address restriction regarding a correct postcode.
Check this option to force the loading of shortcode scripts. That may be needed if showing the shortcode in popups etc.
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.
When debug mode is activated, the response from the Google calls is shown on the checkout page.
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?
- 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
- 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.
