fixing autocomplete form for checkout / double house numbers

Hi there @elvagabundo ??

Thanks for reaching out to Woo Support!

In the checkout the browser autofill oftentimes gives wrong information, this is mainly for double house numbers for our customers. I would think our checkout form is set up in some way that google (or other browsers im not sure) think there needs to be both an adress field including house number and then a seperate house number field.

However, i don’t know how this works, how the browser determines this or how to change the behavior of the form.

I went ahead with visiting the site at https://chocoladeverkopers.nl/, in an effort to experience real-life what the described autocomplete issue is about.

In my experience, I was able to enter all (test) customer details manually, and the house number field was not there in the first place. Below, I am attaching a screenshot, for reference.

Side note: upon opening-up the Checkout page, there was Netherlands selected as a country, before I change it to Spain, where house number was a field. Still, no autocomplete, though.

Just to clarify, did you already have a chance to test with the Checkout Field Editor for WooCommerce disabled, and see if the double house numbers issue persists, or otherwise?

I trust that points you in the right direction, but if you have more questions, let us know.

We’re happy to help.

Hello! Thanks for the feedback, very much appreciated!

I think i have seen the problem mainly (or only, not sure) with dutch customers, so with NL selected as a country, and on the dutch country page. Maybe this differs from the international version, although i am not sure if that makes sense. But maybe i can also test myself on a different computer, as for me it works as well. Or maybe i can ask some customers where i get the double housenumbers for their experience and the devices used, perhaps its only on mobile or something – that way i can maybe have more clear information.

I will try to check with the plugin, but in the current time our product (chocolate) is very popular so i don’t want to risk disabling things at the moment, but this is certainly something to try in the next month.

Hi @elvagabundo,

Thank you for providing a detailed explanation of the issue you’re facing.

The browser’s autofill feature works based on the ‘name’ attribute of the form fields. If the name attribute matches with the stored information in the browser, it will autofill the information. This is likely why some of your customers are seeing double house numbers – the browser is filling both an address field and a separate house number field.

To resolve this, you may customize the ‘name’ attribute of your form fields to ensure they are unique and don’t overlap with each other. This customization can be done within the Checkout Field Editor for WooCommerce plugin settings.

However, before you proceed with any changes, it’s a good idea to conduct some tests as you mentioned. Try to replicate the issue on different devices and browsers. Also, consider reaching out to your customers for their input. This will help you identify if the issue is specific to certain devices or browsers.

I hope this information helps! If you need any further assistance, please don’t hesitate to ask.

Thank you!

I will look into it more, but now that i know about the names i checked the field that is wrong and it has not only a name (indeed, the same i see in checkout field editor) but also somehow an ‘autocomplete’ value which is diffirent I guess possibly this is why browsers fill in the full adress including house number? And if so, do you know where this value is set? It doesn’t seem to be in the plugin.

<input type="text" class="input-text " name="billing_street_name" id="billing_street_name" placeholder="" value="rijksstraatweg" autocomplete="street-address">

Hey @elvagabundo,

The autocomplete attribute you’re seeing in the input field is a standard HTML attribute that helps users to fill out forms based on earlier input. The value street-address is a token that the browser recognizes, and it is indeed possible that this is causing the browser to fill in the full address, including the house number.

The autocomplete attribute is not typically managed by the Checkout Field Editor plugin. It’s usually added by the theme or another plugin that’s handling the form output. If you’re using a custom theme or another plugin that modifies WooCommerce checkout fields, that could be where the autocomplete attribute is coming from.

To resolve this, you might need to modify the theme or plugin code to change or remove the autocomplete attribute from the billing_street_name field. But please be careful when editing code, as it can cause issues with your site if not done correctly. It’s always a good idea to backup your site before making any changes.

If you’re uncomfortable with code changes, I recommend contacting the developer of your theme or the plugin that’s modifying the checkout fields for support.

I hope this helps! If you have any further questions, please feel free to ask.