How to Set Up Google Address Autocomplete for Your WooCommerce Restaurant Checkout (Step by Step)

Why Address Autocomplete Matters for Restaurant Delivery Orders

A customer is hungry, they’ve built the perfect order on your <a href="https://www.wpslash.com/how-to-design-and-customize-your-wordpress-restaurant-website-theme-branding-color-schemes-menu-layouts-hero-sections-and-mobile-first-design-best-practices-complete-guide/" title="How to Design and Customize Your WordPress Restaurant Website Theme: Branding, Color Schemes, Menu Layouts, Hero Sections, and Mobile-First Design Best Practices (Complete Guide)”>restaurant website, and they’re ready to check out. Then they start typing their delivery address — and accidentally type “Mian St” instead of “Main St.” Your driver ends up circling a neighborhood for 15 minutes, the food arrives cold, and you get a one-star review. This scenario plays out thousands of times a day across online food ordering platforms, and it’s almost entirely preventable.

Address entry errors are one of the most overlooked friction points in restaurant delivery. According to research from the Baymard Institute, the average cart abandonment rate for e-commerce sits around 70%, and a complicated or lengthy checkout process is among the top reasons shoppers bail. For restaurant websites, the stakes are even higher — food has a ticking clock. A failed delivery doesn’t just cost you a sale; it costs you the ingredients, the labor, and potentially a loyal customer.

Google Address Autocomplete solves this by letting customers select their full, validated address from a dropdown as they type. It auto-fills the street, city, state, zip code, and country fields in one click. The result: faster checkouts, fewer delivery errors, and happier customers. For WooCommerce-based restaurant sites, adding this feature is one of the highest-impact, lowest-effort improvements you can make.

How Google Places Autocomplete Works and What You Need to Get Started

Google Places Autocomplete is part of the Google Maps Platform, specifically the Places API. When a user starts typing an address into a text field on your checkout page, the API sends those keystrokes to Google’s servers and returns a list of matching real-world addresses. The user picks the correct one, and your site can then extract the individual address components (street number, route, city, postal code, etc.) to populate the remaining fields automatically.

Setting Up Your Google Cloud Project

Before you touch your WordPress site, you need a Google Cloud account and an API key. Here’s the process:

1. Go to the Google Cloud Console and sign in with your Google account.
2. Create a new project (e.g., “My Restaurant Website”).
3. Navigate to APIs & Services → Library and enable the Places API and the Maps JavaScript API. You need both — the JavaScript API loads the autocomplete widget, and the Places API handles the address lookups.
4. Go to APIs & Services → Credentials and click Create Credentials → API Key.
5. Restrict the API key to your website’s domain under Application restrictions → HTTP referrers. Add entries like https://yourdomain.com/* and https://www.yourdomain.com/*.
6. Under API restrictions, limit the key to only the Maps JavaScript API and Places API.

What About Costs?

Google gives every Maps Platform account a $200 monthly credit, which resets each month. The Places Autocomplete — Per Session pricing model charges $0.017 per session (a session covers all the keystrokes and the place detail request for a single address lookup). That $200 credit covers roughly 11,700 autocomplete sessions per month — more than enough for most small-to-medium restaurant websites. Unless you’re processing thousands of orders daily, you’ll likely stay within the free tier indefinitely.

[IMAGE: Screenshot of Google Cloud Console showing the Places API being enabled and an API key being created with HTTP referrer restrictions configured]

Method 1: Adding Google Address Autocomplete With a Free Plugin (No Coding Required)

If you’d rather not write any code, several WordPress plugins can wire up Google Autocomplete to your WooCommerce checkout in minutes. One solid option is Autocomplete Address and Place Search for WooCommerce, which is free in the WordPress plugin repository and works with standard WooCommerce checkout fields.

Step-by-Step Setup

1. In your WordPress dashboard, go to Plugins → Add New and search for an address autocomplete plugin compatible with WooCommerce. Install and activate it.
2. Navigate to the plugin’s settings page (usually under WooCommerce → Settings or its own menu item).
3. Paste your Google Places API key into the designated field.
4. Select which checkout fields should trigger autocomplete. At minimum, enable it for the billing address line 1 field. Most plugins will auto-populate city, state, zip, and country from the selected suggestion.
5. If your restaurant only delivers locally, use the country restriction setting to limit suggestions. For example, entering “US” ensures only U.S. addresses appear. Some plugins also allow you to restrict by specific regions or postal code prefixes.
6. Save your settings and open your checkout page in a new browser tab (or incognito window) to test.

When you start typing an address in the billing address field, a Google-powered dropdown should appear with matching suggestions. Selecting one should fill in the remaining fields automatically. If it doesn’t, check the troubleshooting section below.

One thing to watch out for: some free plugins haven’t been updated for WooCommerce’s newer block-based checkout. If you’re using the checkout block instead of the classic shortcode-based checkout, confirm compatibility before installing. The classic [woocommerce_checkout] shortcode approach tends to have broader plugin support.

Method 2: Adding Google Address Autocomplete Manually With Custom Code

For developers or site owners who want full control without adding another plugin, you can implement Google Address Autocomplete with a relatively small amount of custom code. This approach is lightweight and avoids potential plugin conflicts.

Step 1: Enqueue the Google Maps JavaScript API

Add the following to your child theme’s functions.php file or a site-specific custom plugin:

add_action( 'wp_enqueue_scripts', 'wpslash_enqueue_google_autocomplete' );
function wpslash_enqueue_google_autocomplete() {
    if ( is_checkout() ) {
        wp_enqueue_script(
            'google-maps-places',
            'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places',
            array(),
            null,
            true
        );
        wp_enqueue_script(
            'checkout-autocomplete',
            get_stylesheet_directory_uri() . '/js/checkout-autocomplete.js',
            array( 'google-maps-places', 'jquery' ),
            '1.0',
            true
        );
    }
}

Replace YOUR_API_KEY_HERE with your actual API key. The is_checkout() conditional ensures the scripts only load on the checkout page, keeping other pages fast.

Step 2: Create the JavaScript File

Create a file at /your-child-theme/js/checkout-autocomplete.js with the following code:

jQuery(document).ready(function ($) {
    var addressField = document.getElementById('billing_address_1');
    if (!addressField) return;

    var autocomplete = new google.maps.places.Autocomplete(addressField, {
        types: ['address'],
        componentRestrictions: { country: 'us' } // Change to your country code
    });

    autocomplete.setFields(['address_components', 'geometry']);

    autocomplete.addListener('place_changed', function () {
        var place = autocomplete.getPlace();
        if (!place.address_components) return;

        var streetNumber = '';
        var route = '';

        for (var i = 0; i < place.address_components.length; i++) {
            var component = place.address_components[i];
            var type = component.types[0];

            switch (type) {
                case 'street_number':
                    streetNumber = component.long_name;
                    break;
                case 'route':
                    route = component.long_name;
                    break;
                case 'locality':
                    $('#billing_city').val(component.long_name).trigger('change');
                    break;
                case 'administrative_area_level_1':
                    $('#billing_state').val(component.short_name).trigger('change');
                    break;
                case 'postal_code':
                    $('#billing_postcode').val(component.long_name).trigger('change');
                    break;
                case 'country':
                    $('#billing_country').val(component.short_name).trigger('change');
                    break;
            }
        }

        $('#billing_address_1').val(streetNumber + ' ' + route);
    });
});

This script targets the standard WooCommerce billing_address_1 field, initializes Google Autocomplete on it, and distributes the address components into the correct checkout fields when a user selects a suggestion. The .trigger('change') calls are important — they notify WooCommerce that the field values have changed so shipping calculations and validation update properly.

A Quick Note on the Classic vs. Block Checkout

The code above targets the classic WooCommerce checkout. If you’re using the newer block-based checkout, the field IDs and rendering behavior differ, and you’ll need to hook into the block’s JavaScript lifecycle instead. For restaurant ordering sites, the classic checkout remains the more flexible and widely supported option, especially when using plugins like FoodMaster that extend checkout with delivery-specific fields.

[IMAGE: WooCommerce checkout page showing the Google Address Autocomplete dropdown appearing below the billing address field with address suggestions, and city/state/zip fields auto-populated after selection]

Configuring Autocomplete for Delivery Zone Validation and Restricting Out-of-Range Addresses

Address autocomplete gets customers’ addresses right, but it doesn’t inherently tell them whether you actually deliver to that address. Combining autocomplete with delivery zone validation is where the real magic happens for restaurant sites.

Restricting Autocomplete Suggestions by Region

The componentRestrictions option in the code above already limits results to a single country. But you can go further. Google’s Autocomplete API supports a bounds parameter that biases results toward a specific geographic rectangle. For example, if your restaurant is in downtown Chicago, you can set bounds to prioritize addresses within a 10-mile radius:

var chicagoBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(41.75, -87.75), // Southwest corner
    new google.maps.LatLng(41.95, -87.55)  // Northeast corner
);

var autocomplete = new google.maps.places.Autocomplete(addressField, {
    types: ['address'],
    bounds: chicagoBounds,
    strictBounds: true,
    componentRestrictions: { country: 'us' }
});

Setting strictBounds: true means Google will only return addresses within those bounds, not just prefer them. This prevents a customer in a distant suburb from placing an order you can’t fulfill.

Delivery Zone Logic With WooCommerce and FoodMaster

WooCommerce’s built-in shipping zones let you define regions by zip code, state, or country and assign different shipping methods (or block shipping entirely) for each zone. For restaurant delivery, though, you typically need more granular control — like radius-based zones measured in miles or kilometers from your restaurant’s location.

This is where a dedicated restaurant ordering plugin like FoodMaster becomes essential. FoodMaster includes built-in delivery zone management that works alongside WooCommerce, allowing you to set radius-based delivery areas, define minimum order amounts per zone, and charge different delivery fees based on distance. When a customer enters an address that falls outside your configured delivery zones, they see a clear notification before they waste time completing the order.

Pairing Google Address Autocomplete with FoodMaster’s delivery zone validation creates a seamless flow: the customer types a few characters, selects their validated address, and instantly knows whether delivery is available — along with any applicable fees. No guesswork, no failed orders.

Troubleshooting Common Issues: API Key Errors, Autocomplete Not Showing, and Billing Concerns

Even with careful setup, a few common issues can trip you up. Here’s how to diagnose and fix each one.

The Autocomplete Dropdown Doesn’t Appear

• Check the browser console. Right-click the checkout page, select “Inspect,” and open the Console tab. Look for errors like Google Maps JavaScript API error: InvalidKeyMapError or RefererNotAllowedMapError. These point directly to API key configuration problems.
• Verify your API key restrictions. The most common mistake is setting the HTTP referrer restriction too tightly. Make sure you’ve included both https://yourdomain.com/* and https://www.yourdomain.com/*. If you’re testing on a staging site, add that domain too. Changes to API key restrictions can take up to 5 minutes to propagate.
• Confirm both APIs are enabled. You need the Maps JavaScript API and the Places API enabled in your Google Cloud project. Missing either one will silently fail.
• Check for CSS conflicts. The autocomplete dropdown renders as a .pac-container element appended to the body. Some WordPress themes or CSS frameworks set z-index values that bury it behind other elements. Add this CSS to fix it: .pac-container { z-index: 999999 !important; }

API Key Shows “This API key is not authorized” Error

If you’re using an IP address restriction instead of an HTTP referrer restriction, the key won’t work for client-side JavaScript requests. The Maps JavaScript API and Places API require HTTP referrer restrictions for browser-based usage. IP restrictions are for server-side API calls only.

Unexpected Billing Charges

Monitor your usage in the Google Cloud Console under APIs & Services → Dashboard. Click on the Places API to see request counts. If you notice unusually high numbers, check whether bots or scrapers are hitting your checkout page and triggering API calls. Adding a CAPTCHA or rate limiting can help.

To keep costs minimal:

• Always use session-based pricing by including sessiontoken parameters (the Autocomplete widget handles this automatically).
• Only load the API on the checkout page, not site-wide.
• Set a daily quota limit in the Google Cloud Console to prevent runaway charges if something goes wrong.
• Use componentRestrictions and strictBounds to reduce unnecessary API calls for irrelevant regions.

Autocomplete Works but Doesn’t Fill Other Fields

If the dropdown appears and you can select an address, but the city/state/zip fields stay empty, the issue is almost always in the JavaScript. Double-check that the WooCommerce field IDs in your code match what’s actually rendered on your checkout page. Some themes or checkout customization plugins rename these fields. Inspect the HTML to verify the actual IDs, and update your script accordingly.

Putting It All Together

Adding Google Address Autocomplete to your WooCommerce restaurant checkout is a straightforward improvement that pays dividends on every single order. Fewer address errors mean fewer failed deliveries. Faster checkout means fewer abandoned carts. And when you pair autocomplete with proper delivery zone validation — especially using a purpose-built food ordering system like FoodMaster that handles delivery radius logic, pickup and dine-in modes, and order management — you create a checkout experience that feels as polished as the major delivery platforms, without giving up a percentage of every sale to third-party commissions.

Start with the plugin method if you want something running in 10 minutes. Graduate to the custom code approach when you need tighter control. Either way, set your API key restrictions properly, keep an eye on your Google Cloud billing dashboard for the first month, and test the full flow from address entry to order confirmation on both desktop and mobile. Your drivers — and your customers — will thank you.