Found 2 elements with non-unique id #woocommerce-login-nonce

I see an error in the console saying that there are to elements having the same id:

<input type="hidden" id="woocommerce-login-nonce" name="woocommerce-login-nonce" value="f85d5a0af4">

Attachments:

You must be logged in to view attached files.

Hi,

There are a few warning that related to our theme and they say about duplicate elements on the page. It happens because of two login and search forms on some pages. Don’t worry about them.

Regards

I’m sorry but I think you’re wrong. This is clearly an error as seen in the console. I know that it doesn’t break existing functionality but as soon as you try to extend the functionality and rely on ids (eg for javascript) the problems will be big.

The specification says it should strictly avoided.

https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really

They appear on almost all WooCommerce themes. Check most popular themes for example

https://gyazo.com/bac73af6bce8323942037ec8423b487e
https://gyazo.com/63d5ec5d490c547222ccaeb4df4d9060

Because other people make mistakes you want to do the same? 😉 My customers will check that. Often they know html and will ask why there are 2 ids which is an error.

Actually, as we said, it is not our mistake and depends on the WooCommerce plugin template markup 🙂

So it should be submitted to woocommerce as a bug?

If you want to prevent the error, you have to disable login form popup from your header. It appears twice: in the header and in the sticky header. That is why this message appears. WooCommerce will not remove the ID attribute from the form’s input.

Ok, thank you. How do I remove the login form in the sticky header?

Sticky header components are cloned from the main header and you can’t remove it from the sticky header only. It can be disabled globally.

[Author]

Posts