woocommerceの新規登録ページにあるパスワード強度を表示させるJSは、パスワードが弱いのにボタンが押せてしまったり、なにかと使い勝手が悪いので自前のパスワードチェックにする方法です。
デフォルトのパスワードチェックを無効化
いつもどおり、functions.phpに記述してデフォルトのパスワードチェックを無効化します。
//* デフォルトのパスワードチェックを無効化 *//
function remove_password_strength() {
wp_dequeue_script( 'wc-password-strength-meter' );
}
add_action( 'wp_print_scripts', 'iconic_remove_password_strength', 10 );
新規登録ページなどにJSとCSSを追加
まずはJS。
//パスワード強度チェック - 日本
$(function() {
$('#reg_password').on('keyup', function() {
// パスワードの入力値を取得
const value = $(this).val();
// 入力値から強度を確認して結果を取得
const result = checkStrength($('#reg_password').val());
// 結果を出力する
$('#result').html(result);
//↑ボタン自体に出力もできるね
});
function checkStrength(password) {
let strength = 0 // 強さ
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'パスワードが短すぎます'
}
// 文字数が7より大きければ+1
if (password.length > 7) strength += 1
// 英字の大文字と小文字を含んでいれば+1
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
// 英字と数字を含んでいれば+1
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
// 記号を含んでいれば+1
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// 記号を2つ含んでいれば+1
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// 強度点数を元に計算してクラスをつけたり消したり
if (strength < 2) {
$('#result').removeClass()
$('#result').addClass('weak')
$('#regme').removeClass()
$('#regme').addClass('damenano')
return '記号や大文字を入れてみましょう'
} else if (strength == 2) {
$('#result').removeClass()
$('#regme').removeClass()
$('#result').addClass('good')
$('#regme').addClass('goodie')
return '登録可能です!'
} else {
$('#result').removeClass()
$('#regme').removeClass()
$('#result').addClass('strong')
$('#regme').addClass('goodie')
return '登録可能です!'
}
}
});
新規登録ページ(form-login.phpなど)のPHPにid=”result”を追加して強度表示をさせるところを追加したり、新規登録ボタンを#regmeでくくったり。
パスワードinputあたり
<p class="passwords woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required"> * </span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
<!-- ↓パスワード強度を表示するところ -->
<p id="result"></p>
ボタンあたり
<div id="regme"><!-- ←ここにクラスが付与されるのでCSSでカスタマイズ -->
<button id="regregbutton" type="submit" class="yubi woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"> <?php esc_html_e( 'Register', 'woocommerce' ); ?></button>
</div>
CSS (かなり参考レベル)
#regme #regregbutton {
background: gainsboro;
pointer-events: none; /* パスワード強度が満たないときは薄灰色な上、クリック不可 */
border-radius: 1rem;
}
#regme .goodie button#regregbutton {
background: blue;
border-radius: 0.5rem;
pointer-events: all;
}
#regme .goodie button#regregbutton:hover {
background: #174f9e;
}
実装された画面の流れ
新規登録画面のパスワード入力欄の下に#resultを赤背景で表示しています。


入力開始直後に「パスワードが短すぎます」って警告するのもどうかと思うのでそのあたりも調整してみましょう。

数字ばっかり設定してると記号や大文字などを混ぜるような指示をしてくれるのは親切。

パスワード強度がOKになると、CSSで押せなかった登録ボタンが押せるようになります。JSで制御するのもいいですが、CSSのほうが格段に楽です。
woocommerceのカスタマイズは店舗それぞれ
woocommerceの新規登録画面を別の方法で表示させたり、別PHPで運用している場合はこの限りじゃないかもしれません。といいますか、woocommerceのカスタマイズをしている時点でネットに掲載されているようなカスタマイズがコピペで適用できると思っていないという方な気がします。
woocommerceはJSをきれいに、きっちりとまとめ上げるよりもそれぞれのPHPの付近にJSを直書きしておいたほうがあとから忘れずに修正ができる気がするのですが、これはやっぱり邪道なのでしょうかね(汗)