1. Home
  2. Blog
  3. WooCommerce

Password Strength Meter Customization in WooCommerce

Usually website owners do not want their clients to be annoyed with the password strength notifications. I was asked a couple of times to customize WooCommerce strength meter and after that the idea to create this tutorial appeared.

/10 comments

On the screenshot below you can see how the password strength meter works by default.

WooCommerce password strength method in Storefront theme
“Save Changes” button becomes active with Medium password strength. But keep in mind that the Checkout page accepts all passwords, it just shows the strength meter messages.

And the below code allows to change that. You can configure it the way that any passwords will be accepted or only strong passwords will be allowed – just as you want.

/**
 * Change the strength requirement on the woocommerce password
 *
 * Strength Settings
 * 4 = Strong
 * 3 = Medium (default) 
 * 2 = Also Weak but a little stronger 
 * 1 = Password should be at least Weak
 * 0 = Very Weak / Anything
 */
add_filter( 'woocommerce_min_password_strength', 'misha_change_password_strength' );
 
function misha_change_password_strength( $strength ) {
	 return 4;
}

I decided to ask users for the most strongest passwords here.

You can configure the strength meter the way that only strong passwords will be accepted.
Only strong passwords will be accepted when you set Strength Meter value to 4.

By the way, there is another action hook that allows to set the minimum accepted passwords strength. And with this hook you can also change the password error message and the hint.

add_filter( 'woocommerce_get_script_data', 'misha_strength_meter_settings', 20, 2 );
 
function misha_strength_meter_settings( $params, $handle  ) {
 
	if( $handle === 'wc-password-strength-meter' ) {
		$params = array_merge( $params, array(
			'min_password_strength' => 4,
			'i18n_password_error' => 'Do not you want to be protected? Make it stronger!',
			'i18n_password_hint' => 'Yes, I know, it is simple to use the same weak password each time for all websites you use. I\'m sorry, but I won\'t let you do so, just because I care about your account security. Please make your password <strong>at least 7 characters</strong> long and use a mix of <strong>UPPER</strong> and <strong>lowercase</strong> letters, <strong>numbers</strong>, and <strong>symbols</strong> (e.g., <strong> ! " ? $ % ^ & </strong>).'
		) );
	}
	return $params;
 
}

And we can also change “Weak”, “Medium”, “Strong” messages! Let’s do it.

add_action( 'wp_enqueue_scripts',  'misha_password_messages', 9999 );
 
function misha_password_messages() {
 
	wp_localize_script( 'wc-password-strength-meter', 'pwsL10n', array(
		'short' => 'Too short',
		'bad' => 'Too bad',
		'good' => 'Better but not enough',
		'strong' => 'Better',
		'mismatch' => 'Your passwords do not match, please re-enter them.'
	) );
 
}

My result:

Customized password strength meter and its messages in WooCommerce

Completely Deactivate Password Strength Meter

If you do not care at all what passwords your customers will use, insert the following piece of code to your current theme functions.php and that’s all you need to do.

/**
 * Remove the password strength meter script from the scripts queue
 * you can also use wp_print_scripts hook
 */
add_action( 'wp_enqueue_scripts', 'misha_deactivate_pass_strength_meter', 10 );
function misha_deactivate_pass_strength_meter() {
 
	wp_dequeue_script( 'wc-password-strength-meter' );
 
}

The password strength meter will be deactivated on both My Account and Checkout pages.

More WooCommerce Account Customization

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 10

Leave a comment

php js HTML CSS Code