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

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

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

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

1. Добавляем обработчик на стороне клиента (JavaScript)

Создадим скрипт, который будет перехватывать клик по кнопке удаления и отправлять AJAX-запрос с ID товара в корзине.

jQuery(document).ready(function($) {
  $('.woocommerce-cart-form').on('click', '.remove-item-ajax', function(e) {
    e.preventDefault();
    var cart_item_key = $(this).data('cart_item_key');
    var nonce = $(this).data('nonce');

    $.ajax({
      url: wc_cart_params.ajax_url,
      type: 'POST',
      data: {
        action: 'custom_ajax_remove_cart_item',
        cart_item_key: cart_item_key,
        security: nonce
      },
      success: function(response) {
        if(response.success) {
          // Обновляем корзину без перезагрузки
          $('.woocommerce-cart-form').html(response.data.cart_html);
          $(document.body).trigger('updated_wc_div');
        } else {
          alert('Ошибка при удалении товара из корзины');
        }
      }
    });
  });
});

2. Добавляем серверный обработчик AJAX в functions.php

Обработчик удалит товар из корзины по ключу и вернёт обновлённый HTML корзины.

add_action('wp_ajax_custom_ajax_remove_cart_item', 'custom_ajax_remove_cart_item');
add_action('wp_ajax_nopriv_custom_ajax_remove_cart_item', 'custom_ajax_remove_cart_item');

function custom_ajax_remove_cart_item() {
  check_ajax_referer('custom-remove-cart-item', 'security');

  $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
  if(!$cart_item_key) {
    wp_send_json_error();
  }

  $removed = WC()->cart->remove_cart_item($cart_item_key);
  if(!$removed) {
    wp_send_json_error();
  }

  WC()->cart->calculate_totals();
  ob_start();
  wc_get_template('cart/cart.php');
  $cart_html = ob_get_clean();

  wp_send_json_success(['cart_html' => $cart_html]);
}

3. Добавляем кнопку удаления с нужными атрибутами в шаблон корзины

В файле cart/cart.php заменяем стандартную ссылку удаления на кнопку с классом remove-item-ajax и data-атрибутами.

<?php foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) : ?>
  <tr>
    <td>...
      <a href="#" class="remove-item-ajax" data-cart_item_key="<?php echo esc_attr($cart_item_key); ?>" data-nonce="<?php echo wp_create_nonce('custom-remove-cart-item'); ?>">×</a>
    </td>
  </tr>
<?php endforeach; ?>

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

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

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

• AJAX-запрос не срабатывает: проверьте, подключена ли библиотека jQuery и корректна ли переменная wc_cart_params.ajax_url.
• Товар не удаляется: убедитесь, что передаётся правильный cart_item_key и что nonce совпадает.
• Обновление корзины не происходит: убедитесь, что шаблон корзины выводится корректно, используйте wc_get_template('cart/cart.php') или аналогичный.
• Кнопка удаления не отображается: проверьте, что в шаблоне корзины добавлен нужный HTML и классы.

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

• Используйте nonce: для защиты AJAX-обработчиков от CSRF-атак обязательно проверяйте nonce через check_ajax_referer.
• Минимизируйте HTML-вывод: обновляйте только нужную часть страницы, чтобы не перегружать браузер.
• Кэширование: при использовании кэширующих плагинов отключите кэширование страницы корзины, чтобы AJAX-обновления работали корректно.
• Оптимизируйте скрипты: подключайте JS через wp_enqueue_script с зависимостью от jquery и локализуйте параметры через wp_localize_script для передачи ajax_url и nonce.

Чек-лист для внедрения AJAX удаления товара из корзины

1. Добавить на фронтенде кнопку удаления с data-атрибутами cart_item_key и nonce.
2. Написать JS-обработчик клика, отправляющий AJAX-запрос.
3. Создать PHP-функцию для обработки AJAX, удаляющую товар и возвращающую обновлённый HTML.
4. Подключить JS корректно через wp_enqueue_script и передать параметры через wp_localize_script.
5. Проверить работу на тестовом сайте без ошибок в консоли.