WooCommerce: как установить обновление количества товаров в корзине без перезагрузки страницы

Диагностика проблемы: почему количество товаров в корзине не обновляется динамически

В стандартной установке WooCommerce при изменении количества товара в корзине на странице оформления заказа или корзины пользователь вынужден нажимать кнопку «Обновить корзину» или страница перезагружается автоматически для пересчёта итогов. Это снижает удобство использования, особенно на мобильных устройствах.

Основная причина — отсутствие AJAX-обработчика для изменения количества товаров, из-за чего изменения не отправляются на сервер без перезагрузки.

Пошаговое решение: как внедрить обновление количества товаров в корзине через AJAX

1. Подключение JavaScript для отслеживания изменения количества

В файле functions.php вашей дочерней темы или в кастомном плагине добавьте регистрацию скрипта и передачу локализации:

function wpabout_enqueue_ajax_cart_update_script() {
    if (is_cart()) {
        wp_enqueue_script('wpabout-ajax-cart', get_stylesheet_directory_uri() . '/js/ajax-cart-update.js', array('jquery'), '1.0', true);
        wp_localize_script('wpabout-ajax-cart', 'wpabout_ajax', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('wpabout_ajax_nonce')
        ));
    }
}
add_action('wp_enqueue_scripts', 'wpabout_enqueue_ajax_cart_update_script');

2. Создание JavaScript для отправки AJAX-запроса при изменении количества

Создайте файл ajax-cart-update.js в папке вашей темы (js/ajax-cart-update.js) со следующим содержимым:

jQuery(document).ready(function($) {
    $('form.woocommerce-cart-form').on('change', 'input.qty', function() {
        var $input = $(this);
        var cart_item_key = $input.closest('tr.cart_item').attr('data-cart_item_key');
        var quantity = $input.val();

        $.ajax({
            url: wpabout_ajax.ajax_url,
            type: 'POST',
            data: {
                action: 'wpabout_update_cart_quantity',
                cart_item_key: cart_item_key,
                quantity: quantity,
                nonce: wpabout_ajax.nonce
            },
            success: function(response) {
                if (response.success) {
                    // Обновляем фрагменты корзины
                    if (response.data.fragments) {
                        $.each(response.data.fragments, function(key, value) {
                            $(key).replaceWith(value);
                        });
                    }
                } else {
                    alert('Ошибка обновления корзины');
                }
            }
        });
    });
});

3. Обработка AJAX-запроса на сервере

Добавьте в functions.php следующий обработчик:

function wpabout_update_cart_quantity() {
    check_ajax_referer('wpabout_ajax_nonce', 'nonce');

    $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
    $quantity = intval($_POST['quantity']);

    if ($quantity <= 0) {
        WC()->cart->remove_cart_item($cart_item_key);
    } else {
        WC()->cart->set_quantity($cart_item_key, $quantity, true);
    }

    WC()->cart->calculate_totals();

    // Обновление мини-корзины и других фрагментов
    ob_start();
    woocommerce_mini_cart();
    $mini_cart = ob_get_clean();

    ob_start();
    woocommerce_cart_totals();
    $cart_totals = ob_get_clean();

    wp_send_json_success(array(
        'fragments' => array(
            '.widget_shopping_cart_content' => $mini_cart,
            '.cart_totals' => $cart_totals
        )
    ));
}
add_action('wp_ajax_wpabout_update_cart_quantity', 'wpabout_update_cart_quantity');
add_action('wp_ajax_nopriv_wpabout_update_cart_quantity', 'wpabout_update_cart_quantity');

Проверка результата после внедрения

• Перейдите на страницу корзины WooCommerce.
• Измените значение в поле количества товара.
• Проверьте, что итоговая сумма и мини-корзина обновились без перезагрузки страницы.
• Просмотрите консоль браузера — ошибок JavaScript и AJAX-запросов быть не должно.

Частые ошибки и как их исправить

• AJAX-запрос не срабатывает или возвращает ошибку 400/500. Проверьте правильность nonce и наличие обработчика в functions.php. Убедитесь, что admin-ajax.php доступен.
• Не обновляются фрагменты корзины. Убедитесь, что классы .widget_shopping_cart_content и .cart_totals присутствуют в вашей теме и соответствуют селекторам в JS.
• Количество не изменяется или удаление товара не происходит. Проверьте, что cart_item_key корректно получен из атрибута data-cart_item_key в строке товара.

Практические советы по безопасности и производительности

• Обязательно используйте check_ajax_referer для защиты от CSRF.
• Минимизируйте количество обновляемых фрагментов — обновляйте только необходимые части DOM.
• При большом количестве товаров в корзине учитывайте возможность оптимизации AJAX-запросов и кеширования.
• Если в теме используются кастомные шаблоны корзины, адаптируйте селекторы под них.

Сравнение решений обновления количества в корзине WooCommerce