HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development Ecommerce

How To Add Checkout Autofill/Autocomplete Address on the Address Field in WooCommerce

in Ecommerce, Woocommerce
Reading Time: 2 mins read
407 22
0
590
SHARES
2.7k
VIEWS
Share on FacebookShare on Twitter

Add address field automatic suggestion dropdown in your WooCommerce store using the Google APIs.

Create Google API Project

First, we need to get an API key from Google APIs.
Go to google developers console.

RelatedPosts

[UPDATED 2022] How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce)

How to Add Custom CSS and JavaScript in Shopify (EASY)

How to Get Your PayPal API Credentials

Create a new project.

For this example, I’ll create My Project 01. Hit create.

Enable APIs

We need to enable 2 APIs to this project – the Maps API and the Places API.

Make sure you are selecting the right project.

Search for Maps API – enable maps javascript API.
Go back to APIs dashboard – enable APIs.
Search for places API and enable.

Next, go to the credentials tab – and create credentials then the API key. We will use this API key later.

Activate the Checkout Address Autofill Plugin

Now, go to your WordPress dashboard and activate the checkout address autofill.
Go to the plugin settings.
Paste in the google API key we just generated.

For the show results from the country field, I added the US and Canada.
Save changes.

On the checkout – try and enter a keyword.
If it shows this message: This page can’t load Google Maps correctly that means you do not have a billing account link to this specific project.

Link a billing account

Go to google developers console.

Make sure you select the project from which you generated an API key.
Then go to billing.

Link a billing account. If you don’t have one yet – create a billing account. Google gives you a free $300 credit. You won’t be billed after you have spent the free credit unless you turn on automatic billing.

Next, go back to the checkout page/ any page you’re using the services and hit refresh.

Finally, based on the keyword you are typing, it will show you an address suggestion dropdown that you can choose.

Tags: ecommerceWoocommerce
Share236Tweet148Share59

Related Posts

How to Get Paypal API Credentials (Username, Password, Signature)
Ecommerce

[UPDATED 2022] How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce)

by 22bulbjungle
March 27, 2022
0

In this tutorial, I will show you how you can get your PayPal API credentials, username, password, and signature in 2022. First,...

Read more
How to Add Custom CSS and JavaScript File in Shopify

How to Add Custom CSS and JavaScript in Shopify (EASY)

March 24, 2021
How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce 2020)

How to Get Your PayPal API Credentials

April 27, 2020
How to hide or remove woocommerce my account either tabs

How to Remove My Account Menu Links in Woocommerce

April 27, 2020
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.