Skip to content
🛒 Ajax-кошик у woocommerce: 3 способи від плагіна до кастомного коду
WooCommerceВеб-розробкаWordPress
7 хв1,379 слів

🛒 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 у дочірній темі

чорний ноутбук увімкнений на столі

Повний контроль над 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-обробники можуть не підхопитися. У таких випадках надійніше, плагін.

Редакція
РедакціяРедакційна команда→ Усі публікації

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