Distance Based Shipping Method Configuration

328 April 25, 2024

The Shipping rates can be configured based on the distance from the warehouse/seller store to the Location of delivery

Rates can be calculated based on

  • Kilometers
  • Meters
  • Miles/Yards

Distance based Shipping can be Configured with following Steps:

  1. Enable Google APIs and get the Key
  2. Configure the Distance based shipping in backend

For configuring the Distance based Shipping, Admin can login to Backend, Navigate to Stores → Configuration → Shipping Methods →  Distance Based Shipping –  where you can find various settings to configure the same.

Before doing any configuration changes there is a prerequisite to enable some APIs in Google Maps Platform- Google Cloud account

Step 1 : Enable required Google APIs

Go to the Google Cloud Platform Console. Login with google console account. (Generally it may be your gmail account) Click on “Create New Project”, add a project name and click save.

Google Console Platform

2. Go to APIs & Services →  Library.

API & Services

3. Click “View All” under Maps category and enable 4 APIs: Distance Matrix APIs, Geolocation API, Maps JavaScript API, Places API.

Maps in Google Console

4. Click the menu button and select APIs & Services →  Credentials. On the Credentials page, click Create credentials →  API key Or edit an API if already created. You can copy the Google Map API Key from here.

API & Services Dashboard

5. Click on “Create Credentials” to generate the API key

Creating Credentials

6. You can copy the API key from here and save this in your local notepad for reference

Credentials View

After Enabling the Google APIs, we can configure the Backend distance based shipping and copy the Google APi key as guided in below steps

Step 2: Distance Based Shipping Backend Config

  1. Enable: Set “YES” to enable Distance Based Shipping extension.
  2. Title: Enter title for the shipping method.
  3. Method Name: Enter the method name for the shipping method.
  4. Displayed Error Message: Enter the error message to show for shipping unavailability.
  5. Google Map API Key: Enter the Google map API key to auto calculate distance from the warehouse to the shipping destination for the distance-based shipping amount calculation.

6. Distance Unit: Select one of the distance units to calculate distance.

  1. Kilometres
  2. Meters
  3. Miles Yards

7. Shipping Cost: Set shipping cost based on the calculated distance.

a. From (Distance Unit): Set minimum distance.

b. To (Distance Unit): Set maximum distance.

c. Cost: Set shipping cost.

d. Type: Select one the shipping cost calculation types.

      1. Fixed: Fixed amount as in cost
      2. Per Unit: Distance Calculated x Amount in the cost.

8. Minimum Order Amount: Set minimum order amount to allow using this shipping method.

9. Maximum Order Amount: Set maximum order amount to allow using this shipping method.

10. Maximum Distance for Shipping: Enter the maximum distance to allow shipment.

11. Ship to applicable countries: Select all allowed countries to enable Distance Based Shipping for.

12. Ship to specific countries: Select countries to enable Distance Based Shipping for.

13. Show Method if Not Applicable: Select YES to show the shipping method even if it’s not applicable.

14. Sort Order: Add sort order of the shipping method.

Shipping Configuration

Now after configuring the Distance based configuration it is mandatory to configure the warehouses/seler stores. This may be called as starting location for the Distance based Source Location to calculate the destination location

Step 3: Configure Warehouse/Seller Store

Warehouse Manager
Warehouses can be configured through a separate backend grid.

  1. Go to Distance Based Shipping →  Warehouse Manager. All the already created and saved warehouses are seen and enlisted here.

WareHouse Configuration

2. User can either Edit/Add new Warehouse and enter details as the sample shown

3. Need to Enable the Status, Enter Street, Select Seller name from drop down, enter City, Country, State and Zip-code and then Save the details

Edit WareHouse

How would the configuration reflect on the Frontend Website? Shown some sample below

Step 4: Output on website:

  1. Once you have set distance-based shipping costs, you can see distance-based shipping rates enabled in the frontend. After adding products to cart, adds the shipping destination and Google Maps API calculates the distance between these two and shows the shipping cost. Once it’s selected, the respective shipping rate will be applied on the order.
  2. The criteria in sample was set as following:
  • 0-100 km the cost is $30 Fixed
  • 101-500- the cost is $50 Fixed
  • 501 -50000 km the cost is $3 per unit distance

So the below image shows the shipping address is between 101-500 km range from the warehouse and thus shows the shipping cost of $50

reviewing Payments

3. Suppose the destination was located at exactly 505 km from the ware-house then the distance would be calculated as:

  Shipping charges- $30 + $50 + ($3×5) = $95

Output in My Account→ My orders

Order Details

4. Output in Admin Backend Order Page- Sales → Orders

Details of the Order