Botiga Pro comes with seamless Google address autocomplete integration — you only need an API key to add Google’s autocomplete feature to the address fields on your checkout page.
What Is Google Autocomplete?
Google Maps Platform allows you to access Google’s autocomplete feature. With Botiga Pro, you can add this functionality to your address input fields to help your customers submit a correct address for shipping.
You can generate an API key from the Google Cloud Platform (you need to sign up for an account):
Note that the Google Maps Platform is a paid service, but you get $200 free credit per month.
Pricing depends on the number of requests your customers make — for example, 1,000 requests will cost $2.83 per month (but, as mentioned above, you get the first $200 for free):
1. Create a Google Autocomplete API Key
To start using the API and getting a key, you can follow the Place Autocomplete tutorial on Google Developers, but here are the main steps:
In your Google Cloud Console account, create a new project:
Select your new project from the dropdown in the top-left corner of the screen (note that API keys belong to projects — if you change the project, you’ll need a new API key).
Then, click the Sign Up To Get An API Key button:
If you don’t have a Google Cloud billing account yet, you’ll need to create one — you can do so on the next screen.
While you need to verify your card, you won’t be charged until you manually upgrade to a paid account:
Once your card is verified, you can go to the Credentials page to generate an API key for your project.
Here’s a video tutorial, too, on how to generate and restrict an API key for the Google Maps platform:
2. Activate Botiga Pro’s Google Autocomplete Module
Now, navigate to your WordPress admin area, and go to the Appearance > Theme Dashboard menu.
Scroll down on the page, find the Google Autocomplete module, and activate it:
3. Find the Google Autocomplete Settings
You can enter your Google Autocomplete API key from the Customizer.
There are two ways to find the relevant settings page:
- Click the Customize button inside the module on the Theme Features page — this will take you straight to the Autocomplete settings.
- Go manually to the Appearance > Customize > WooCommerce > Checkout panel, and click the Google Autocomplete Settings button:
4. Enter Your Google Autocomplete API Key
In the Google Autocomplete panel, enter the Google Autocomplete API key that you have generated in the Google Cloud Platform, and click the Publish button:
That’s it! From now on, the address fields on your checkout page will automatically run Google’s autocomplete functionality.