WooCommerce カートに数量の変更時にカートの自動更新方法

Last Updated:2023年07月17日| コメントを残す

WordPress WooCommerce(WooCommerce)ショッピングモールで顧客が商品をショッピングカートに追加した後にショッピングカートで数量を変更する場合は、「ショッピングカートの更新」ボタンを押すだけでショッピングカートの合計金額が更新されます。

ユーザーがショッピングカートのページで商品の数量を調整するたびに、ショッピングカートが自動的に更新されるようにしたい場合があります。

WooCommerce カート自動更新

そのような場合は、次の方法を使用することができます。

ステップ1: WooCommerce 「カートの更新」(Update Cart) ボタンを隠す

次のCSSコードを追加するようにします。 WordPressでカスタムCSSコードを追加する方法は、WordPressでのCSSを追加する「をご覧ください。

/* WooCommerce '장바구니 갱신' 버튼 숨기기 */
/* Hide WooCoommerce "Update Cart" button */

input[name='update_cart'] {
display: none !important;
}
 
/* 또는 */
 
button[name='update_cart'] {
display: none !important;
}

テーマによっては、上記のコードを追加しても「カートの更新」ボタンが消えないことがあります。 そのような場合は、テーマに合わせて変更する必要があります。 例えば、 Avadaでは、次のコードで「カートを更新」ボタンを非表示にすることができます。

/* Avada 테마에서 '장바구니 갱신' 버튼 숨기기 */
/* Hide "Update Cart" button in Avada */

.cart-collaterals .cart_totals .fusion-button.fusion-update-cart {
display: none !important;
}

ステップ2:カートページで数量の変更時にカートの自動更新

次に使用しているテーマの関数ファイルに次のコードを追加して、顧客が数量を変更したときカートが自動更新されるようにします。 (チャイルドテーマを使用する必要がテーマが更新されても、変更が消えません。)

/* 수량 변경 시 장바구니 자동 갱신 */
/* Auto update cart when changing quantity */

add_action( 'wp_footer', 'auto_refresh_cart_amount' ); 
 
function auto_refresh_cart_amount() { 
   if (is_cart()) { 
      ?> 
      <script type="text/javascript"> 
         jQuery('div.woocommerce').on('click', 'input.qty', function(){ 
            jQuery("[name='update_cart']").trigger("click"); 
         }); 
      </script> 
      <?php 
   } 
}

インターネット上で検索されているほとんどの記事で上記のようなコードを提示します。 しかし、上記のコードを適用してみると、数値の増減ボタンを利用して、数量を変更する場合には、正常に動作しない可能性があります。

上記のコードの代わりに次のコードを使用すると、顧客が数量の増減ボタンをクリックするたびに、ショッピングカートが更新されるようにすることができます。

add_action( 'wp_footer', 'auto_refresh_cart_amount_alternative' ); 
 
function auto_refresh_cart_amount_alternative() { 
   if (is_cart()) { 
      ?> 
      <script type="text/javascript"> 
         jQuery('div.woocommerce').on('click', 'input.qty, input.plus, input.minus', function(){ 
            jQuery("[name='update_cart']").trigger("click"); 
         }); 
      </script> 
      <?php 
   } 
}

上記のコードを Flatsome과 Avada テーマで追加して、テストしてみるとうまく動作しました。 コードを入れても変化がない場合、キャッシュプラグインのキャッシュとブラウザのキャッシュを削除した後テストしてください。

上記の方法は、煩わしく感じたり、コードを追加する方法が難しく感じられる場合 Ajax Cart AutoUpdate for WooCommerce のような無料のプラグインを使用すると、簡単です。

このプラグインは商品数量が変更されるとカートのページとミニカートを自動的に更新する軽いプラグだと紹介されていますね。 デフォルトの「カートを更新」ボタンが削除されます。 オプションでカートページのお知らせをオフにできます。

メモ:


コメントを残す

コメント