Home Tutorials How to Enable Google Address Autocomplete in WooCommerce

How to Enable Google Address Autocomplete in WooCommerce


Wanting to add Google deal with autocomplete to the checkout of your WooCommerce retailer? You’re in the appropriate place!

Including autocomplete performance to the deal with area in your checkout web page comes with quite a few benefits, equivalent to simplifying deal with entry, decreasing consumer errors, utilizing an deal with format that’s acknowledged by transport carriers, helping worldwide prospects in overcoming potential language boundaries or unfamiliar deal with codecs, and others.

Since WooCommerce core doesn’t combine with Google deal with autocomplete out of the field, you’ll want a third-party plugin to add this performance to your retailer.

On this article, I’ll information you thru enabling Google deal with autocomplete in WooCommerce utilizing a strong plugin referred to as Service provider Professional.

Let’s get began.

1. Set up and Activate the Service provider Professional Plugin 

Service provider Professional is an all-in-one WooCommerce plugin that gives 40+ modules designed to elevate your retailer’s purchasing expertise and enhance conversion charges. One among these modules is Google Address Autocomplete.

To get began, merely buy, set up, and activate the Service provider Professional plugin in your retailer:

merchant pro plugin upload woocommerce store

2. Generate a Google Locations API Key

So as to add Google deal with autocomplete to your retailer’s checkout, you want to combine Google Locations into your WooCommerce retailer utilizing an API key. 

Right here’s how to generate a Google Locations API key:

i. Signal into Google Cloud Console

To generate a Google Locations API key, open the Google Cloud Console and signal in utilizing a brand new or present Google account.

ii. Create a Billing Account

On the Google Cloud dashboard, the very first thing you want to do is create a billing account. It is a obligatory step.

Don’t fear, you received’t be charged something simply but.

Go to the Billing possibility on the left aspect of the display:

google cloud billing option

You’ll be requested to refill a kind and add a credit score or debit card.

Try this, then hit the Begin Free button, and your billing account shall be created:

google console payment method

After creating the account, Google offers you a free credit score of $200 each month for utilizing the next Google companies: Maps, Routes, and Locations.

You possibly can make the most of this credit score to use the Google Locations API in your WooCommerce retailer.

So long as your utilization doesn’t exceed the $200 month-to-month credit score, you’ll not be individually charged.

Nonetheless, if its utilization exceeds the $200 month-to-month credit score, you can be billed for the extra utilization past that quantity (see Pricing).

Be certain to know the way the Locations API makes use of the free credit score and the way to maintain observe of that credit score utilization.

You possibly can test your credit score utilization by going to Billing → Credit:

checking google cloud console credits from billing page

iii. Create a Challenge

On the Console dashboard, go to the Choose a Challenge possibility on the highest bar and hit the New Challenge button on the popup:

creating a new project in google cloud

Identify the mission as ‘Google Address Autocomplete’ or anything that fits your objective and hit the Create button:

naming new project in google search console

The Console will take a couple of seconds to get the mission prepared. 

As soon as it’s full, open the mission dashboard by deciding on the mission identify from the highest bar:

choose a project in google cloud console

iv. Enable the Google Locations API

To entry the Google Locations API, go to API & Companies → Library:

api and services library google cloud console

Within the API Library, enter ‘Google Locations API’ into the search bar and choose it when it seems on the display:

api library google places

On the subsequent display, click on the Enable button to allow the Google Locations API:

google places api enable

v. Create an API Key

To create a Google Locations API key, go to APIs & Companies → Credentials:

api and services credentials

Click on the Create Credentials button situated on the high of the web page and choose the API key possibility:

google cloud api create credentials

Instantly, a popup will seem with an API key:

edit google cloud api key

On the subsequent web page, you possibly can limit entry to your API key to forestall others from utilizing your free Google Cloud credit. 

To take action:

  1. Add a title to the API key.
  2. Beneath the ‘Set an software restriction‘ heading, select the Web site possibility.
  3. Add your area identify.
  4. Beneath API restrictions, click on the Limit key possibility.
  5. From the dropdown menu, choose the Locations API.
  6. Hit the Save button.
google console restrict api key

Observe: Earlier than including the area identify, make sure to learn the ‘How do I limit my API key to particular web sites?’ part on the left of the display to learn the way to add your area to the API key:

how to restrict api key for specific website google console

After you hit the Save button, it should take a couple of minutes for the API key to develop into lively.

Whereas it’s turning into lively, let’s proceed with the subsequent steps. 

In case you require help in creating the API key, seek the advice of these assist docs or search support from the Google Cloud Neighborhood. 

3. Open the Google Address Autocomplete Module 

After putting in the Service provider plugin, you’ll see a Service provider possibility seem in your WordPress menu. Choose that possibility and it’ll take you to the Service provider dashboard.

On the Service provider dashboard, go to Enhance Expertise and open the Google Address Autocomplete module:

merchant pro google address autocomplete

4. Enter Your Google Locations API Key

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

You can even add additional parameters to the API URL utilizing the Optionally available API URL Parameters setting, equivalent to language, area, and others (see the complete record right here): 

adding api key to google address autocomplete module

5. Enable the Google Address Autocomplete Module

When you’re prepared, hit the blue Enable button to activate the module.

Be certain to Save your modifications earlier than leaving the web page:

google address autocomplete module merchant pro

6. Examine Google Address Autocomplete on Your Checkout Web page

After enabling the module, I like to recommend that you simply test if it’s working correctly on the checkout web page of your WooCommerce retailer.

Right here’s what Google deal with autocomplete appears to be like like on the checkout web page of my demo website:

google address autocomplete checkout page

Conclusion

Enabling Google deal with autocomplete is a good way to fast-track your checkout course of and scale back consumer errors.

Right here’s a fast rundown on how to use the Service provider Professional plugin to add Google deal with autocomplete to your WooCommerce retailer:

  1. Buy, set up, and activate the Service provider Professional plugin.
  2. Open Google Cloud Console and generate a Google Locations API key.
  3. Open the Google Address Autocomplete module and enter the Google Locations API key.
  4. Enable the module and test your retailer’s checkout web page.

When you have any questions on how to allow Google deal with autocomplete in your WooCommerce retailer, tell us in the feedback part under.