How to Add Autocomplete for Address Fields in WordPress

How to Add Autocomplete for Address Fields in WordPress

Do you want to add autocomplete for address fields in WordPress?

Recently, one of our users asked us how to add autocomplete for address fields in WordPress forms. Autocomplete allows users to quickly select addresses from suggestions generated in real-time as they type.

In this article, we will show you how to add autocomplete for address fields in WordPress using Google Places API.

How to Add Autocomplete for Address Fields in WordPress

Why Add Autocomplete Address Fields in WordPress

Adding autocomplete address fields in WordPress can help you to improve the user experience on your website.

For example, if you own an ecommerce store, your customers will be able to enter their addresses faster and avoid typos.

When shoppers type in their address, the possible addresses will show up on their screen based on their current location, so all they need to do is pick the correct one. This helps you reduce errors since the options that are shown to the user are connected with Google Places and Google Maps API.

Autocompletion in address fields is one of the most convenient functionalities you can provide to your users. If you can quickly help buyers through checkout, they are more likely to go through with a purchase.

By making each purchase fast and simple, you’re more likely to boost your sales and turn the occasional shopper into a recurring customer.

Now that you understand the benefits of adding autocomplete address fields in WordPress, we’ll show you how to do it step by step.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

The first thing you need to do is install and activate the Autocomplete Google Address plugin.

Autocomplete Google Address plugin

For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Autocomplete page in your WordPress dashboard to configure plugin settings.

Autocomplete WordPress

You will be asked to enter the Google Places API Key. This API key allows your website to connect with Google Maps and retrieve autocomplete suggestions from their database in real-time.

Access Google Places API Key

Head over to the Google Developer Console website and create a new project.

Google Console create a project

You’ll be brought to a new page asking you to provide a name for your project.

Use a name that will help you later identify the project, and then click on the ‘Create’ button. If you have an organization that you want to connect to, you can hit the ‘Browse’ link to see a dropdown of options.

Create a project in Google Console

Wait for a few seconds, and you will be automatically redirected to the APIs & Services page.

From here, you want to navigate to the left side panel and click on the ‘Library’ tab.

Library in Google Console

Now, you will see the list of popular Google APIs that you can enable for your project. In the left panel, select ‘Maps’ to filter by options only related to maps.

You’ll need to just find and click on the ‘Places API’ option.

Places API

From there, you’ll be directed to the overview page of the Places API.

Simply click the ‘Enable’ button to authorize the API.

Enable Places API

If your Google Console is set up correctly, you should see a pop-up window appear with your API Key.

However, if this is your first time setting up your Google Console account, you may have to enter your billing information.

Copy API Key

Now, you can head back over to your WordPress site.

Paste the API key from your Google Console to where it says ‘Google Place API Key.’

Google Place API Key

To make sure that the autocomplete address works in WordPress, you’ll need to enable the Google Maps JavaScript API.

So, all you have to do is go back to the ‘APIs & Services’ tab from the Google Developer Console dashboard. Then, find the ‘Maps JavaScript API’ and click ‘Enable.’

Enable maps javascript API



by WPBeginner