How To Add Password Strength Meter In WordPress Or WooCommerce Registration Form

Hello, friends here you will better understand how to add a password strength meter on the password & confirm password field in WordPress or WooCommerce registration form.

Please Follow below Step:

Step: 1

Enqueue(add) below script into  child theme’s functions.php file:

wp_enqueue_script( 'password-strength-meter' );

For Enqueue script learn This Blog.

Step: 2

Add Below js code into your Child’s theme js file.

jQuery( document ).ready( function( $ ) {
    jQuery( 'body' ).on( 'keyup', '#password, #cnfrm_password', function( event ) {
        if( jQuery( this ).val() != '' ) {
            jQuery( 'small.cstm_woo_hint,#password-length' ).show();
            check_password_strength( jQuery( '#password' ), jQuery ( '#cnfrm_password' ), jQuery( '#password-length' ), jQuery( 'button[type=submit]' ), ['123', 'abc', 'hello', 'admin'] );
        }else{
            jQuery( 'small.cstm_woo_hint,#password-length' ).hide();
        }
    }); 
});


function check_password_strength( password,  confirm_password, length_Message, submit_Btn, blacklist_Words ) {
    var password = password.val();
    var confirm_password = confirm_password.val();
    blacklist_Words = blacklist_Words.concat( wp.passwordStrength.userInputBlacklist() )
    submit_Btn.attr( 'disabled', 'disabled' );
    length_Message.removeClass( 'short bad good strong' );
    var password_length = wp.passwordStrength.meter( password, blacklist_Words, confirm_password );

  switch ( password_length ) {

    case 2:
      length_Message.addClass( 'bad' ).html( pwsL10n.bad );
    break;

    case 3:
      length_Message.addClass( 'good' ).html( pwsL10n.good );
    break;

    case 4:
      length_Message.addClass( 'strong' ).html( pwsL10n.strong );
    break;

    case 5:
      length_Message.addClass( 'short' ).html( pwsL10n.mismatch );
    break;	

    default:
      length_Message.addClass( 'short' ).html( pwsL10n.short );

  }
  if ( 4 === password_length && '' !== confirm_password.trim() ) {
    submit_Btn.removeAttr( 'disabled' );
  }
  return password_length;
    
    
}

Here Are the descriptions of the above function’s argument:

1.  password : This is First argument of password field  [ jQuery( ‘#password’ ) ] (we can use the field name or Id/class)
2. confirm_password: This is Second argument of  confirm password field  [ jQuery( ‘#cnfrm_password’ ) ] (we can use the field name or Id/class)
3. length_Message: This is the Third argument of password length Field  [ jQuery( ‘button[type=submit]’ ) ] (we can use the Id/class)
4. submit_Btn : This is fourth argument of  submit button Field  [ jQuery( ‘button[type=submit]’ ) ] (we can use Id/class instead)
5. blacklist_Words: This is the Fifth argument list of words that won’t be accepted as a part of the password (If you want to add then You can add this: e.x: [‘123’, ‘ABC, ‘hello’, ‘admin’]  otherwise pass a blank array (e.x : [ ] ) )

If you want to add Own password length Error message then Just add Below Switch case Code Instead Above :
Just copy the below code and paste it into the above Switch case Code :

switch ( password_length ) {

        case 2:
        length_Message.addClass( 'bad' ).html( 'weak - Please enter a stronger password.' );
        break;

        case 3:
        length_Message.addClass( 'good' ).html( 'Medium' );
        break;

        case 4:
        length_Message.addClass( 'strong' ).html( 'Strong' );
        break;

        case 5:
        length_Message.addClass( 'short' ).html( pwsL10n.mismatch );
        break;

        default:
        length_Message.addClass( 'short' ).html( 'Very weak - Please enter a stronger password.' );

    }
    if( password_length < 3 ){
        jQuery( 'small.cstm_woo_hint' ).show();
    }else{
        jQuery( 'small.cstm_woo_hint' ).hide();
    }
    if ( 3 === password_length ) {
        submit_Btn.removeAttr( 'disabled' );
    }
    return password_length;

Here Are the descriptions of the above Switch case :

case 2: password-length == 2 then It will show a message Like this: ‘weak – Please enter a stronger password.‘
case 3: password-length == 3 then It will show a message Like this: ‘Medium‘
case 4: password-length == 4 then It will show a message Like this: ‘Strong.‘
case 5: password-length == 5 then It will show a message Like this: ‘mismatch.‘
Default: password-length out of above then It will show message Like this: ‘weak – Please enter a stronger password.‘

Step: 3

Create a new registration form otherwise in the existing registration form add below HTML after (input type=”password”) field like this:
Just copy the below code and paste it into your new registration form (input type=”password”) field or existing registration form (input type=” password”) field or which you have already.

Just copy below HTML code and paste it Below ( input type=”password” ) field :

/* <input type="password" id="password" class="password" /> */
/* Below password field */
/* copy below code only */
<span id="password-length"></span>
<small class="cstm_woo_hint" style="display:none;">
Hint: The password should be at least twelve characters long. To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ % ^ &amp; ).
</small>

Below Code is for the new registration form :

<html>
 <body>
  <form method="post" class="woocommerce-form woocommerce-form-register register">
    
    <div class="inputGroup inputGroup2">
      <label for="password">Password</label>
      <input type="password" id="password" class="password" />
          <span id="password-length"></span>
           <small class="cstm_woo_hint" style="display:none;">
            Hint: The password should be at least twelve characters long. To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ % ^ &amp; ).
           </small>
    </div>
    <div class="inputGroup inputGroup2">
        <label for="cnfrm_password">Confirm Password</label>
        <input type="password" id="cnfrm_password" class="password" />
    </div>
    <div class="inputGroup inputGroup3">
      <button type="submit" id="register" class="button" name="register">
    </div>	
    
  </form>
 </body>
</html>

Now It’s Ready.

You Can View the following results.