It’s 2024 and surprising I have not been able to find a simple, free WooCommerce checkout autofill plugin. Especially when the code to get it done is relatively simple and provided by Google already. Since I couldn’t find a free plugin to handle this, I thought it would be better to make a no plugin option that is simple and anyone can use. Some customization may be required for it to work for your site but I’ll walk you through that. To start, here is the code.

The autofill code for WooCommerce Checkout

Add the following code to your header

<script>
// This sample uses the Places Autocomplete widget to:
// 1. Help the user select a place
// 2. Retrieve the address components associated with that place
// 3. Populate the form fields with those address components.
// This sample requires the Places library, Maps JavaScript API.
// Include the libraries=places parameter when you first load the API.
// For example: <script
// src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
let autocomplete;
let address1Field;
let address2Field;
let postalField;
function initAutocomplete() {
  // Edit billing_adddress_1 with the div for your address field
  // This is the field users will type in to activate the auto address
  address1Field = document.querySelector("#billing_address_1");
  // Edit billing_adddress_2 with the div for your address field
  address2Field = document.querySelector("#billing_address_2");
  // Edit billing_postcode with the div for your address field
  postalField = document.querySelector("#billing_postcode");
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    // Edit or add the country codes you'd like to search
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}
function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";
  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    const componentType = component.types[0];
    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }
      case "route": {
        address1 += component.short_name;
        break;
      }
      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }
      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        // Edit billing_city with the div for your city field
        document.querySelector("#billing_city").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        // Edit billing_state with the div for your state field
        // BUG: Only sometimes works with select2 dropdown
        document.querySelector("#billing_state").value = component.short_name;
        break;
      }
      case "country":
        // Edit billing_country with the div for your country field
        // BUG: Doesn't work with select 2 drop down
        document.querySelector("#billing_country").value = component.long_name;
        break;
    }
  }
  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}
</script>

Add the following code to your footer

// Add your Google Developer API key
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEAPIKEY&libraries=places'></script>

How to edit the code to work for you

The above code was taken from the Google Developers site and had a few adjustments made so it works with the default WooCommerce. If your theme customized the checkout fields, you may to to adjust the settings to work for your Theme. The font has been set to bold for the text you need to edit and comments were added to these sections to help further define the code that may need to edit for the code to work for your theme.

Here is the mentioned Google Developers site:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

How to get a Google API Key

If you’ve never done this before, this part can be a little intimidating but it’s very simple. Here are the full instructions for obtaining a Google API Key can be found here:
https://developers.google.com/maps/documentation/javascript/get-api-key

Closing

That’s it! As mentioned, it is a very simple processes. Currently, there is a bug getting it to work consistently with the select2 fields (country and state). It works sometimes but not always. I haven’t looked to far into a fix but I will update this post once one is created.

Leave a Reply

Your email address will not be published. Required fields are marked *