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

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

ワードプレスウコマース(WooCommerce)ショッピングモールでは、顧客が商品をショッピングカートに追加した後、ショッピングカートで数量を変更する場合は、「買い物かご更新」ボタンを押す必要がありカートの合計金額が更新されます。

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

ウコマースショッピングカートの自動更新

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

段階1:呉コマース "ショッピングカートの更新(Update Cart)」ボタンを非表示に

次のCSSコードを追加するようにします。 ワードプレスでは、カスタムCSSコードを追加する方法は、「ワードプレスでのCSSを追加する」を参照してください。

/* 우커머스 '장바구니 갱신' 버튼 숨기기 */
/* Hide WooCoommerce "Update Cart" button */

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

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

/* 아바다 테마에서 '장바구니 갱신' 버튼 숨기기 */
/* 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 のような無料のプラグインを使用すると、簡単です。

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

注:



コメントを残す