How to Add Google Address Autocomplete to WooCommerce

Looking to add Google address autocomplete to the checkout of your WooCommerce store? You’re in the right place!

Google address autocomplete improves the customer experience and reduces user errors by suggesting street addresses in real time as your customer is typing their address into the checkout form.

Since WooCommerce core doesn’t integrate with Google address autocomplete out of the box, you’ll need a third-party plugin to add this functionality to your store.

In this article, I will guide you through enabling Google address autocomplete in WooCommerce using a powerful plugin called Merchant Pro.

Let’s get started.

1. Install and Activate the Merchant Pro Plugin 

Merchant Pro is an all-in-one WooCommerce plugin that offers 40+ modules designed to elevate your store’s shopping experience and boost conversion rates. One of these modules is Google Address Autocomplete.

To get started, simply purchase, install, and activate the Merchant Pro plugin in your store:

merchant pro plugin upload woocommerce store

2. Generate a Google Places API Key

To add Google address autocomplete to your store’s checkout, you need to integrate Google Places into your WooCommerce store using an API key. 

Here’s how to generate a Google Places API key:

i. Sign into Google Cloud Console

To generate a Google Places API key, open the Google Cloud Console and sign in using a new or existing Google account.

ii. Create a Billing Account

On the Google Cloud dashboard, the first thing you need to do is create a billing account. This is a mandatory step.

Don’t worry, you won’t be charged anything just yet.

Go to the Billing option on the left side of the screen:

google cloud billing option

You will be asked to fill up a form and add a credit or debit card.

Do that, then hit the Start Free button, and your billing account will be created:

google console payment method

After creating the account, Google will give you a free credit of $200 every month for using the following Google services: Maps, Routes, and Places.

You can utilize this credit to use the Google Places API on your WooCommerce store.

As long as your usage doesn’t exceed the $200 monthly credit, you will not be separately charged.

However, if its usage exceeds the $200 monthly credit, you will be billed for the additional usage beyond that amount (see Pricing).

Be sure to know how the Places API uses the free credit and how to keep track of that credit usage.

You can check your credit usage by going to Billing → Credits:

checking google cloud console credits from billing page

iii. Create a Project

On the Console dashboard, go to the Select a Project option on the top bar and hit the New Project button on the popup:

creating a new project in google cloud

Name the project as ‘Google Address Autocomplete’ or anything else that suits your purpose and hit the Create button:

naming new project in google search console

The Console will take a few seconds to get the project ready. 

Once it’s complete, open the project dashboard by selecting the project name from the top bar:

choose a project in google cloud console

iv. Enable the Google Places API

To access the Google Places API, go to API & Services → Library:

api and services library google cloud console

In the API Library, enter ‘Google Places API’ into the search bar and select it when it appears on the screen:

api library google places

On the next screen, click the Enable button to enable the Google Places API:

google places api enable

v. Create an API Key

To create a Google Places API key, go to APIs & Services → Credentials:

api and services credentials

Click the Create Credentials button located at the top of the page and select the API key option:

google cloud api create credentials

Immediately, a popup will appear with an API key:

edit google cloud api keys

On the next page, you can restrict access to your API key to prevent others from using your free Google Cloud credits. 

To do so:

  1. Add a title to the API key.
  2. Under the ‘Set an application restriction‘ heading, choose the Website option.
  3. Add your domain name.
  4. Under API restrictions, click the Restrict key option.
  5. From the dropdown menu, select the Places API.
  6. Hit the Save button.
google console restrict api key

Note: Before adding the domain name, be sure to read the ‘How do I restrict my API key to specific websites?’ section on the left of the screen to learn how to add your domain to the API key:

how to restrict api key for specific website google console

After you hit the Save button, it will take a few minutes for the API key to become active.

While it’s becoming active, let’s proceed with the next steps. 

If you require assistance in creating the API key, consult these help docs or seek aid from the Google Cloud Community

3. Open the Google Address Autocomplete Module 

After installing the Merchant plugin, you’ll see a Merchant option appear on your WordPress menu. Select that option and it will take you to the Merchant dashboard.

On the Merchant dashboard, go to Improve Experience and open the Google Address Autocomplete module:

merchant pro google address autocomplete

4. Enter Your Google Places API Key

Inside the module, paste the Google API key that you created in Step 2.

You can also add extra parameters to the API URL using the Optional API URL Parameters setting, such as language, region, and others (see the full list here): 

adding api key to google address autocomplete modules

5. Enable the Google Address Autocomplete Module

When you are ready, hit the blue Enable button to activate the module.

Be sure to Save your changes before leaving the page:

merchant pro google address autocomplete module

6. Check Google Address Autocomplete on Your Checkout Page

After enabling the module, I recommend that you check if it’s working properly on the checkout page of your WooCommerce store. 

Here’s what Google address autocomplete looks like on the checkout page of my demo site:

google address autocomplete checkout page

Video Walkthrough

For a live demo of the Google Address Autocomplete module you can watch the video below:

Conclusion

Enabling Google address autocomplete is a great way to fast-track your checkout process and reduce user errors.

Here’s a quick rundown on how to use the Merchant Pro plugin to add Google address autocomplete to your WooCommerce store:

  1. Purchase, install, and activate the Merchant Pro plugin.
  2. Open Google Cloud Console and generate a Google Places API key.
  3. Open the Google Address Autocomplete module in Merchant Pro and enter the Google Places API key.
  4. Enable the module and check your store’s checkout page.

If you have any questions about how to enable Google address autocomplete in your WooCommerce store, let us know in the comments section below. 

Leave a Reply

Your email address will not be published. Required fields are marked *