How-to: Autocomplete addresses for WooCommerce

Nerd alert – this post is for developers. There will be code.

One of the trickiest parts of web development is making it easy for your users to enter their physical address into a form. There are so many different formats for addresses that you end up with lots of fields like ‘Address line 1’, ‘Suburb’, ‘PO Box’, ‘State’, ‘Province’, and ‘ZIP code’. They are a hassle, and you often end up with data in the wrong place.

Recently I solved this problem for a client with a WooCommerce site by adding an autocomplete feature to the address part of the checkout page.

It turns out this is really easy thanks to Google Places Autocomplete.

I’m not using the results on a Google Map, so I followed Google’s attribution requirements.

Here’s how it’s done:

PHP/HTML

First, we need to load the Google Maps JavaScript, including the Places library. You could just hard-code this straight into your template…

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places">

…but I’ll do it the proper WordPress way so it only loads at checkout:

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts');

function my_enqueue_scripts() {

    if(function_exists('is_checkout') && is_checkout()){
        $api_key = acf_get_setting('google_api_key');
        $url = "https://maps.googleapis.com/maps/api/js?key=$api_key&libraries=places";
        wp_enqueue_script( 'google-maps-js', $url );            
    }

}

JavaScript / jQuery

Here’s the crux of it – add an autocomplete to the ‘billing address 1’ field and fill out the other billing fields when an address is chosen.

You can use the exact same approach for the shipping address too, or adapt it for any other form outside of WooCommerce.

//Optional, restrict the autocomplete to addresses from Auckland, New Zealand. 
var auckland_bounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-37.14956343170602, 174.26479536132808),
  new google.maps.LatLng(-36.71045863529151, 175.25081831054683)
);

//Attach the autocomplete to the DOM element
var billing_autocomplete = new google.maps.places.Autocomplete($('#billing_address_1')[0], {
    bounds: auckland_bounds, //restrict the search area
    strictBounds: true,        
});

//Define what information we want back from the API
billing_autocomplete.setFields(['address_components']);

//Define a handler which fires when an address is chosen from the autocomplete
billing_autocomplete.addListener('place_changed', function() {

  var place = billing_autocomplete.getPlace();

  if (place.address_components) {

      //console.log(place.address_components)

      var street_number = place.address_components[0].short_name;
      var street_name = place.address_components[1].short_name
      var suburb = place.address_components[2].short_name;
      var city = place.address_components[3].short_name;
      var postcode = place.address_components[6].short_name;

      $('#billing_address_1').val(street_number + ' ' + street_name);
      $('#billing_address_2').val(suburb);
      $('#billing_city').val(city);
      $('#billing_postcode').val(postcode);

  }

});

Developer resources Google Web Tips WooCommerce WordPress