タグアーカイブ JavaScript競合

カートページで数量を変更すると違う数になる時の対処法

カートページで数量を変更すると違う数になる時の対処法

WooCommerceのカートページで数量を1から2に変更したのに3が表示される不具合は、テーマまたはプラグインの古いJavaScriptが原因で数量更新のイベントが二重に処理されるケースが多い。まずテーマとWordPress本体・WooCommerceを更新し、それでも直らなければプラグインの競合を切り分けるのが最短の解決手順だ。

なぜカートページの数量変更で数がずれるのか

なぜカートページの数量変更で数がずれるのか

カートページで数量を変更すると、WooCommerceはAjax通信でサーバーに更新を送り、その結果を画面に反映する。このときブラウザ側のJavaScriptが「変更前の数量」と「変更後の数量」を正しく引き算して表示する仕組みになっている。

ところがテーマやプラグインが古いjQueryや独自のAjax処理を持っていると、同じクリックや入力イベントに対して数量加算の処理が2回走ることがある。たとえば「1を2に変更」が「1を3に変更」として解釈され、画面に3が表示される。

特に数量に小数を許可するプラグイン(WooCommerce Decimal Productなど)が有効な場合、数量フィールドの値の扱いが標準と変わるため、テーマ側のJavaScriptとの相性問題が表面化しやすい。プラグインを無効化すると正常になることから、原因がプラグイン単体でなく「プラグインとテーマの組み合わせ」にあると判断できる。

テーマとWordPressを最新版に更新する手順

テーマとWordPressを最新版に更新する手順

この不具合は、テーマ・WordPress・WooCommerceのいずれかが古いことで、最近のブラウザやプラグインとの間でJavaScriptの仕様差が生じるために起きることがある。まずは更新作業から始める。

STEP 1 サイト全体のバックアップを取る
STEP 2 WordPress本体・テーマ・WooCommerce・全プラグインを更新する
STEP 3 キャッシュプラグインのキャッシュを全削除する
STEP 4 カートページで数量を変更して動作確認する

更新後はシークレットウィンドウや別ブラウザでテストする。通常のブラウザに古いCookieやキャッシュが残っていると、修正後も古いJavaScriptが動いてしまうためだ。

JavaScriptの競合を切り分ける手順

JavaScriptの競合を切り分ける手順

更新しても症状が変わらない場合、特定のプラグインやテーマのJavaScriptがWooCommerceの数量更新イベントと競合している。原因を特定するには「無効化テスト」が確実だ。

プラグインを1つずつ無効化して原因を特定する

まずプラグイン一覧から、数量に関係するプラグイン(小数プラグイン・カスタム数量プラグイン・Ajaxカートプラグインなど)を候補として絞り込む。それぞれ無効化してカートページを再読み込みし、数量が正しく更新されるか確認する。

もし特定のプラグインを無効化したときだけ正常になるなら、そのプラグインが原因だ。プラグインの更新版が出ていないか確認し、出ていなければ代替プラグインへの乗り換えを検討する。

ブラウザのコンソールでJavaScriptエラーを確認する

ブラウザのデベロッパーツール(ChromeではF12キー)を開き、「Console」タブを確認する。カートページで数量を変更したときに赤いエラーが表示される場合、エラーのファイル名から競合元を特定できる。

エラーメッセージが「jQuery is not defined」や「$ is not a function」なら、テーマのJavaScriptがjQueryを正しく読み込んでいない。wp_enqueue_script の順序や依存関係の問題なので、テーマ制作者に修正を依頼するか、子テーマ側で読み込みを調整する。

「cart-fragments」や「wc-cart-fragments」に関するエラーなら、WooCommerceのAjaxカート更新機能が別のプラグインと衝突している。該当プラグインを特定して無効化すれば症状は収まる。

キャッシュとCookieの影響を排除する

キャッシュとCookieの影響を排除する

修正後も古い表示が続く場合は、サーバー側のキャッシュとブラウザ側のCookieが原因で古いJavaScriptが読み込まれている可能性がある。キャッシュプラグイン(WP Super Cache、W3 Total Cache、LiteSpeed Cacheなど)のキャッシュを全削除し、ブラウザのCookieとキャッシュも消去してから再テストする。

また、CDN(Cloudflareなど)を利用している場合は、CDN側のキャッシュもクリアする。CDNが古いJavaScriptファイルを配信し続けると、サーバー上では更新済みでもブラウザには古いコードが届く。

よくある質問

数量が正しく更新されるか確認する方法は?

カートページで数量を複数回変更し、そのたびにカート内の小計と合計が正しく再計算されるかを確認する。加えて管理画面の「WooCommerce→ステータス→ログ」にJavaScript関連のエラーが記録されていないか確認するとよい。

テーマを更新しても大丈夫?

更新前にバックアップを取っていれば問題ない。カスタマイズをテーマ本体に直接書いている場合は、更新で消える可能性があるので、子テーマや独自プラグインに移してから更新するのが安全だ。

小数プラグインを使い続けながら直す方法は?

プラグイン自体に更新版がない場合は、テーマ側のJavaScriptを修正して競合を回避する必要がある。具体的にはカートページの数量更新をWooCommerce標準のAjax処理に任せるよう、テーマのcustom.jsmain.jsから数量関連のコードを除去する。

テストサイトを作るべき?

本番サイトに影響を与えずに原因を切り分けたい場合は、ステージング環境(多くのレンタルサーバーに標準搭載)か、ローカル環境(LocalやXAMPPなど)で同じテーマとプラグインを再現するのが有効だ。テストサイトで症状が再現できれば、切り分け作業を安全に進められる。

PHPのバージョンは関係ある?

PHPのバージョンが極端に古い(7.4未満など)場合、WooCommerceの最新版が正しく動作しないことがある。サーバー管理画面でPHP 8.0以上に更新できるか確認するのも有効な切り分けのひとつだ。

この記事のポイント

  • カートの数量が「1→2」で「3」になるのはJavaScriptの二重処理が主因
  • テーマ・WordPress・WooCommerceの更新で解決するケースが多い
  • 直らない場合はプラグインを1つずつ無効化して競合元を特定する
  • ブラウザとサーバーのキャッシュ・Cookie削除を忘れない
  • 小数プラグインを使うならテーマ側のJavaScript競合を重点確認する