Remove password input wrapper

Hi there,

Every time a password input is used, e.g. on the log-in page, or within the my-account page (to change the password), Woocommerce seems to be adding a span with the class “password-input” around that input element.

So where a text input looks like this:

<div class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" ... >
<label>Text</label>
</div>

A password input always ends up looking like this:

<div class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
<span class="password-input">
<input type="password" class="woocommerce-Input woocommerce-Input--password input-text" ... ">
</span>
<label>Password</label>
</div>

This only happens on password input elements as mentioned, and I would like to prevent Woocommerce from doing that.

After a bit of research, it seems to be the assets/js/frontend/woocommerce.js file that is responsible for this.

Starting from line 84, Woocommerce triggers the following JS:

// Add 'password-input' class to the password wrapper in checkout page.
	$( '.woocommerce form input' ).filter(':password').parent('span').addClass('password-input');
	$( '.password-input' ).append( '<span class="show-password-input"></span>' );

My question would be, how exactly I can either modify the woocommerce.js file and remove the function above, or potentially prevent Woocommerce from executing this bit of JS in the first place?

Thanks a lot in advance!

Best,
John

• This topic was modified 5 years, 1 month ago by johndbd123.