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:
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:
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:
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:
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:
Name the project as ‘Google Address Autocomplete’ or anything else that suits your purpose and hit the Create button:
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:
iv. Enable the Google Places API
To access the Google Places API, go to API & Services → Library:
In the API Library, enter ‘Google Places API’ into the search bar and select it when it appears on the screen:
On the next screen, click the Enable button to enable the Google Places API:
v. Create an API Key
To create a Google Places API key, go to APIs & Services → Credentials:
Click the Create Credentials button located at the top of the page and select the API key option:
Immediately, a popup will appear with an API key:
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:
- Add a title to the API key.
- Under the ‘Set an application restriction‘ heading, choose the Website option.
- Add your domain name.
- Under API restrictions, click the Restrict key option.
- From the dropdown menu, select the Places API.
- Hit the Save button.
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:
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:
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):
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:
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:
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:
- Purchase, install, and activate the Merchant Pro plugin.
- Open Google Cloud Console and generate a Google Places API key.
- Open the Google Address Autocomplete module in Merchant Pro and enter the Google Places API key.
- 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.