Do you want to automatically complete addresses on your site? You’ve come to the right place. In this guide, we’ll show you how to autocomplete an address in WordPress (no coding required).

Nowadays, most eCommerce stores ask customers to fill in a form that includes their address when they buy something. You can either let users enter their addresses manually or help them with an autocomplete tool. By autocompleting the address, users can select a suggested location out of few addresses that will appear in real-time as they type.

Using autocomplete for address fields is very common in eCommerce stores, especially in the billing and shipping address section, on the checkout page, or on the My Account page. 

Why to Autocomplete Address in WordPress?

Autocompleting addresses in WordPress can help you improve the user experience on your website. Not only will customers be able to enter their addresses faster, but you will also avoid mistakes and typos.

As shoppers type in their address, the possible addresses will appear on their screen so they just have to select the correct one. This will help you reduce errors because the options that are displayed to the user are integrated with Google Places and Google Maps API.

This is one of the most convenient functionalities that you can provide to your users. By improving user experience on your site, you’re more likely to increase your sales and turn that occasional shopper into a recurring customer.

Now that we better understand the benefits of adding an autocomplete address feature in WordPress, let’s see how to add it to your site.

How to Autocomplete Address in WordPress

The easiest and the most effective method to add an autocomplete address in WordPress is by using a plugin. For this tutorial, we will use Autocomplete Google Address. It has a user-friendly interface and is extremely easy to use.

To use this plugin, you just need a Google Places API key and the form ID of the address field. Then, there are a series of simple steps that you need to follow to add an autocomplete address to a WordPress website. The steps are as follows:

1. Install and Activate the Plugin

To install and activate the Autocomplete Google Address plugin, in your WordPress admin go to Plugins > Add New. Then, look for the plugin in the search bar. After that, click Install Now and then activate it.

2. Enter the Google Place API Key

Once you activate the plugin, go to the Autocomplete tab on your dashboard. You’ll need the Google Place API Key for your website.

Let’s see how to do that.

2.1. How to access Google Places API Key

To access the API key, log in to your Google account and go to the Google Developer Console. Then, press Select a project and create a New Project. 

You will need to enter the project name and click Create. Then, you will be redirected to your new project.

The next step is to enable the APIs. For this, go to the Library section in the dashboard.

Here, you have to search for the Google Places API. It’s usually one of the first options you see on this screen but if you can’t find it, use the search bar to look for it.

Now, you’ll find yourself on the overview page of the Places API. Click Enable to authorize the API. 

Now, go back to your dashboard, go to the Credentials tab and press Create Credentials. You will see a dropdown menu where you have to select the API key option.

That’s it! You have successfully created your API key. Just copy it and paste it on the Autocomplete tab in your WordPress dashboard. 

To make sure that the autocomplete address feature will work properly in WordPress, you need to enable the Google Maps JavaScript API. Let’s see how to do that.

2.2. Enable the Google Maps JavaScript API

To enable the Google Maps JavaScript API, first, go to the Library tab from the Google Developer Console dashboard. Then, locate the Google Maps JavaScript API, select it and Enable it. 

That’s it! Now we’re ready to move to the next step and add the form ID.

3. Enter the Form ID

After you have entered the Google Place API Key, you’ll also need the form ID of the address field where you want to add the autocomplete address feature. In your WordPress dashboard, go to Autocomplete. Just below the API key field, you will find another field to enter the form ID.

To find the form ID, simply follow these steps.

3.1. How to Find the Form ID

To find the form ID to add the autocomplete address feature, go to the page where the field is located. Then, right-click on the address field and select the Inspect option. Alternatively, you can click on the text area of the field and use the keyboard shortcut Ctrl+Shift+i.

Now, in the Elements tab, you see the developer tool where you can inspect and view all the elements of the webpage. If you are not familiar with codes and programming, you don’t need to worry. The codes for the field will be highlighted. In our case, the form ID is address-form-1 as you can see below.

As you can see, it says id = “address-form-1” but the actual form ID is just address-form-1.

Simply find your form ID and copy it in the form ID field in your WordPress admin dashboard. 

Now, enter the form id on the Autocomplete tab of your dashboard and save the changes, go to the page with the address field.

Finally, paste the form ID in the corresponding field and save the changes. If you want to autocomplete more than one address field, add each form ID and separate them with a comma.

That’s it! You’ve just added an autocomplete address feature in WordPress. From now on, when users start typing an address, a dropdown menu will appear with all the suggestions for the location. All they need to do is select their location and the full address will be entered automatically. 

Autocompleting addresses is just the first step. If you want to take it a step further and improve your customer experience, even more, you can autocomplete orders on your store as well. Let’s see how to do it.

Bonus: How to Autocomplete Orders

Adding an autocomplete orders feature is another excellent way to improve customer experience on your site. By autocompleting orders, you can process and confirm the orders instantly so that shoppers don’t have to wait to get a confirmation for their transaction that may take hours. On top of that, as users can access the products or services they buy instantly, you don’t have to manually check their orders. This works really well for virtual and downloadable products.

The easiest and fastest way to autocomplete orders on your site is by using a plugin. There are several tools out there but for this demo, we’ll use Autocomplete WooCommerce Orders. This free tool is one of the best plugins out there and integrates seamlessly with WooCommerce and payment gateways like PayPal to autocomplete orders and confirm purchases in no time.

Let’s move on and see how to use this plugin. Before we start, make sure that you have properly set up WooCommerce on your website.

1. Install and Setup WooCommerce Autocomplete orders

To install the plugin, in your WordPress dashboard, go to Plugins > Add new and search for Autocomplete WooCommerce Orders. Then, click Install Now and activate it.

After that, go to WooCommerce > Settings and open the Autocomplete Orders tab. Then, select Paid orders of virtual products only under Mode and save the changes.

2. Access PayPal Data Transfer Identity Key

Now, you’ll need to get the data transfer identity key from PayPal. For this, login to your PayPal and go to settings. Under the Seller Tools tab, click the Update button for Website preferences.

You’ll be redirected to the website preference options where you will have to find the Auto return section and select the On radio button to enable auto return. Then, enter your return URL and save it.

After that, scroll down to the Payment data transfer section and select the On radio button to enable it. Your identity token for payment data transfer will be displayed. You will need this identity key, so copy it and place it somewhere handy.

3. Enter PayPal Identity Key to WooCommerce

To enter the PayPal identity key in WooCommerce, go to WooCommerce > Settings and open the Payment tab. Then, press the Manage button for PayPal.

Here, find the PayPal identity key option and enter the PayPal data transfer identity key that you’ve just copied in the text area. Finally, set up other details for your PayPal account and save the changes. 

This is how you can add an autocomplete orders feature for WooCommerce. For more details about how to set it up, we recommend you have a look at this step-by-step guide. Additionally, you can have a look at the Autocomplete WooCommerce Orders documentation that has a lot of useful information.

Conclusion

In summary, autocompleting addresses is a great way to improve the user experience on your site. It allows shoppers to save time when typing their addresses and helps you avoid mistakes and typos.

In this guide, we’ve seen how to include an autocomplete address feature in your WordPress site without any coding. We’ve seen how to: 

• Activate and set up the Autocomplete Google Address plugin
• Get the Google Place API Key
• Find the Form ID(s) of the address fields to add autocomplete

Additionally, we’ve seen how to autocomplete orders using the Autocomplete WooCommerce Orders plugin. This will help you confirm orders instantly and boost your sales.

If you found this article useful, here are some other guides to make the most of your site:

• How to Edit WooCommerce Checkout Fields
• How to Integrate Google Maps in WordPress
• Checkout Optimization: The Full Guide

Have you started autocompleting addresses on your WordPress site? What method did you use? Let us know in the comments section below!