1. Documentation
  2. Plugins
  3. WooCommerce
  4. Extensions

Address Auto-Complete For WooCommerce

Scope of the document ↑ Back to top

Address autocomplete is a extension which allows us to sync with google maps location detector at checkout page. Let’s suppose if anyone is selecting location from google map so the relevant address field will be fetched automatically and will reflect at Address, Country, City, State and Zip code fields. You don’t need to fill these fields manually.

Moreover if you will type a few words of a location or zip code so the system will push a list of relevant locations.

Installation Guide ↑ Back to top

Once you have downloaded and unzipped extension from WooCommerce, then you have to install it on your WordPress site

  • Log in to your WordPress admin panel.
  • Click on the extensions menu item on the left side menu.
  • Click Add New.
  • At the top of the page, you will see an Upload extension button, click that.
  • Next click the Choose file button in the box that appears below.
  • Select the address-auto-complete-for-woocommerce.zip file that you have downloaded from WooCommerce.
  • When the zip file is finished uploading click the Activate extension button.
  • Go to WooCommerce  > Google map API
  • Enter API key, That’s all.

Activation of Google Map API ↑ Back to top

Google API Key ↑ Back to top

  • Once the installation and activation are complete, we need to set the Google API Key to complete our function.
  • Go to Admin Dashboard > WooCommerce > Google map API.
  • Enter the API Key here.

NOTE: If you don’t have the API Key then view the next heading 1.1. How to get Google API Key.

Get Google API Key

  • Go to the Google search bar and type Google API Console.

  • Click on the first search result and log in with your Google Account.

  • Once logged in, click on Select a project.

  • Click on the NEW PROJECT button and enter Organization if any.

  • Now fill in all the required fields for your project and click on the create button.

  • Once the project is created, make sure you’ve selected that project and then click on the ENABLE APIS AND SERVICES button or Library in the APIs & Services section.

  • Now you’ll be able to view all the APIs. You either search the API in the search bar or scroll and find it in its respective section.
  • The APIs mentioned below are required to make the plugin function.
    • Places API
    • Maps JavaScript API
    • Distance Matrix API
    • Directions API
    • Geocoding API
  • Search for Maps JavaScript API and click on it.

  • Enable the Maps JavaScript API.

  • Similarly, search and enable all the required APIs mentioned above.
  • Now click on the Navigation Menu and go to APIs & Services > Credentials.

  • In the Credentials screen, click on Create Credentials > API key.

  • Your API key will be created.

  • Now click on the Navigation Menu and go to Billing.

  • Click on LINK A BILLING ACCOUNT if you don’t have a billing account, if you already have an account click on MANAGE BILLING ACCOUNT. Since we don’t have a billing account so we’ll click on the LINK A BILLING ACCOUNT button.

  • This will generate a pop, now click on CREATE BILLING ACCOUNT.

  • This option will take you on the payment gateway option where you can pay and get the API key authenticated.

  • Checkmark the terms and conditions checkbox and enter your card credentials and other required information.

  • Now go and copy and paste your API in the Admin Dashboard > WooCommerce > Google Map API.

Shipping Configuration ↑ Back to top

  • Go to Admin Dashboard > WooCommerce > Settings.
  • Go to the Shipping tab.
  • There are 3 sub-tabs,
    • Shipping zone
    • Shipping options
    • Shipping classes

  • Go to the Shipping zone (which is selected by default once we open the Shipping tab), Add your desired zone (Shipment will be accepted at the frontend for only those countries that are listed at the backend).

  • You manage the shipping methods of that particular region by the Add shipping method button.

  • When you’ll click on the Add shipping method button, the pop up will appear,

  • You can also customize each shipping method according to your requirement by clicking on the Edit option.

  • Click on Save changes to apply your settings.

Location Suggestion on Checkout Page ↑ Back to top

  • Once done with the configuration, the impact would be visible when you’re on the checkout page.
  • In the Selected Location bar, give the initial details of your address like your city/state name, the system will then give you a relevant address according to your search.

Location Placed Through Map Pointer ↑ Back to top

  • You can simply drag the pointer to your desired location.
  • Once done, the address bar will show its complete address.

  • In the image mentioned above, we can see that the location has been set by dragging the pointer in a specific location due to which the following fields are also auto fetched.

Shipping Address ↑ Back to top

  • If the Shipping Address is the same as the Billing Address, then leave the checkbox unmarked.

  • If the Shipping Address is different from the Billing Address, then mark the checkbox and fill the required fields.

  • Once done, select your payment method and place your order.

Activation of Address Autocomplete extension ↑ Back to top

  • Installation of extension

First of all admin will install the extension and activate it. Moreover also set the API key at following option:

  • Configuration of Shipment

User needs to go in woocommerce settings and then shipment tab. Therefore shipment settings will be configured from here. Shipment will be accepted at frontend for only those countries that are listed at backend.

User can add shipping method from below option:

In shipping method we can add amount for shipping:

  • Location Suggestion on Checkout Page

Here I gave initial details of an address in address bar and we can see that the system is pushing many relevant address related to my search.

  • Location Placed Through Map Pointer

Here I have dragged the pointer on a location so in address bar it is showing complete address.

At above images we can see that the location has been set by dragging location pointer against which following fields has auto fetched.

  • Shipping Address

By letting following checkbox as unmarked will make the billing address as shipping address.

If you want to locate shipping address different from billing address so just checkmark that box and fill the following form for your order shipment.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment