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

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

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

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

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

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

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

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

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

Графика, определяющая AJAX со стрелочной графикой и его полное название, Asynchronous Javascript and XML

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

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

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

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

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

Страница со списком товаров, отображающая несколько товаров с ценами и активными кнопками «Добавить в корзину» для улучшения функциональности AJAX

Самый быстрый путь, бесплатный плагин 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

Макет страницы продукта электронной коммерции с графикой футболки и логотипом WooCommerce

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 дочерней темы регистрируем и локализуем скрипт:

1 function 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 }
20 add_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 внутри неё:

1 jQuery(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 дочерней темы следом за первым блоком:

1 function 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 }
45 add_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-обработчики могут не подхватиться. В таких случаях надёжнее плагин.

1	function 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	}
20	add_action('wp_enqueue_scripts', 'sd_ajax_add_to_cart_script');

1	jQuery(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	});

1	function 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	}
45	add_action('wc_ajax_sd_ajax_add_to_cart', 'sd_ajax_add_to_cart_handler');