Would you like to help customers enter their address faster and with fewer errors at checkout? Botiga Pro includes a Google address autocomplete integration, so the address fields on your checkout page suggest and complete addresses as your customers type.
In this guide, we’ll walk you through how to enable Google autocomplete on your Botiga checkout address fields.
Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active. The Google Autocomplete module is a Botiga Pro feature, so this requires Botiga Pro.
What is Google Autocomplete?
Google Maps Platform gives you access to Google’s autocomplete feature. With Botiga Pro, you can add this to your checkout address fields to help customers submit a correct shipping address.
You generate an API key from the Google Cloud Platform, which requires a Google account.
Note that Google Maps Platform is a paid service, but you get $200 of free credit per month. Pricing depends on how many requests your customers make. For example, 1,000 requests cost about $2.83 per month, which the free credit usually covers.
1. Create a Google Autocomplete API key
To create a key, follow Google’s Place Autocomplete tutorial. 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. API keys belong to projects, so if you switch projects you’ll need a new key. Then click the Sign Up To Get An API Key button.
If you don’t have a Google Cloud billing account yet, create one on the next screen. You’ll need to verify a card, but you won’t be charged until you manually upgrade to a paid account.
Once your card is verified, go to the Credentials page to generate an API key for your project.
Here’s a video tutorial on how to generate and restrict an API key for the Google Maps Platform.
2. Activate the Botiga Pro Google Autocomplete module
In your WordPress admin area, go to Appearance » Theme Dashboard. Scroll down, find the Google Autocomplete module, and activate it.
3. Find the Google Autocomplete settings
You enter your API key from the Customizer. There are two ways to reach the settings page:
- Click the Customize button inside the module on the Theme Features page, which takes you straight to the Autocomplete settings.
- Or go to Appearance » Customize » WooCommerce » Checkout and click the Google Autocomplete Settings button.
4. Enter your Google Autocomplete API key
In the Google Autocomplete panel, enter the API key you generated in the Google Cloud Platform and click Publish.
From now on, the address fields on your checkout page will run Google’s autocomplete automatically.
Frequently asked questions
Below, we’ve answered some of the most common questions about enabling Google autocomplete on your Botiga checkout fields.
Will I be charged for using Google Autocomplete?
Google Maps Platform is a paid service, but it includes $200 of free credit each month, which covers the request volume of most small and mid-sized stores. You won’t be charged unless you manually upgrade to a paid account and exceed the free credit.
Why isn’t autocomplete working after I added my key?
Check that the key belongs to the project where you enabled the Places API, that the module is active in the Theme Dashboard, and that you clicked Publish after entering the key. If you restricted the key, confirm your site’s domain is on the allowed list.
Do I need a new key if I move the feature to another site?
API keys belong to a project, and you can restrict a key to specific domains. For a different site, either add the new domain to the key’s restrictions or generate a separate key for that project.
That’s it! You’ve successfully enabled Google address autocomplete on your Botiga checkout fields.
Next, would you like to streamline the checkout further? Check out our guide on the distraction-free checkout and sticky totals box to learn more.
