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:
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:
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:
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:
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:
Identify the mission as ‘Google Address Autocomplete’ or anything that fits your objective and hit the Create button:
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:
iv. Enable the Google Locations API
To entry the Google Locations API, go to API & Companies → Library:
Within the API Library, enter ‘Google Locations API’ into the search bar and choose it when it seems on the display:
On the subsequent display, click on the Enable button to allow the Google Locations API:
v. Create an API Key
To create a Google Locations API key, go to APIs & Companies → Credentials:
Click on the Create Credentials button situated on the high of the web page and choose the API key possibility:
Instantly, a popup will seem with an 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:
- Add a title to the API key.
- Beneath the ‘Set an software restriction‘ heading, select the Web site possibility.
- Add your area identify.
- Beneath API restrictions, click on the Limit key possibility.
- From the dropdown menu, choose the Locations API.
- Hit the Save button.
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:
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:
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):
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:
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:
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:
- Buy, set up, and activate the Service provider Professional plugin.
- Open Google Cloud Console and generate a Google Locations API key.
- Open the Google Address Autocomplete module and enter the Google Locations API key.
- 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.