Password Strength Meter Customization in WooCommerce

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 at least 7 characters long and use a mix of UPPER and lowercase letters, numbers, and symbols (e.g.,  ! " ? $ % ^ & ).'
		) );
	}
	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.

#WooCommerce, #My Account
Misha Rudrastyh

Misha Rudrastyh

I develop websites since 2008, so it is total of 14 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me

Follow me on Twitter