WooCommerce 購物車數量自動更新與刷新

我不知道為何沒內建但它真的很重要

在 WooCommerce 的網路商店中，提供顧客流暢的購物體驗是非常重要的。其中一個常見的需求是，在購物車頁面上當顧客變更產品數量時，自動更新並刷新購物車，這可以使購物過程更加便捷和直觀。一般情況下，WooCommerce 購物車頁面在數量調整後需要手動點擊「更新購物車」按鈕來刷新頁面和價格。然而，通過一段簡單的 JavaScript 程式碼，我們可以使這個過程自動化，從而提供更佳的使用者體驗。

程式碼範例

function cart_update_qty_script() {
    if (is_cart()) :
    ?>
        <script>
            jQuery(document).ready(function($) {
                $('div.woocommerce').on('change', '.qty', function() {
                    $("[name='update_cart']").removeAttr('disabled');
                    $("[name='update_cart']").trigger("click");
                });
            });
        </script>
    <?php
    endif;
}
add_action('wp_footer', 'cart_update_qty_script');

運作原理

這段程式碼的工作原理是，當在購物車頁面上數量欄位發生變更時，會自動觸發「更新購物車」按鈕的點擊事件。這是通過使用 jQuery 監聽 .qty 欄位上的 change 事件來實現的。一旦這個事件被觸發，程式碼就會模擬點擊更新按鈕，從而刷新購物車並更新總價。

要將這段程式碼應用到您的 WooCommerce 商店中，只需將它添加到您的主題的 functions.php 檔案中或是 Code Snippet 這之類的外掛中。一旦添加，您的顧客將能享受到更加順暢的購物體驗，無需手動點擊更新購物車即可看到數量和價格的即時變化。

這種小巧但有效的改進可以大大提升顧客滿意度並增加交易的成功率。尤其在移動裝置上，減少額外的點擊對於創造友好的使用者體驗尤為重要。