All tutorials

Installing the what3words OpenCart Extension

easy

The OpenCart Extension enables you to add a field to your checkout page that can accept 3 word addresses and provide autosuggest results as a user type.

OpenCart Minimum Supported Version: > 2.3.x up to 3.0.x, and 3.0.x up to 4.0.x

1Get an API Key
1Installation

Add a what3words address field to your checkout page on OpenCart by clicking this button below

DOWNLOAD

Upload the file to your store within the OpenCart admin portal using the Extension Installer.

3Enable plugin

Once installed, go to the admin panel section Extensions > Extensions, and from the drop-down select Modules, where you should see the what3words extension appear. Click on the Edit button, then to enable the module you need to change the status of the what3words module to Enabled.

4Add your API Key

You will need a what3words API key to use this plugin, as it authenticates and interacts with the what3words API. If you don’t have a what3words API key yet, you can quickly and easily sign up and register for one.

Once you have a what3words API key:

  1. Enter your API Key into the API key field.
  2. Click Save
5Check if the field is appearing

A new field should now be appearing on your checkout under Billing and Shipping. When a what3words address is captured in this field, it will be saved alongside your order details and will be visible in order preview and shipping label screens.

6How to obtain the what3words field using Stores API

In OpenCart, the what3words address attributes are stored in the customers’ orders of the OpenCart Orders REST APIs as:

  • shipping_three_word_address
  • shipping_w3w_coordinatesLng when the save coordinates option is enabled
  • shipping_w3w_coordinatesLat when the save coordinates option is enabled
  • shipping_w3w_nearestPlace when the save nearest place option is enabled

The API request to make to the OpenCart Orders REST API should be:
GET {{your-opencart-site}}/index.php?route=api/order/info&api_token={{api_token}}&order_id={{order_id}}

The API response should be:

{
   "order": {
       "order_id": "3",
       ...
       "shipping_three_word_address": "///filled.count.soap",
       "shipping_w3w_coordinatesLng": -0.195521,
	   "shipping_w3w_coordinatesLat": 51.520847,
       "shipping_w3w_nearestPlace": Bayswater, London,
       ...
       "comment": "ship to w3w address ///filled.count.soap",
       ...
}
Copied
7Troubleshooting

If you are using the Free plan and have enabled the save coordinates feature in your plugin settings, you are making convert-to-coordinate requests, which are not supported under the Free plan. You might encounter the following errors:

  • You should see an error message: Transport error under the what3words address field at the checkout page.
  • In the network panel, look for Error 402: Payment Required. The response to this error is:
{
    "error": {
        "code": "QuotaExceeded",
        "message": "Quota Exceeded. Please upgrade your usage plan, or contact support@what3words.com"
    }
}
Copied

We are actively working on updating our plugins to prevent this error by disabling the save coordinates feature when the API key is registered under a Free plan.

For more information, visit our API plans page. If you need further assistance, contact support@what3words.com.

Additional settings

If you need to capture the coordinates for a three word address to help with delivery information, for example, you should check the Save coordinates checkbox.

The coordinates will added to your order and visible in your Sales page on Opencart.

Note this uses an additional what3words API call to convert the what3words address to coordinates. Please ensure the tier you have signed up to covers the amount of usage you intend to do to avoid interruption of service.

If you need to capture the nearest place information for a three word address to help with delivery information, for example, you should check the Save nearest place checkbox.

The nearest place info will added to your order and visible in your Sales page on Opencart.

You can override the default label for the address field by selecting this option and specifying the placeholder text. We recommend you use the default label value, as it provides your customers with an example of how to use the what3words Address Field.

You can override the default placeholder for the address field by selecting this option and specifying the placeholder text. We recommend you use the default placeholder value, as it provides your customers with an example of how to use the what3words Address Field.

In order to provide guidance to the customer, you can display a tooltip explainer and its question mark icon next to the what3words field.
This message will be displayed on the tooltip explainer:

By entering your 3 word address you make it much easier for our delivery partners to find you first time. To discover your 3 word address, visit what3words.com.

We provide a number of options for clipping the autosuggest results, limiting the addresses that can be validated and captured. You can clip suggestions to a number of countries by providing comma separated 2 digit ISO codes for each country you wish to clip to. This will ensure suggestions provided are clipped within the countries specified. You can also clip within a circle, a bounding box or a polygon.

N.B. – When providing multiple clippings the intersection of each polygon is what forms the suggestions provided when using the what3words Address Field.

For most checkouts we recommend skipping these options as the clip to country is automatically set when a user selects a country for their billing and/or shipping information as they select a country from the dropdown menu options in the checkout form.

In addition to country clipping, it is also possible to add focus to your what3words address suggestions by selecting the Autosuggest Focus feature. The AutoSuggest Focus feature uses the users’ location as focus for AutoSuggest to provide better suggestions if the store has the users’ location permission.

E-CommerceAdd a 3 word address input fieldOpenCart

Related tutorials