WooCommerce UK Address Autocomplete: Setup Guide

# How to Add UK Address Autocomplete to WooCommerce Checkout

To add UK address autocomplete to WooCommerce checkout, install the Postio Address Autocomplete plugin or hook Postio's Royal Mail PAF API directly into standard WooCommerce billing and shipping address fields. This automatically populates street, town, county, and postcode upon selection, reducing checkout drop-off and delivery failures.

UK e-commerce checkouts face frequent failed deliveries caused by inaccurate address entry. Standard WooCommerce checkouts require customers to type house numbers, street lines, postal towns, and postcodes manually across four separate fields. Integrating Postio provides verified Royal Mail Postcode Address File (PAF) data directly inside the classic and block-based WooCommerce checkout.

---

Implementation Options

There are two primary methods to integrate Postio UK address lookup into WooCommerce:

1. WordPress Plugin (No Code): Install and activate the Postio UK Address Autocomplete plugin, enter your API key, and configure field mapping.
2. Custom JavaScript / REST API (Developer): Hook the Postio REST API into WooCommerce checkout DOM elements using frontend JavaScript for fully custom checkout experiences.

---

Option 1: WordPress Plugin Setup

Step 1: Install the Plugin

1. In your WordPress admin dashboard, navigate to Plugins > Add New.
2. Search for Postio Address Validation or upload the .zip release.
3. Click Install Now, then Activate.

Step 2: Configure API Credentials

1. Navigate to WooCommerce > Settings > Integrations > Postio.
2. Paste your Postio API key (obtained from the Postio Dashboard).
3. Enable UK Address Autocomplete on Checkout.
4. Choose your lookup mode:

• Postcode Lookup: User inputs postcode, clicks find, and selects their full premise from a dropdown.
• Typeahead / Autocomplete: Single-line input searching premises and streets dynamically as the user types.

Step 3: Verify Standard Field Mappings

By default, Postio maps directly to standard WooCommerce billing and shipping fields:

---

Option 2: Custom JavaScript & REST API Integration

For headless WooCommerce, custom checkout themes, or React-based Block Checkouts where you prefer direct API integration, use Postio's REST API endpoint.

API Lookup Endpoint

Postio provides a fast autocomplete endpoint designed for frontend typeahead:

GET https://api.postio.co.uk/v1/addresses/autocomplete?query=SW1A1AA&limit=5
Authorization: Bearer YOUR_API_KEY

Example Response Payload

{
  "suggestions": [
    {
      "id": "paf_premise_12345",
      "summary": "Buckingham Palace, London, SW1A 1AA",
      "line_1": "Buckingham Palace",
      "line_2": "",
      "post_town": "LONDON",
      "county": "Greater London",
      "postcode": "SW1A 1AA",
      "country": "United Kingdom"
    }
  ]
}

Frontend Vanilla JavaScript Implementation

Enqueue this script in your child theme's functions.php on checkout pages:

add_action('wp_enqueue_scripts', function() {
    if (is_checkout()) {
        wp_enqueue_script(
            'postio-checkout-autocomplete',
            get_stylesheet_directory_uri() . '/js/postio-checkout.js',
            array('jquery'),
            '1.0.0',
            true
        );
        wp_localize_script('postio-checkout-autocomplete', 'postioConfig', array(
            'apiKey' => 'YOUR_PUBLIC_KEY'
        ));
    }
});

Then handle input events in postio-checkout.js:

document.addEventListener('DOMContentLoaded', () => {
  const postcodeInput = document.getElementById('billing_postcode');
  if (!postcodeInput) return;

  postcodeInput.addEventListener('blur', async () => {
    const query = postcodeInput.value.trim();
    if (!query) return;

    try {
      const response = await fetch(`https://api.postio.co.uk/v1/addresses/autocomplete?query=${encodeURIComponent(query)}`, {
        headers: {
          'Authorization': `Bearer ${postioConfig.apiKey}`
        }
      });
      const data = await response.json();
      if (data.suggestions && data.suggestions.length > 0) {
        const address = data.suggestions[0];
        document.getElementById('billing_address_1').value = address.line_1 || '';
        document.getElementById('billing_address_2').value = address.line_2 || '';
        document.getElementById('billing_city').value = address.post_town || '';
        document.getElementById('billing_state').value = address.county || '';
        document.getElementById('billing_postcode').value = address.postcode || '';
      }
    } catch (err) {
      console.error('Postio lookup error:', err);
    }
  });
});

---

Compatibility: Classic Checkout vs. WooCommerce Blocks

WooCommerce 8.3+ introduced the block-based checkout ([woocommerce_checkout] vs Checkout Block):

• Classic Checkout (Shortcode): Standard DOM hooks and jQuery events listen directly to #billing_address_1, #billing_postcode, etc.
• WooCommerce Cart & Checkout Blocks: Uses React and @woocommerce/blocks-checkout state stores. Ensure your integration binds via WooCommerce Checkout extensibility filters (woocommerce_blocks_checkout_update_order_from_request) or the official Postio plugin block adapter to maintain reactive state sync before order submission.

---

Summary & Next Steps

Implementing Royal Mail PAF address validation in WooCommerce ensures:

• Fast 1-click address entry for customers.
• Elimination of typos in postcodes and post towns.
• Reduced shipping errors and carrier return surcharges.

To get started, register for an API key at postio.co.uk and install the plugin or integrate the REST API directly.