Since we already saw how to do it for emails I thought to myself “We should probably be able to do it with passwords too right?“. And that’s what we are going to do because customers can make mistakes with passwords too.
And this is a very common validation field when we create accounts anywhere else in the world wide web because it is crucial that you use the correct password so you can access your account later.
Unfortunately, this is not a feature that WooCommerce has by default.
Table of Contents
How to add a field to confirm the password on the registration page
First of all, we must have user registration active in our online store, something we can activate in WooCommerce → Settings → Accounts & Privacy.
If we have this possibility activated, by default we will see something similar to this on that page.
And how do we add the password confirmation field?
As always with a little bit of code, this one:
/* Create the validation field for the password */
function wc_register_form_password_validation() {
if ( get_option( 'woocommerce_registration_generate_password' ) == 'no' ) {
?>
<p class="form-row form-row-wide">
<label for="reg_password2"><?php _e( 'Repeat password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" class="input-text" name="password2" id="reg_password2" autocomplete="current-password" />
</p>
<?php
}
}
add_action( 'woocommerce_register_form', 'wc_register_form_password_validation' );
/* Validate passwords and 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);Code language: HTML, XML (xml)You can easily add this code, either in a customizations file, the theme or via a code plugin, by following the instructions in this guide:
WordPress guide: How and where to paste PHP, JS, CSS codes and functions
The result, after saving the changes, will look like this.
How to add a field to confirm the password on the payment or checkout page
The next step, for consistency, would be to add the confirmation field on the checkout page too, for users who have not previously registered.
Just one detail before anything else, for it to work, for your online store to ask for passwords, both in the previous case and in this one, you must have configured that the user is asked to create a password. This can also be configured in this case in WooCommerce → Settings → Accounts and privacy, like this:
Once you confirm that the checkbox in the previous screenshot is not active, the code that will add the password confirmation field at checkout will be this one:
/* Create the validation field for the password at checkout */
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 );
/* Validate passwords and error message */
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 );Code language: PHP (php)Check the previous point to follow the link to the guide on how to copy and paste codes in your WordPress if you don’t know how to do it. And, when you have applied the code you will get the expected result:
