WooCommerce: Add password confirmation field

One of the most common mistakes made by users when registering on a site is with the password. A lot of times they misspell it, or just forget it.

It is for this reason that in many websites, and especially in online stores where a password is requested to create the user account, the password is requested to be repeated , which becomes a way in which the customer is more aware of the password you choose for your account, and incidentally if it is possible to write it down in a safe place.

Unfortunately, this is not a feature that WooCommerce has by default or that we can activate with a simple click on any of its settings.

But fortunately, being open source and having extensive documentation and expandability, it is easy to add this feature if we need it.

So let’s see how to add a user password confirmation field in the two places we might need it .

How to add a field to confirm the password on the registration page

First of all, we must have the user registration active in our online store, something that we can activate in WooCommerce → Settings → Accounts and privacy .

If we have this possibility active, by default we will see something like this .

So let’s do a little magic and add the password confirmation field.

The magic comes, as always, from the hand of a little code , this:

 / * Create password validation field on registration page * /
function wc_register_form_password_validation () {
if (get_option ('woocommerce_registration_generate_password') == 'no') {
?>

  php _e ('Repeat password', 'woocommerce'); ?>  *  


 php
}
}
add_action ('woocommerce_register_form', 'wc_register_form_password_validation');
/ * Validate passwords and define error message * /
function register_password_validation ($ reg_errors, $ sanitized_user_login, $ user_email) {
global $ woocommerce;
extract ($ _POST);
if (strcmp ($ password, $ password2)! == 0) {
return new WP_Error ('registration-error', __ ('Passwords do not match.', 'woocommerce'));
}
return $ reg_errors;
}
add_filter ('woocommerce_registration_errors', 'register_password_validation', 10,3);

You can easily add this code, either in a customization file, the theme, or through a code plugin, by following the instructions in this guide :

How and where to paste PHP, JS, CSS codes and functions that you find out there in WordPress

The result , after saving the changes, will be this.

How to add a field to confirm the password on the payment page or checkout

The next step, even for consistency, would be to add the confirmation field also on the final purchase page , for users who have not previously registered.

Just one detail first of all, and that is for it to work, for your online store to ask for passwords, both in the previous case and in this case, you must have configured that the user is asked to create a password at the end of the purchase. This can also be configured in this case in WooCommerce → Settings → Accounts and privacy , like this:

Once you confirm that the box in the previous screenshot is not active , because otherwise it would not ask for a password, it would be created automatically, the code that will add the password confirmation field at the end of the purchase will be this:

 / * Create the password validation field on the checkout page * /
function wc_checkout_confirm_password_validation ($ checkout) {
if (get_option ('woocommerce_registration_generate_password') == 'no') {
$ fields = $ checkout-> get_checkout_fields ();
$ fields ['account'] ['account_confirm_password'] = array (
'type' => 'password',
'label' => __ ('Repeat password', 'woocommerce'),
'required' => true,
'placeholder' => _x ('Password', 'placeholder', 'woocommerce')
);
$ checkout -> __ set ('checkout_fields', $ fields);
}
}
add_action ('woocommerce_checkout_init', 'wc_checkout_confirm_password_validation', 10, 1);
/ * Define the validation error message and validate the password on the checkout page * /
function wc_checkout_password_validation ($ posted) {
$ checkout = WC () -> checkout;
if (! is_user_logged_in () && ($ checkout-> must_create_account ||! empty ($ posted ['createaccount']))) {
if (strcmp ($ posted ['account_password'], $ posted ['account_confirm_password'])! == 0) {
wc_add_notice (__ ('Passwords do not match.', 'woocommerce'), 'error');
}
}
}
add_action ('woocommerce_after_checkout_validation', 'wc_checkout_password_validation', 10, 2);

Check the previous point to follow the link to the guide on how to copy and paste codes in your WordPress if you do not know how to do it. And, when you have applied the code you will get the expected result :

Before

After

Thanks to José Luis for sharing these codes in the forums.

Did you like this article? You can’t imagine what you’re missing on YouTube !