How to make house number required

How to make house number required

The case for mandatory house number in addresses

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.

In order to fix this problem, the first thought would be to validate the "Street address" field and make sure that a part of it is a 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 culture, 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, the plugin Google Address Autocomplete cannot force users to enter a house number in the "Street address" field by default.

Making the house number field mandatory

One way to solve the problem is to create a new "House number" field and make it mandatory, and then map the "house number" value from the Google Places API to the newly created field.

In this case, if a house number value is not returned from the address suggestions 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.

We'll be using the plugin Checkout Field Editor for WooCommerce (by ThemeHigh) to create the new field, however, it should also be possible to use other similar plugins or custom code to make these changes.



1. Install the plugin Checkout Field Editor for WooCommerce (by ThemeHigh) and go to WP Admin > WooCommerce > Checkout Form.
2. 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".
4. Give it an ID in the "Name" field that such as `billing_house_number`. Please note that the field name ending should match on both the Billing and Shipping groups.
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`, and if you are also using Fluid Checkout on your website, add the class `form-row-one-third`. 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 new 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.
12. Set the field classes to `form-row-first`, and if you are also using Fluid Checkout on your website, add the class `form-row-two-thirds`. Classes need to be separated with a comma `,`.
13. Click the "Save & Close" button to save the new field.



14. Back to fields list 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 like this.

Mapping address suggestion results to the custom house number field

The checkout page 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:

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.
  1. /**
  2.  * Change the `localeComponents` settings to fill custom house number fields.
  3.  * 
  4.  * @param   array  $settings  JS settings object of the plugin.
  5.  */
  6. function fcgaa_change_locale_mapping_house_number( $settings ) {
  7. // New locale components to merge
  8. $new_locale_components = array(
  9. 'default' => array(
  10. 'address_1' => array( 'route' ),
  11. 'house_number' => array( 'street_number' ),
  12. 'components_separator' => ', ',
  13. ),
  14. // 'US' => array(
  15. //  'address_1' => array( 'route' ),
  16. //  'house_number' => array( 'street_number' ),
  17. //  'components_separator' => ', ',
  18. // ),
  19. );
  21. foreach ( $new_locale_components as $locale_key => $locale_settings ) {
  22. // Create locale settings if not existent
  23. if ( ! array_key_exists( $locale_key, $settings[ 'localeComponents' ] ) ) { $settings[ 'localeComponents' ][ $locale_key ] = array(); }
  25. // Merge settings
  26. $settings[ 'localeComponents' ][ $locale_key ] = array_merge( $settings[ 'localeComponents' ][ $locale_key ], $locale_settings );
  27. }

  29. return $settings;
  30. }
  31. add_filter( 'fc_gaa_google_autocomplete_js_settings', 'fcgaa_change_locale_mapping_house_number', 10 );

If you used a different field ID, you'll need to adjust it in the field mapping. Please note that field IDs in the mapping are used without the group prefixes `billing_` or `shipping_`.


    • Related Articles

    • Getting started with Google Address Autocomplete

      How to get the Google Places API Key from Google Set up an account at Google Cloud Console First, you'll need to set up your Google Cloud Console Account, Enable billing and Create a new project. Follow the instructions on the Google Places API ...

    • How to enable users to search addresses by zip code?

      Why does the plugin do not allow search by zip code out of the box? From a User Experience point of view, because of the label of the form field, users will tend to start typing their desired street address and will be presented with address ...