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

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

По умолчанию WooCommerce при изменении количества товара в корзине требует обновить страницу, чтобы изменения вступили в силу. Это неудобно для пользователей и снижает конверсию. Современные интернет-магазины стремятся сделать процесс изменения количества товара максимально плавным, используя AJAX-запросы для обновления корзины без перезагрузки.

Если на вашем сайте изменение количества товара приводит к полной перезагрузке страницы, значит стандартный функционал AJAX обновления корзины не работает или не реализован.

Как проверить, что AJAX обновление корзины отсутствует

• Откройте страницу корзины в браузере.
• Измените количество товара в поле «Количество».
• Если после изменения количество автоматически не обновилось, а при нажатии кнопки «Обновить корзину» происходит полная перезагрузка страницы — AJAX не работает.
• Проверьте консоль браузера (F12) на наличие JavaScript ошибок — они могут блокировать AJAX.

Пошаговое решение: внедрение AJAX изменения количества товаров в корзине WooCommerce

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

1. Добавить JavaScript, который будет ловить изменение количества и отправлять AJAX-запрос.
2. Обработать AJAX-запрос на стороне сервера, обновив количество в корзине.
3. Обновить разметку корзины на странице с новыми данными.

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

jQuery(function($){
  $('form.woocommerce-cart-form').on('change', 'input.qty', function(){
    var form = $(this).closest('form');
    var data = form.serialize();
    $.ajax({
      url: wc_cart_params.ajax_url,
      type: 'POST',
      data: data + '&action=update_cart_quantity',
      success: function(response){
        if(response.fragments){
          $.each(response.fragments, function(key, value) {
            $(key).replaceWith(value);
          });
        }
      },
      error: function(){
        console.log('Ошибка обновления корзины');
      }
    });
  });
});

Этот скрипт добавляет обработчик на изменения в полях количества товаров и отправляет данные формы на сервер через AJAX.

2. Обработка AJAX-запроса в functions.php темы или плагине

add_action('wp_ajax_update_cart_quantity', 'custom_update_cart_quantity');
add_action('wp_ajax_nopriv_update_cart_quantity', 'custom_update_cart_quantity');

function custom_update_cart_quantity() {
  if ( ! isset($_POST['cart']) || ! is_array($_POST['cart']) ) {
    wp_send_json_error();
  }

  foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
    if ( isset($_POST['cart'][$cart_item_key]['qty']) ) {
      $qty = intval($_POST['cart'][$cart_item_key]['qty']);
      WC()->cart->set_quantity( $cart_item_key, $qty, false );
    }
  }

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

  ob_start();
  woocommerce_mini_cart();
  $mini_cart = ob_get_clean();

  // Обновляем фрагменты корзины
  $data = array(
    'fragments' => apply_filters('woocommerce_add_to_cart_fragments', array(
      'div.widget_shopping_cart_content' => '<div class="widget_shopping_cart_content">' . $mini_cart . '</div>',
      'form.woocommerce-cart-form' => wc_get_template_html('cart/cart.php')
    )),
    'cart_hash' => WC()->cart->get_cart_hash()
  );

  wp_send_json_success( $data );
}

Этот обработчик принимает данные с формы, устанавливает новое количество для каждого товара, пересчитывает корзину и возвращает обновлённые фрагменты HTML для замены на странице.

3. Подключение скрипта и локализация параметров

function enqueue_custom_cart_script() {
  if ( is_cart() ) {
    wp_enqueue_script('custom-cart-ajax', get_stylesheet_directory_uri() . '/js/custom-cart-ajax.js', array('jquery'), null, true);
    wp_localize_script('custom-cart-ajax', 'wc_cart_params', array(
      'ajax_url' => admin_url('admin-ajax.php')
    ));
  }
}
add_action('wp_enqueue_scripts', 'enqueue_custom_cart_script');

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

• Перейдите на страницу корзины.
• Измените количество товара в поле «Количество».
• Убедитесь, что данные обновились без перезагрузки страницы — цена, общая сумма и содержимое корзины обновились.
• Обратите внимание на консоль — ошибок JavaScript быть не должно.
• Проверьте, что мини-корзина (если есть) также обновляется автоматически.

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

• AJAX-запрос не отправляется: Возможно, не подключен jQuery или скрипт не загружен на странице корзины. Проверьте загрузку скриптов через инструменты разработчика.
• PHP-ошибки при обработке AJAX: Убедитесь, что массив $_POST['cart'] передаётся корректно. В форме корзины должны быть правильно сформированы поля с количеством.
• Фрагменты корзины не обновляются: Проверьте, что функция woocommerce_add_to_cart_fragments возвращает корректные фрагменты. Если используете кастомные темы — возможно, шаблоны корзины отличаются.
• Обновление корзины происходит, но цены не меняются: Убедитесь, что вызывается WC()->cart->calculate_totals(); после изменения количества.

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

• Используйте проверку nonce в AJAX-запросах для защиты от CSRF (Cross-Site Request Forgery). В приведённом примере nonce не показан, но рекомендуется добавить.
• Минимизируйте количество возвращаемых данных — обновляйте только необходимые части страницы.
• Обрабатывайте возможные ошибки на клиенте, чтобы информировать пользователя без перезагрузки.
• Тестируйте совместимость с другими плагинами и темой, чтобы избежать конфликтов JavaScript.
• При больших корзинах подумайте о дебаунсе событий изменения количества, чтобы не отправлять слишком много запросов подряд.

Сравнение подходов: плагин vs собственный код