Pro Google Autocomplete Integration

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):

Google Maps Platform Homepage

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):

Google Autocomplete Pricing

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:

Create a New Google Project in the Google Cloud Console

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:

Find your Project Page

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:

Create a Google Cloud billing 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:
Google Autocomplete Settings in the Customizer

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.