Skip to content
🛒 AJAX-корзина в WooCommerce: 3 способа от плагина до кастомного кода
WooCommerceВеб-разработкаWordPress
7 мин1,371 слов

🛒 AJAX-корзина в WooCommerce: 3 способа от плагина до кастомного кода

Кнопка «В корзину» в WooCommerce по умолчанию перезагружает страницу при каждом клике. Покупатель выбрал товар, нажал, и ждёт. Полторы секунды, две, три. На мобильном, все пять. Каждая такая задержка отсекает часть аудитории: по данным Baymard Institute, средний показатель брошенных корзин в e-commerce держится на уровне 70%, и медленная корзина, один из ключевых факторов.

AJAX-корзина убирает перезагрузку. Товар добавляется мгновенно, счётчик в хедере обновляется без моргания страницы, покупатель остаётся там же, где был. Для магазина это прямой путь к конверсии: меньше трений, больше завершённых покупок.

Сделать AJAX-корзину в WooCommerce можно тремя способами. Ниже, каждый из них: от установки плагина за минуту до кастомного кода на PHP и JavaScript.

💡 Быстрый обзор:

  • Способ 1: ставим бесплатный плагин, 2 клика, работает для простых и вариативных товаров
  • Способ 2: встроенная настройка WooCommerce, только для архивов, без вариаций
  • Способ 3: PHP + JavaScript в дочерней теме, полный контроль, современный wc-ajax-эндпоинт

Что такое AJAX-корзина и зачем она магазину

clipboard 2026 08 01T13 56 23

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

AJAX-корзина меняет механику. Браузер отправляет асинхронный запрос на сервер, сервер возвращает JSON с обновлёнными данными корзины, JavaScript обновляет счётчик и мини-корзину на лету. Страница остаётся на месте. Покупатель даже не замечает, что что-то произошло: товар уже в корзине.

С точки зрения магазина разница ощутимая. Исследование Google 2023 года показало: каждый лишний шаг в воронке покупки снижает конверсию на 10-15%. Убрав перезагрузку, вы убираете шаг. Плюс снижается нагрузка на сервер, вместо полного рендера страницы он отдаёт лёгкий JSON.

Но есть нюанс: WooCommerce из коробки включает AJAX только для страниц магазина и категорий. На странице конкретного товара и для вариативных продуктов перезагрузка остаётся. Именно эту дыру мы и закрываем.

Способ 1: плагин Ajax Add to Cart for WooCommerce

clipboard 2026 08 01T13 56 39

Самый быстрый путь, бесплатный плагин Ajax Add to Cart for WooCommerce. Ставится за минуту, не требует настройки, работает сразу после активации.

Плагин обрабатывает AJAX-добавление для простых и вариативных товаров на любых страницах: товар, архив, категория. Мини-корзина обновляется автоматически. По данным WordPress.org, 10 000+ активных установок, рейтинг 4.7 из 5, совместимость с WordPress 7.0+ и WooCommerce последних версий. Обновляется регулярно: последний релиз 2.6.5 вышел в июне 2026.

Установка:

  • Зайдите в админку WordPress → Плагины → Добавить новый
  • В поиске наберите «Ajax add to cart for WooCommerce»
  • Нажмите «Установить», затем «Активировать»

Всё. Идите на любую страницу товара и нажмите «В корзину», перезагрузки нет, товар добавлен. Никаких дополнительных настроек плагин не требует. Если нужно отключить AJAX для каких-то страниц, в настройках плагина есть соответствующий фильтр.

Альтернатива, FunnelKit Cart (тоже бесплатный). Кроме AJAX-корзины он даёт выезжающую боковую панель корзины и апсейлы внутри неё. Весит чуть больше, но для магазинов с фокусом на средний чек, оправдано.

Способ 2: встроенная настройка WooCommerce

clipboard 2026 07 31T19 38 09

WooCommerce умеет AJAX-корзину из коробки, но с двумя ограничениями. Работает только на страницах архива (магазин, категории, метки) и не поддерживает вариативные товары. Для страницы конкретного товара перезагрузка остаётся.

Если ваш магазин продаёт только простые товары и покупатели добавляют их в корзину с витрины, этого достаточно. Включается одной галочкой:

  • Админка → WooCommerce → Настройки → Товары → Общие
  • В блоке «Поведение кнопки добавления в корзину» отметьте «Включить кнопки добавления AJAX в корзину для архивов»
  • Сохраните

Готово. На странице магазина и категориях кнопка «В корзину» теперь работает без перезагрузки. Но зайдите на страницу конкретного товара, там всё по-прежнему, полный цикл перезагрузки. Для большинства магазинов этого маловато, поэтому переходим к третьему способу.

Способ 3: PHP и JavaScript в дочерней теме

black laptop computer turned on on table

Полный контроль над AJAX-корзиной даёт кастомный код. Вы сами решаете, на каких страницах работает AJAX, как обрабатываются ошибки и что показывается покупателю после добавления товара.

Мы напишем обработчик на современном эндпоинте wc-ajax, он дружит с кеширующими плагинами (WP Rocket, LiteSpeed Cache исключают ?wc-ajax= из кеша по умолчанию), в отличие от старого admin-ajax.php, который на кешированных сайтах часто ведёт себя непредсказуемо.

3.1 Дочерняя тема

Код пойдёт в дочернюю тему — это страховка от потери изменений при обновлении родительской. Если у вас ещё нет дочерней темы, создайте её или используйте плагин вроде Code Snippets, он позволяет добавлять PHP-код без правки файлов темы.

Почему дочерняя тема обязательна: при следующем обновлении родительской темы все ваши правки в functions.php и JS-файлах будут затёрты. Дочерняя тема живёт отдельно и не затрагивается обновлениями.

3.2 Подключаем JavaScript

В functions.php дочерней темы регистрируем и локализуем скрипт:

1function sd_ajax_add_to_cart_script() {
2    if (is_admin()) {
3        return;
4    }
5 
6    wp_register_script(
7        'sd-ajax-add-to-cart',
8        get_stylesheet_directory_uri() . '/js/ajax-add-to-cart.js',
9        array('jquery', 'wc-add-to-cart'),
10        '1.0',
11        true
12    );
13    wp_enqueue_script('sd-ajax-add-to-cart');
14 
15    wp_localize_script('sd-ajax-add-to-cart', 'sdAjaxCart', array(
16        'wc_ajax_url' => WC_AJAX::get_endpoint('sd_ajax_add_to_cart'),
17        'nonce'       => wp_create_nonce('sd_ajax_cart_nonce'),
18    ));
19}
20add_action('wp_enqueue_scripts', 'sd_ajax_add_to_cart_script');

Разбор. wp_register_script регистрирует наш будущий JS-файл с зависимостями от jQuery и встроенного wc-add-to-cart. wp_localize_script передаёт в JavaScript два ключевых параметра: URL эндпоинта wc-ajax и nonce-ключ для защиты от CSRF-атак. Nonce — это криптографическая подпись, которую сервер проверит при обработке запроса: без неё любой внешний сайт мог бы дёргать вашу корзину.

3.3 JavaScript-обработчик

Создайте папку js в корне дочерней темы и файл ajax-add-to-cart.js внутри неё:

1jQuery(function ($) {
2    $('form.cart').on('submit', function (e) {
3        var $form = $(this);
4        var $button = $form.find('.single_add_to_cart_button');
5 
6        if (!$button.length || $button.hasClass('disabled')) {
7            return;
8        }
9 
10        e.preventDefault();
11 
12        var data = {
13            product_id: $form.find('input[name=product_id]').val() || $button.val(),
14            quantity: $form.find('input[name=quantity]').val() || 1,
15            variation_id: $form.find('input[name=variation_id]').val() || 0,
16        };
17 
18        $button.removeClass('added').addClass('loading');
19 
20        $.ajax({
21            type: 'POST',
22            url: sdAjaxCart.wc_ajax_url,
23            data: $.param(data) + '&nonce=' + sdAjaxCart.nonce,
24            success: function (response) {
25                if (response && response.error) {
26                    window.location = response.product_url;
27                    return;
28                }
29                $(document.body).trigger('added_to_cart', [
30                    response.fragments,
31                    response.cart_hash,
32                    $button,
33                ]);
34            },
35            complete: function () {
36                $button.addClass('added').removeClass('loading');
37            },
38        });
39    });
40});

Ключевое отличие от устаревших туториалов, мы используем sdAjaxCart.wc_ajax_url (эндпоинт wc-ajax) вместо wc_add_to_cart_params.ajax_url (старый admin-ajax.php). wc-ajax автоматически исключается плагинами кеширования и не требует отдельного wp_ajax_nopriv_-хука, WooCommerce сам разруливает авторизованных и неавторизованных пользователей.

3.4 PHP-обработчик

Добавьте в functions.php дочерней темы следом за первым блоком:

1function sd_ajax_add_to_cart_handler() {
2    if (!wp_verify_nonce($_POST['nonce'], 'sd_ajax_cart_nonce')) {
3        wp_send_json_error(array('message' => 'Security error'), 403);
4    }
5 
6    $product_id = apply_filters(
7        'sd_ajax_add_to_cart_product_id',
8        absint($_POST['product_id'])
9    );
10    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
11    $variation_id = absint($_POST['variation_id']);
12 
13    $passed = apply_filters(
14        'sd_ajax_add_to_cart_validation',
15        true,
16        $product_id,
17        $quantity
18    );
19 
20    $product_status = get_post_status($product_id);
21 
22    if ($passed && 'publish' === $product_status
23        && WC()->cart->add_to_cart($product_id, $quantity, $variation_id)
24    ) {
25        do_action('sd_ajax_added_to_cart', $product_id);
26 
27        if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {
28            wc_add_to_cart_message(array($product_id => $quantity), true);
29        }
30 
31        WC_AJAX::get_refreshed_fragments();
32    } else {
33        wp_send_json(array(
34            'error'       => true,
35            'product_url' => apply_filters(
36                'sd_ajax_cart_redirect_after_error',
37                get_permalink($product_id),
38                $product_id
39            ),
40        ));
41    }
42 
43    wp_die();
44}
45add_action('wc_ajax_sd_ajax_add_to_cart', 'sd_ajax_add_to_cart_handler');

Обработчик делает три вещи. Проверяет nonce, если запрос пришёл с чужого сайта, сразу отдаёт 403. Добавляет товар в корзину через WC()->cart->add_to_cart(), стандартный метод WooCommerce, который сам разрулит остатки, вариации и валидацию. Вызывает WC_AJAX::get_refreshed_fragments(), этот метод отдаёт обновлённые HTML-фрагменты мини-корзины, которые подхватит наш JavaScript.

Хук wc_ajax_sd_ajax_add_to_cart — это эндпоинт wc-ajax, который WooCommerce обрабатывает в обход большинства кеширующих плагинов. Никаких wp_ajax_ / wp_ajax_nopriv_ не нужно: wc-ajax сам знает, залогинен пользователь или нет.

Типичные ошибки при внедрении AJAX-корзины

AJAX-корзина ломается предсказуемо, почти всегда виноваты три вещи. Вот что проверять в первую очередь.

Конфликт с плагинами кеширования. Если мини-корзина не обновляется или обновляется с задержкой, кеш-плагин закешировал AJAX-ответ. Решение: используйте wc-ajax-эндпоинт (он исключается из кеша автоматически) и убедитесь, что WP Rocket / LiteSpeed Cache не сжимают inline JS корзины. В настройках кеша найдите директиву «Delay JavaScript» и добавьте /wc-ajax= в исключения.

Тема не поддерживает WooCommerce-фрагменты. Некоторые темы кастомизируют мини-корзину так, что стандартные селекторы WooCommerce перестают работать. Симптом: AJAX отрабатывает, товар в корзине есть, но счётчик в хедере не обновляется. Лечится заменой селекторов через фильтр woocommerce_add_to_cart_fragments.

Мобильная вёрстка кнопки. На тач-устройствах событие click срабатывает иначе, чем на десктопе, иногда с задержкой 300 мс или двойным срабатыванием. Если на мобильном товар добавляется дважды, оберните обработчик в проверку флага $button.hasClass('disabled'), как в коде выше.

⁉️🤔 Частые вопросы

Работает ли AJAX-корзина с вариативными товарами?

Да. И плагин Ajax Add to Cart for WooCommerce, и кастомный код из способа 3 обрабатывают вариативные товары корректно. Вариация передаётся через variation_id в теле запроса, WooCommerce сам подставит нужную цену и атрибуты. Единственное условие, все обязательные атрибуты вариации должны быть выбраны до нажатия кнопки.

Нужно ли чистить кеш после включения AJAX-корзины?

Обязательно. Сбросьте кеш сайта (плагин кеширования → очистить всё), кеш CDN если используется, и кеш браузера. AJAX-ответы могут закешироваться в первый же запрос, и мини-корзина перестанет обновляться. На production-сайте после включения AJAX пройдите полный цикл: добавить товар → проверить счётчик → открыть корзину → убедиться что товар там.

Можно ли использовать старый admin-ajax.php вместо wc-ajax?

Технически, да, но не стоит. admin-ajax.php требует двух хуков (wp_ajax_ для авторизованных и wp_ajax_nopriv_ для гостей), и плагины кеширования часто блокируют или кешируют этот эндпоинт. wc-ajax, современный стандарт WooCommerce, он надёжнее и проще в настройке. Если вы переносите код из старого туториала, где используется admin-ajax.php, замените на wc-ajax.

Что делать, если после AJAX-добавления счётчик корзины не обновляется?

Скорее всего, тема использует нестандартную разметку мини-корзины. WooCommerce обновляет фрагменты через селекторы, зарегистрированные фильтром woocommerce_add_to_cart_fragments. Проверьте functions.php темы на наличие этого фильтра и сравните селекторы с фактической разметкой мини-корзины в инспекторе браузера. Если селекторы не совпадают, поправьте их в фильтре, и счётчик заработает.

Итоги

AJAX-корзина, не украшение, а прямой рычаг конверсии. Минута на установку плагина или час на кастомный код окупаются снижением брошенных корзин и ростом завершённых покупок. Выберите способ под свои задачи:

  • Нет времени и нужен результат прямо сейчас, ставьте Ajax Add to Cart for WooCommerce, активируйте и идите тестировать магазин.
  • Продаёте только простые товары с витрины, включите встроенную настройку WooCommerce.
  • Нужен полный контроль и надёжность на кешированном сайте, берите способ 3 с wc-ajax-эндпоинтом и nonce-проверкой.

Если магазин работает на блоковой теме или использует WooCommerce Blocks для страницы товара, проверьте совместимость: блоки рендерят кнопку «В корзину» через React, и стандартные jQuery-обработчики могут не подхватиться. В таких случаях надёжнее плагин.

Редакция
РедакцияРедакционная команда→ Все публикации

Профессиональная команда авторов и редакторов, специализирующихся на создании качественного контента.