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!
Contents
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.
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:
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:
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.
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.
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.
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.
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.
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
Enable Maps and Places.
Next, enter a project name and click on Next:
Fill out the rest of the details related to your country and region.
Once you're done filling out your billing details, select the plan that suits you.
Now navigate to API services ⇒ Enable APIs & 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.
Now go to credentials and click on the API key to generate API.
Once the API is generated, copy the 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.
Once you've entered the API Key, hit the 'Save Changes' button.
Now let’s create a custom checkout for your WooCommerce store. For that, navigate to FunnelKit ⇒ 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.
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.
Click on the Checkout step to edit it.
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.
🔔 Note: If you want you can also enable other options such as express payment buttons, auto-apply coupons, enhanced phone field, etc.
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.
Once you are done, hit the 'Save Changes' button.
Lastly, click on the "Enable Store Checkout" button to activate the new checkout with Google address autocomplete.
That's it. You've now set up Google Address Autocomplete for your WooCommerce.
Here is what Google Address Autocomplete by FunnelKit looks like:
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.
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.
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?
