The case for mandatory house number on checkout forms #
When using Google Address Autocomplete to autofill the address fields, some customers forget to check or add a house number to their addresses. This problem causes issues with delivering the customer’s purchase as carriers might not be able to locate the correct address on the street.
The first thought would be to validate the “Street address” field and make sure that part of it can be recognized as the house number.
Well, this could work for the majority of addresses but not all of them. It turns out that house numbers are not always straightforward.
Depending on the country, the house number might come first or last when writing an address. Other times, the house number might be accompanied by non-digits characters such as letters and separators like `/`. Also, many addresses do not have a house number at all, and it would be impossible for those customers to enter their correct addresses.
For those reasons and more, plugins like Google Address Autocomplete cannot force users to enter a house number in the “Street address” field by default.
One way to solve the problem is to create a new “House number” field and make it mandatory, and then map the “house number”.
In this case, if a house number value is not returned from the address suggestions or otherwise informed by the customer, that field will be empty, and the customer will not be able to move forward until a value is entered. For addresses that do not have a house number, the customer can be instructed to enter a value such as `0` or `N/A` to indicate that.
Creating a new house number field and making it mandatory #
We’ll be using the plugin Checkout Field Editor for WooCommerce (by ThemeHigh) to create the new house number field, however, it should also be possible to use other similar plugins or custom code to make these changes.
If you are using the Google Address Autocomplete plugin, you’ll also need to map the value from the Google Places API to the newly created field.
1. Install the plugin Checkout Field Editor for WooCommerce (by ThemeHigh) and go to WP Admin > WooCommerce > Checkout Form.
2. Locate the “House number” field in the fields list, or click the button to “+ Add field” to create a new field in the Billing Fields group.
3. In the Edit field screen, select the field “Type” as “Text”. Remember to leave the “Validation” field empty, as house numbers might contain letter and other characters.
4. Give it an ID in the “Name” field that such as `billing_house_number`. If you are using Fluid Checkout, please note that the field name endings should match on both the Billing and Shipping groups so that the option to set the Billing address to same as shipping address work as expected.
5. Set the field label that will be visible on the checkout page in the field “Label”, for instance “House number”.
6. Set the field classes to `form-row-last`. If you are using Fluid Checkout on your website, you can also add the class `form-row-one-third` to this field so it does not take too much space in the checkout form. These classes need to be separated with a comma `,`.
7. Set the field as “Required” if it is not yet set.
8. Click the “Save & Close” button to save the field.
9. Back to fields list in the Billing group, click to edit the `billing_address_1` field.
10. In the Edit field screen, change the field “Label” to “Street name”.
11. Remove the field “Placeholder” text if it is already set.
12. Set the field classes to `form-row-first`. If you are using Fluid Checkout on your website, you can also add the class `form-row-two-thirds` so that the “Street name” field takes two-thirds of the available space. These classes need to be separated with a comma `,`.
13. Click the “Save & Close” button to save the field.
14. Back to list of fields in the Billing group, move the new `billing_house_number` field in between the fields `billing_address_1` and `billing_address_2`.
15. At the bottom of the page, click the button “Save changes” to save the new position for the “House number” field.
16. Repeat the process for the shipping address, adding the “House number” field in the Shipping group.
At this point, the address fields in your checkout page should look similar to this:
House number field validation #
Since house numbers might contain letter and other characters, depending on the country, remember to disable any validation on the custom house number field.
Compatibility with plugin Germanized #
In case you are also using the plugin Germanized, which validates the “Street address” (address_1) field looking for a valid house number within it.
Remember to set the option “Validate street number” to “Never”. You can find this option at WP Admin > WooCommerce > Germanized > General > Checkout.
Mapping address suggestion results to the custom house number field #
The checkout form should now have the new “House number” field added, however, the plugin Google Address Autocomplete does not know about it yet.
You need to use a code snippet to tell the plugin Google Address Autocomplete about the new field — or any custom field for that matter.
If you are unsure about how to add the code snippet, check our article:
How to safely add code snippets to your WooCommerce website
The code snippet below will change the `default` field mappings, telling the plugin to autofill the new “House number” field with the value returned from the Google Places API. It also includes the same change specific to one country (US) that is commented out, it can be changed to any other country in case it does not work as some countries have different settings.
/**
* Change the `localeComponents` settings to fill custom house number fields.
*
* @param array $settings JS settings object of the plugin.
*/
function fcgaa_change_locale_mapping_house_number( $settings ) {
// New locale components to merge
$new_locale_components = array(
'default' => array(
'address_1' => array( 'route' ),
'house_number' => array( 'street_number' ),
'components_separator' => ', ',
),
// Example to set changes to specific countries only
// 'US' => array(
// 'address_1' => array( 'route' ),
// 'house_number' => array( 'street_number' ),
// 'components_separator' => ', ',
// ),
);
foreach ( $new_locale_components as $locale_key => $locale_settings ) {
// Create locale settings if not existent
if ( ! array_key_exists( $locale_key, $settings[ 'localeComponents' ] ) ) { $settings[ 'localeComponents' ][ $locale_key ] = array(); }
// Merge settings
$settings[ 'localeComponents' ][ $locale_key ] = array_merge( $settings[ 'localeComponents' ][ $locale_key ], $locale_settings );
}
return $settings;
}
add_filter( 'fc_gaa_google_autocomplete_js_settings', 'fcgaa_change_locale_mapping_house_number', 10 );If you used a different field ID for the house number fields, you’ll need to adjust it in the field mapping code above. Please note that field IDs in the address suggestion data mapping are used without the group prefixes `billing_` or `shipping_`.