All tutorials
Installing the what3words Address Field Plugin for WordPress
The what3words Address Field plugin helps you capture what3words addresses at checkout, using an address validation field. It includes support for WooCommerce checkouts as well as customised WordPress pages.
Getting started with Andy, what3words Product Manager:
Installation
You can install the what3words Address Field plugin through the WordPress plugins page in your WordPress admin panel.
- Navigate to the Plugins > Add New page
- Search for “what3words”
- Click the Install Now button.
- Once installed, you can activate the plugin on the Plugins page.
You can also find a link directly to the plugin on wordpress.org here: https://wordpress.org/plugins/3-word-address-validation-field/
Add 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:
- Click the what3words menu item on your wp-admin page.
- Enter your API Key into the API key field.
- Click Save
Default Woocommerce settings
The general settings allow you to customise how the what3words Address Field is configured on your site.
For WooCommerce users the plugin can automatically add an address field for both billing and shipping information, allowing your customer to specify a three word address for both billing and/or shipping address to help you locate your customers with ease.
By default this option is selected and if you have configured your WooCommerce plugin it will automatically add these fields for you on your checkout page. Or you can select the Add what3words Address Field to my checkout page for me option.
Check 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.
Troubleshooting
If you find your what3words address field displayed at the top of your checkout page, and you would like to keep it at the bottom of your address form please follow this step-by-step guide:
- Log in to your WordPress dashboard.
- Go to Appearance > Customize.
- Click on Additional CSS. This will open the Customizer’s CSS editor.
- Paste the following CSS code into the editor:
#w3w-billing_field { order: 20; } - Click on the Publish button to save your changes.
Additional Settings
Instead of letting the plugin create a field, you can customise which field(s) to convert to a what3words Address Field by selecting Convert an existing field to a what3words Address Field option and providing selectors for the inputs to convert. You can use any DOM compliant query selector(s) here to specify a single or multiple fields that you wish to convert.
N.B. When using input selectors you should ensure each input field has a unique name attribute to ensure clashes do not occur if multiple what3words Address Fields appear on a single page.
If you want to add a new custom field to extend as a what3words Address Field you should first create an input field on the page you wish to add this functionality to and provide with a name, id and/or that can then use in the input selector to specify it. (Be careful when using classes as it can apply this behaviour to multiple fields.)
If you want to capture the selected what3words address you should wrap this field in a form with a submit button and this will then be submitted as specified by your form.
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 with will also retrieve the coordinates for the captured three word address.
If you have added the what3words Address Field to your WooCommerce checkout and you select Save coordinates the coordinates for the billing and shipping address fields will added to your order and visible in your Orders page on WooCommerce.
If you are using custom field(s) for the address then you the component will automatically attach hidden fields for both the latitude and longitude of the coordinates for the adddress prefixed with the name you supplied to the input field.
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.
For improved accessibility it is recommended that you add a label to your what3words Address Field. By checking this option and supplying some text for the label you can easily associate a label to each of your address field(s).
For WooCommerce customers this option allows you to override the default label associated to the address field(s), while for custom field users this option tells the plugin to create a label field for you.
You can override the default placeholder for the address field(s) by selecting this option and specifying the placeholder text. We recommed you use the default placeholder value as it provides your customers with an example of how to use the what3words Address Field.
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 is what forms the suggestions provided when using the what3words Address Field.
For WooCommerce 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.