How to Add Password Strength Meter in WooCommerce?

In this tutorial, we will see how we can add or modify the password strength meter in woocommerce registration form and how to remove it completely.

As you know a strong password is very important to secure our data from attackers. If you have set up a short character password then the attacker can easily guess and crack it and steal your crucial data. So always set up a strong password.

A strong password can have mixed characters lower, upper, alphanumeric and symbols are most secure. It is difficult to crack for attackers even machines can also not crack it. So always use 1 minimum 12 mixes character long password when you try to register online.

Let’s come to the tutorial, today I will show you how to add a password strength meter in woocommerce, so when visitors of your site try to register they can check the password is weak or strong. We will also see how to remove the password strength meter if you don’t have any restrictions while registering.

Add Password Strength Meter in WooCommerce

To add a password strength meter in the woocommerce, you have to make the action hook function and assign the strength parameter that we want to set up.

We have two filter hooks to make this password strength meter and show up the warnings and errors messaging while typing the password.

Method 1: Using woocommerce_min_password_strength Filter Hook

In this method, we will make a function hook using the woocommerce_min_password_strength filter and return the password strength parameter.

We have the following password parameter return settings and you can use them as per your requirements. But I would recommend using always a strong password.

• 0 : Very Weak
• 1 : Weak
• 2 : Little Stronger
• 3 : Medium (Default)
• 4 : Strong

Let’s make a function hook using one of the above (I meant 4) parameters to make our password strength strong.

add_filter( 'woocommerce_min_password_strength', 'change_password_strength_meter' );

function change_password_strength_meter( $strength ) {
	 return 4;
}

Add the above code in your child theme’s functions.php file and save it. Then you check it and you will it is asking for strong in medium case. You can see the difference in the following images.

Also Read: How to Create Child Theme in WordPress?

You can see the above code only accepted strong passwords, If it’s not strong enough the button will be disabled until you type the strong password.

Method 2: Using woocommerce_get_script_data Filter Hook

In this method, we will use the woocommerce_get_script_data filter hook to set the password strength and show the hint and error messages while typing.

Using this action hook, you can also change the message for hints and errors and show the custom message as you want.

Add the following code into the active theme’s functions.php file and save it and then check, you will it is working and showing the custom message hints and errors message.

add_filter( 'woocommerce_get_script_data', 'password_strength_meter_settings', 20, 2 );

function password_strength_meter_settings( $params, $handle  ) {

	if( $handle === 'wc-password-strength-meter' ) {
		$params = array_merge( $params, array(
			'min_password_strength' => 4,
			'i18n_password_error' => 'Make more stronger',
			'i18n_password_hint' => 'Please make your password at least 12 characters long and use a mix of UPPER and lowercase letters, numbers, and symbols (e.g.,  ! " ? $ % ^ & ).'
		) );
	}
	return $params;

}

The above code will show you a hint of a strong password that has mixed letters, numbers, symbols and also show the error message until a strong one. See the following image for the result.

Change the label for other password messages

If you also want to change the label for other password messages like ‘Weak’, ‘Medium’, and ‘Strong’ then you can do this.

We will use the wp_localize_script() function to translate the message label for woocommerce password strength meter settings.

add_action( 'wp_enqueue_scripts',  'wc_password_messages_labels', 9999 );

function wc_password_messages_labels() {

	wp_localize_script( 'wc-password-strength-meter', 'pwsL10n', array(
		'short' => 'Very short',
		'bad' => 'Very bad',
		'good' => 'Better but not strong',
		'strong' => 'Better',
		'mismatch' => 'Your passwords do not match, please re-enter them.'
	) );
    
}

Add the above code in the functions.php file and don’t forget to save it. Now you will see woocommerce password strength meter’s messages have been changed.

Remove Password Strength Meter in WooCommerce

If you don’t want to show password meter strength meter in your woocommerce form and allow users to add any type of password without any restrictions then you can also do this.

You just have to dequeue the password strength meter script using an action hook. So simply add the following code in your active theme’s functions.php file and save it.

add_action( 'wp_enqueue_scripts', 'remove_wc_password_strength_meter', 10 );

function remove_wc_password_strength_meter() {

	wp_dequeue_script( 'wc-password-strength-meter' );
	
}

After saving the functions.php file, you will see now password meter is not showing and users can have no restrictions while typing passwords.

Conclusion

So in this tutorial, we learned two methods about how to add or modify the password strength meter in woocommerce and also change the label for password messages label.

We also see how we can remove the woocommerce password strength meter completely from the form so users can type any password without any errors.