Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
The simplest way to add address suggestions to a conventional WordPress form or WooCommerce checkout is to install a plugin that supports your exact fields, connect it to a Google API key, and map the selected result to street, city, state, postal code, and country inputs. If your form uses React or Vue-controlled fields, or no compatible plugin exists, use a custom integration that listens for the selected place and updates the form through its own framework events.
Choose the right implementation path
Identify the form before installing anything. The setup differs between WooCommerce billing and shipping checkout, Contact Form 7, Gravity Forms, Elementor, and a custom HTML form.
Use a plugin for standard fields
Autocomplete Google places is described as supporting standard WooCommerce-style fields such as billing_address_1 and shipping_address_1. Its documented flow is to install it from the WordPress Plugins screen (or upload it), activate it, open its Google Places settings, enter an API key, and save. After a visitor selects a suggestion, the plugin says it fills address line 1, city, state, postcode, and country.
Recommended Free Tools
Its custom-field setting is intended for standard HTML inputs, including forms built with Contact Form 7, Gravity Forms, or Elementor, using a form ID or CSS class. The listing also says it detects fields added through Ajax, modals, and multi-step interfaces. These are the plugin publisher’s compatibility claims, so test your exact form and plugin version rather than assuming support.
Use visual mapping or checkout integrations when needed
Autocomplete Google Address describes a setup wizard that asks for an API key and then lets you choose a form plugin or manual setup. Its documentation distinguishes free manual selector configuration from paid integrations, including automatic WooCommerce setup and a visual selector. It states that its WooCommerce integration supports both Classic and Block Checkout; confirm the current listing and feature tier before choosing it for that reason.
Manual mapping lets you identify a trigger field and destination selectors for street, city, state, ZIP, country, latitude, longitude, and Place ID. This is useful when your form uses ordinary DOM inputs but their names do not match a plugin’s defaults.
Rank #2
Build a custom integration for unusual or controlled forms
A custom plugin or theme integration is appropriate when you need precise loading rules, custom field mapping, or framework-aware behavior. Google documents Places API (New) autocomplete as an HTTP POST request to https://places.googleapis.com/v1/places:autocomplete. The request can include the typed input, a field mask, language and region settings, included country codes, location bias or restriction, and a session token. The response includes suggestions and place predictions with text and a place ID. Your code must then retrieve or interpret the selected place and assign its address components to your form’s fields.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Google’s Maps JavaScript page labels its older place-autocomplete widget Legacy; an equivalent Places API (New) widget is identified as being in Preview. Do not treat the legacy widget as the unqualified default for a new build. Plugins may use different Google APIs, so follow the requirements stated by the particular plugin.
Rank #3
Plugin setup: step by step
- Identify the fields. Record the form or checkout system, the input used for typing, and the destination inputs for street, apartment or address line 2, city, state or province, postal code, and country.
- Check field behavior. Confirm that the inputs are ordinary HTML controls. React- or Vue-controlled inputs can be overwritten when an outside script changes the DOM and the framework re-renders; those forms may require a framework-specific integration.
- Verify compatibility. Select a plugin that explicitly names your form or checkout type. Treat support statements as claims to verify on your site, especially after updates or when using Ajax, modal, or multi-step rendering.
- Create the Google configuration. Create or select a Google Cloud project, enable the APIs required by the chosen plugin, create an API key, and enter it in the plugin’s settings. The cited plugin examples require an API key and refer to Places and Maps JavaScript APIs; one lists Geocoding as optional for a draggable map-pin feature.
- Configure mapping. Use the plugin’s WooCommerce defaults, visual selector, form ID, CSS class, or manual destination selectors. Check how it handles address line 2, state/province names, country values, and postal codes for the countries you serve.
- Test selection and fallback. On the real front-end page, type a partial address, choose a suggestion, and inspect every destination field. Then submit a manually entered address with no suggestion selected to ensure visitors can still complete the form when autocomplete is unavailable.
- Check loading. Confirm that the Google script appears on the relevant page, is not loaded twice by another plugin, and does not add unnecessary requests elsewhere on the site.
Custom WordPress implementation
Load scripts through WordPress
For a custom plugin or theme integration, use wp_enqueue_script() rather than hardcoding a script tag. Register the front-end enqueue on the wp_enqueue_scripts hook and add conditional checks so the script loads only on the checkout or form pages that need it. This keeps unrelated pages from loading the external library and reduces conflicts.
Connect autocomplete to your fields
Whether you call Places API (New) directly or use a JavaScript library, keep the typed input separate from the destination fields. Send the configured input and any language, region, country, restriction, bias, field-mask, and session-token values. When the visitor selects a prediction, map the returned address components to your existing inputs, dispatch the events your form expects, and preserve any address line 2 value the visitor entered manually.
For framework-controlled forms, update the framework’s state or dispatch its supported change mechanism instead of assigning only the DOM value. Otherwise the next render can replace the autocomplete result.
Google API, billing, and privacy considerations
Google requires an API key for the cited plugin examples. Costs depend on the API path, request volume, and configuration; do not assume a universal price or continuing free allowance. Google documents a sessionToken as a user-generated token that groups autocomplete calls for billing purposes, so implement sessions according to the API documentation and review current Google billing terms for your account.
The Autocomplete Google places listing says typed text is sent to Google after a visitor interacts with a supported address field. Update your privacy notice and service configuration so visitors understand that data flow, and review the plugin’s current disclosures before enabling it.
Autocomplete is not address verification
A suggestion dropdown supplies predictions and can populate fields after a selection. It does not, by itself, prove that an address is deliverable or independently verified. If your business needs postal validation, fraud checks, or shipping-address verification, add a separate service and explain that it performs a different check.
Quick Recap
How to compare plugins
| Criterion | What to check |
|---|---|
| Form and checkout support | WooCommerce Classic or Block Checkout, your form builder, or custom HTML. |
| Field mapping | Automatic defaults versus CSS selectors, form IDs, manual selectors, or visual selection. |
| Rendering compatibility | Static inputs versus React/Vue-controlled fields, Ajax, modal, and multi-step forms. |
| Feature tier | Whether the required WooCommerce or visual integration is free or paid, and whether that tier is still offered. |
| API setup | Which Google Maps Platform APIs are required and which features, such as map pins, add others. |
| Data and performance | When scripts load, what input is transmitted, and whether language and regional restrictions are supported. |
Troubleshooting checklist
- No dropdown appears: verify the API key, enabled APIs, browser-console errors, script loading, and restrictions on the key.
- Suggestions appear but fields stay empty: inspect the destination selectors and confirm the selected result supplies the needed component for that country.
- Values briefly appear then disappear: suspect React or Vue re-rendering; integrate with the form’s state and change events.
- It works on the first step only: configure the plugin for dynamically inserted fields or initialize your custom code after the Ajax or modal content is rendered.
- Checkout breaks: disable duplicate autocomplete scripts, test the plugin on a staging copy, and confirm whether the checkout is Classic or Block.
- Manual entry is blocked: make sure the form remains usable when a visitor ignores suggestions or the external service is unavailable.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
