How to Set Up Google Address Autocomplete in WooCommerce

Editorial Team
January 30, 2024
How to Set Up Google Address Autocomplete in WooCommerce

Want to know how to set up Google address autocomplete for WooCommerce?

Studies have shown that nearly 69% of shoppers don't complete the purchase.

Moreover, incorrect addresses can cause 41% of deliveries to be delayed and 39% to fail entirely.

So, how do you encourage the buyers to complete the order? And help them input the correct address?

Well, you can do so by incorporating WooCommerce Google address autocomplete feature into your checkout process.

In this blog, we will show you how to use Google address autocomplete for WooCommerce.

It’s an easy-to-follow guide that requires no coding knowledge.

Let's dive in!

What is Google Address Autocomplete?

Google Address Autocomplete is a feature that fills up users' complete addresses automatically once they start typing. It automatically fills up street address, city, zip code, state, and country fields.

It’s a feature of the Places library in the Maps JavaScript API. It empowers forms to incorporate type-ahead-search behavior of the Google Maps search field.  As a result, it can autocomplete checkout form field values such as address and helps customer selects addresses easily.

In Layman's terms, the Address Autocomplete API allows your customers to input or customer selects their addresses quickly when they type the initial few letters in the address fields.

Google Address Autocomplete preview

Why Use Google Address Autocomplete for WooCommerce?

Cuts down time spent at the checkout

Take a look at our custom WooCommerce checkout page without address autocomplete.

So the user lands on the checkout page and has to fill in every detail one by one:

Google Address Autocomplete for WooCommerce cuts down the time spent at the checkout

A little bit of distraction can lead them to misspell or mistype the address. And this can lead to costly delivery-related failures.

Also, the entire process of typing out each detail is a bit exhaustive. Don't you agree? 

Even more so on mobile, where the small screen size and countless notifications can distract people.

On the other hand, using Google address autocomplete on mobile is a breeze.

According to Google, the autocomplete functionality reduces users' time spent by 25%! 

Take a look below at how it saves so much time:

Google Address Autocomplete for WooCommerce in mobile device

Notice how the user just had to type '2055' and select one address for the remaining address details to get filled up on their own?

That's a huge improvement. So, incorporate Address autocomplete on your WooCommerce store to save customers time.

Reduces address-related errors

According to Shopify, Google Address Autocomplete reduces address-related errors during checkout by 20%. It also reduces the number of abandoned carts!

So, it ensures your customers a stress-free shopping experience. In addition, it also increases your conversion rate.

Besides, the wrong address can cause the delivery to the wrong address. This will cost you extra money and the customer may lose trust in your brand.

This is another reason to use Google Address Auto Complete for your WooCommerce site.

Better user experience 

According to a National Retail Federation study, 31% of online shoppers have agreed that enhanced form-filling encourages them to complete a checkout process. 

This is because Google Address Autocomplete provides a smooth user experience by minimizing the stress of typing too much information. Moreover, it also saves time as mentioned before. 

Now that you know that Google Address AutoComplete can add so much value to your WooCommerce store, let's check how you can set it up.

How to Set Up Google Address Autocomplete in WooCommerce 

To set up Google Address Autocomplete for WooCommerce, we are going to use FunnelKit.

FunnelKit Funnel builder comes with many prebuilt sales funnel templates and optimization options.  This WordPress plugin helps WooCommerce store owners increase sales through custom checkout funnels.

On top of that, FunnelKit offers Google Address Autocomplete to ensure a frictionless checkout process. It offers address autocomplete on both shipping and billing address forms.

Let’s check how you can utilize this powerful sales funnel builder.

Step 1: Install and activate FunnelKit Funnel Builder

You need to install both FunnelKit Funnel Builder and FunnelKit Funnel Builder Pro.

After you install both plugins, make sure to activate the license. If you need help activating FunnelKit pro license, then check our installation guide.

Step 2: Purchase Google API Key from Maps Platform

First, you have to purchase the Google Map API Key.

Go to Google Maps Platform and then click on 'Get Started' to select your plan and proceed with the payment

start with Google maps platform to add Google address autocomplete for WooCommerce

Enable Maps and Places.

enable maps and places

Next, enter a project name and click on Next:

Create new project to use Google maps platform

Fill out the rest of the details related to your country and region.

fill out information to create a Google Maps platform project

Once you're done filling out your billing details, select the plan that suits you.

Google Maps API pricing

Now navigate to API services ⇒ Enable APIs & Services.

navigate to enable APIs and services

After that move to the Maps tab and enable the necessary APIs. You need to open each API in a new tab and enable it.

enable necessary Google Map APIS

Now go to credentials and click on the API key to generate API.

click on create Google  Maps API Key

Once the API is generated, copy the key.

copy Google Maps API key

Next, go to FunnelKit (formerly WooFunnels) ⇒  Settings. Under General settings, you will find a filed for Google Map API Key. Paste the API key here and click on Save.

Add Google map Api key

Once you've entered the API Key, hit the 'Save Changes' button.

Step 3: Set up your store checkout

Now let’s create a custom checkout for your WooCommerce store. For that, navigate to FunnelKit ⇒ Store Checkout.

create store checkout

Now choose your preferred page builder and then the template you like. We are choosing Minimalist here.

After that, choose a page builder to filter the sales templates. Now to check any of the template, hover on it and click on the preview button.

click on preview minimalist new

Choose whether you want a single-page checkout or a multi-page checkout.  Then click on the “Import this Template” button to import the template. After that, provide a store checkout name and click on Add.

import minimalist as store checkout

Click on the Checkout step to edit it.

edit checkout with new ui

Step 4: Enable the Google Address Autocomplete feature

Now, move to the Optimization tab. Then, expand the Google Address Autocompletion option and choose the "Yes'' toggle button. This will enable the Google address to autocomplete for the WooCommerce checkout page.

enable WooCommerce google address autocomplete

🔔 Note: If you want you can also enable other options such as express payment buttons, auto-apply coupons, enhanced phone field, etc.

Step 5: Restrict Google Address Autocomplete for some countries (optional)

Google Address Autocomplete may not be accurate for some countries (like the UK). Hence, you have the option to restrict it to those countries.

Select the countries from the 'Disallow Countries' drop-down. This ensures that users coming from these countries will not see the Google Address Autocomplete function.

disallow countires for WooCOmmerce google address autocomplete

Once you are done, hit the 'Save Changes' button.

Step 6: Enable store checkout

Lastly, click on the "Enable Store Checkout" button to activate the new checkout with Google address autocomplete.

enable store checkout

That's it. You've now set up Google Address Autocomplete for your WooCommerce.

 Here is what Google Address Autocomplete by FunnelKit looks like:

preview google address autocomplete woocommerce

So, this was the process of adding Google Address Autocomplete for WooCommerce without any coding.

Now, let’s have a look at some of the questions you may have on your mind.

Frequently Asked Questions (FAQs) on WooCommerce Autofill Checkout Address

1. Can I enable the Autofill Checkout Address on any WooCommerce website?

Yes, you can easily do that using a plugin like FunnelKit Funnel Builder. All you have to do is buy the API key and add it to your FunnelKit settings. 

2. Do I need to pay Google for the Maps API key?

It totally depends on your usage. Usually, Google offers a $200 monthly credit for free, which is more than enough for stores with a decent volume. However, if you exceed this limit, you have to pay. For pricing, you can check Google maps site.

3. How do I autofill an address in WooCommerce?

Well, you can autofill addresses in WooCommerce by using the Google Maps API. You can connect to the API using an API key. You can add the key to your WooCommerce site using a plugin. 

Ready to Set Up WooCommerce Google address autocomplete?

Setting up Google address autocomplete for WooCommerce is an easy task. However, the perks of using this feature are many.

This way you can achieve the ultimate goal of increasing the site's conversion rate. So, do add this user-friendly feature to your WooCommerce store.

If you use FunnelKit to add address autocomplete, you also get a custom checkout page as well. This will enhance the customer's shopping experience.

Besides, you can add order bumps and one-click product upsell to increase the average order value of your eCommerce site.

So, are you ready to set up WooCommerce Google address autocomplete?

Author: Editorial Team
The Editorial Team at FunnelKit (formerly WooFunnels) is a passionate group of writers and copy editors. We create well-researched posts on topics such as WordPress automation, sales funnels, online course creation, and more. We aim to deliver content that is interesting and actionable.

Increase your sales, starting today.

Grab Our Exclusive Bundle
chevron-down