🛒 Koszyk AJAX w WooCommerce: 3 sposoby od wtyczki po własny kod

Przycisk „Dodaj do koszyka" w WooCommerce domyślnie przeładowuje stronę przy każdym kliknięciu. Klient wybrał produkt, kliknął i czeka. Półtorej sekundy, dwie, trzy. Na urządzeniu mobilnym wszystkie pięć. Każde takie opóźnienie odcina część odbiorców: według danych Baymard Institute średni wskaźnik porzuconych koszyków w e-commerce utrzymuje się na poziomie 70%, a wolny koszyk jest jednym z kluczowych czynników.

Koszyk AJAX eliminuje przeładowanie. Produkt dodaje się natychmiast, licznik w nagłówku aktualizuje się bez mrugnięcia strony, klient pozostaje tam, gdzie był. Dla sklepu to prosta droga do konwersji: mniej tarcia, więcej sfinalizowanych zakupów.

Koszyk AJAX w WooCommerce można wdrożyć na trzy sposoby. Poniżej omawiamy każdy z nich: od instalacji wtyczki w minutę po niestandardowy kod w PHP i JavaScript.

💡 Szybki przegląd:

• Sposób 1: instalujemy bezpłatną wtyczkę, 2 kliknięcia, działa dla produktów prostych i wariantowych
• Sposób 2: wbudowane ustawienie WooCommerce, tylko dla archiwów, bez wariantów
• Sposób 3: PHP + JavaScript w motywie potomnym, pełna kontrola, nowoczesny endpoint wc-ajax

Czym jest koszyk AJAX i dlaczego jest potrzebny sklepowi

Zwykły koszyk WooCommerce działa tak: klient klika „Dodaj do koszyka" → przeglądarka wysyła formularz → serwer przetwarza → strona się przeładowuje → klient widzi wynik. Łańcuch czterech kroków, na każdym z nich można stracić klienta.

Koszyk AJAX zmienia mechanikę. Przeglądarka wysyła asynchroniczne żądanie do serwera, serwer zwraca JSON z zaktualizowanymi danymi koszyka, JavaScript aktualizuje licznik i mini-koszyk w locie. Strona pozostaje na swoim miejscu. Klient nawet nie zauważa, że coś się stało: produkt jest już w koszyku.

Z perspektywy sklepu różnica jest odczuwalna. Badanie Google z 2023 roku wykazało: każdy dodatkowy krok w lejku zakupowym obniża konwersję o 10-15%. Eliminując przeładowanie, eliminują Państwo krok. Dodatkowo zmniejsza się obciążenie serwera: zamiast pełnego renderowania strony odsyła on lekki JSON.

Jest jednak pewien niuans: WooCommerce od razu po instalacji włącza AJAX tylko dla stron sklepu i kategorii. Na stronie konkretnego produktu oraz dla produktów wariantowych przeładowanie pozostaje. Właśnie tę lukę zamykamy.

Sposób 1: wtyczka Ajax Add to Cart for WooCommerce

Najszybsza ścieżka, bezpłatna wtyczka Ajax Add to Cart for WooCommerce. Instaluje się w minutę, nie wymaga konfiguracji, działa natychmiast po aktywacji.

Wtyczka obsługuje dodawanie AJAX dla produktów prostych i wariantowych na dowolnych stronach: produktu, archiwum, kategorii. Mini-koszyk aktualizuje się automatycznie. Według danych WordPress.org ma 10 000+ aktywnych instalacji, ocenę 4.7 na 5, zgodność z WordPress 7.0+ i najnowszymi wersjami WooCommerce. Aktualizowana regularnie: ostatnie wydanie 2.6.5 ukazało się w czerwcu 2026.

Instalacja:

• Proszę wejść do panelu administracyjnego WordPress → Wtyczki → Dodaj nową
• W wyszukiwaniu proszę wpisać „Ajax add to cart for WooCommerce"
• Proszę kliknąć „Zainstaluj", a następnie „Aktywuj"

To wszystko. Proszę przejść na dowolną stronę produktu i kliknąć „Dodaj do koszyka", nie ma przeładowania, produkt został dodany. Wtyczka nie wymaga żadnych dodatkowych ustawień. Jeśli trzeba wyłączyć AJAX dla niektórych stron, w ustawieniach wtyczki jest odpowiedni filtr.

Alternatywa, FunnelKit Cart (również bezpłatny). Oprócz koszyka AJAX oferuje wysuwany panel boczny koszyka i upselle wewnątrz niego. Waży nieco więcej, ale dla sklepów skoncentrowanych na średniej wartości koszyka jest to uzasadnione.

Sposób 2: wbudowane ustawienie WooCommerce

WooCommerce potrafi obsługiwać koszyk AJAX od razu po instalacji, ale z dwoma ograniczeniami. Działa tylko na stronach archiwum (sklep, kategorie, tagi) i nie obsługuje produktów wariantowych. Dla strony konkretnego produktu przeładowanie pozostaje.

Jeśli Państwa sklep sprzedaje tylko produkty proste, a klienci dodają je do koszyka z witryny sklepowej, to wystarczy. Włącza się to jednym zaznaczeniem:

• Panel administracyjny → WooCommerce → Ustawienia → Produkty → Ogólne
• W bloku „Zachowanie przycisku dodawania do koszyka" proszę zaznaczyć „Włącz przyciski dodawania AJAX do koszyka dla archiwów"
• Proszę zapisać

Gotowe. Na stronie sklepu i kategoriach przycisk „Dodaj do koszyka" działa teraz bez przeładowania. Proszę jednak wejść na stronę konkretnego produktu, tam wszystko po staremu, pełny cykl przeładowania. Dla większości sklepów to za mało, dlatego przechodzimy do trzeciego sposobu.

Sposób 3: PHP i JavaScript w motywie potomnym

Pełną kontrolę nad koszykiem AJAX daje niestandardowy kod. Sami decydują Państwo, na których stronach działa AJAX, jak obsługiwane są błędy i co pokazuje się klientowi po dodaniu produktu.

Napiszemy handler na nowoczesnym endpointcie wc-ajax, który współpracuje z wtyczkami buforującymi (WP Rocket, LiteSpeed Cache domyślnie wykluczają ?wc-ajax= z cache), w przeciwieństwie do starego admin-ajax.php, który na buforowanych stronach często zachowuje się nieprzewidywalnie.

3.1 Motyw potomny

Kod trafi do motywu potomnego, to zabezpieczenie przed utratą zmian podczas aktualizacji motywu nadrzędnego. Jeśli nie mają Państwo jeszcze motywu potomnego, proszę go utworzyć lub użyć wtyczki takiej jak Code Snippets, która pozwala dodawać kod PHP bez edycji plików motywu.

Dlaczego motyw potomny jest obowiązkowy: przy następnej aktualizacji motywu nadrzędnego wszystkie Państwa zmiany w functions.php i plikach JS zostaną nadpisane. Motyw potomny żyje osobno i nie jest ruszany przez aktualizacje.

3.2 Podłączamy JavaScript

W functions.php motywu potomnego rejestrujemy i lokalizujemy skrypt:

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');

Omówienie. wp_register_script rejestruje nasz przyszły plik JS z zależnościami od jQuery i wbudowanego wc-add-to-cart. wp_localize_script przekazuje do JavaScript dwa kluczowe parametry: URL endpointu wc-ajax i klucz nonce do ochrony przed atakami CSRF. Nonce to kryptograficzny podpis, który serwer sprawdzi podczas przetwarzania żądania: bez niego dowolna zewnętrzna strona mogłaby manipulować Państwa koszykiem.

3.3 Handler JavaScript

Proszę utworzyć folder js w katalogu głównym motywu potomnego i plik ajax-add-to-cart.js wewnątrz niego:

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
});

Kluczowa różnica w stosunku do przestarzałych poradników: używamy sdAjaxCart.wc_ajax_url (endpoint wc-ajax) zamiast wc_add_to_cart_params.ajax_url (stary admin-ajax.php). wc-ajax jest automatycznie wykluczany przez wtyczki buforujące i nie wymaga osobnego haka wp_ajax_nopriv_, WooCommerce sam obsługuje zalogowanych i niezalogowanych użytkowników.

3.4 Handler PHP

Proszę dodać w functions.php motywu potomnego po pierwszym bloku:

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');

Handler robi trzy rzeczy. Sprawdza nonce: jeśli żądanie przyszło z obcej strony, natychmiast zwraca 403. Dodaje produkt do koszyka przez WC()->cart->add_to_cart(), standardową metodę WooCommerce, która sama obsłuży stany magazynowe, warianty i walidację. Wywołuje WC_AJAX::get_refreshed_fragments(), ta metoda zwraca zaktualizowane fragmenty HTML mini-koszyka, które przechwyci nasz JavaScript.

Hak wc_ajax_sd_ajax_add_to_cart to endpoint wc-ajax, który WooCommerce przetwarza z pominięciem większości wtyczek buforujących. Żadne wp_ajax_ / wp_ajax_nopriv_ nie są potrzebne: wc-ajax sam wie, czy użytkownik jest zalogowany, czy nie.

Typowe błędy przy wdrażaniu koszyka AJAX

Koszyk AJAX psuje się przewidywalnie, prawie zawsze winne są trzy rzeczy. Oto co sprawdzać w pierwszej kolejności.

Konflikt z wtyczkami buforującymi. Jeśli mini-koszyk nie aktualizuje się lub aktualizuje się z opóźnieniem, wtyczka buforująca zbuforowała odpowiedź AJAX. Rozwiązanie: proszę używać endpointu wc-ajax (jest on wykluczany z cache automatycznie) i upewnić się, że WP Rocket / LiteSpeed Cache nie kompresują inline JS koszyka. W ustawieniach cache proszę znaleźć dyrektywę „Delay JavaScript" i dodać /wc-ajax= do wyjątków.

Motyw nie obsługuje fragmentów WooCommerce. Niektóre motywy dostosowują mini-koszyk tak, że standardowe selektory WooCommerce przestają działać. Symptom: AJAX działa, produkt jest w koszyku, ale licznik w nagłówku nie aktualizuje się. Leczenie polega na zastąpieniu selektorów przez filtr woocommerce_add_to_cart_fragments.

Mobilny układ przycisku. Na urządzeniach dotykowych zdarzenie click działa inaczej niż na desktopie, czasem z opóźnieniem 300 ms lub podwójnym wyzwoleniem. Jeśli na urządzeniu mobilnym produkt dodaje się dwukrotnie, proszę opakować handler w sprawdzenie flagi $button.hasClass('disabled'), jak w kodzie powyżej.

⁉️🤔 Często zadawane pytania

Czy koszyk AJAX działa z produktami wariantowymi?

Tak. Zarówno wtyczka Ajax Add to Cart for WooCommerce, jak i niestandardowy kod ze sposobu 3 obsługują produkty wariantowe poprawnie. Wariant jest przekazywany przez variation_id w treści żądania, WooCommerce sam podstawi odpowiednią cenę i atrybuty. Jedyny warunek: wszystkie obowiązkowe atrybuty wariantu muszą być wybrane przed kliknięciem przycisku.

Czy trzeba czyścić cache po włączeniu koszyka AJAX?

Obowiązkowo. Proszę wyczyścić cache strony (wtyczka buforująca → wyczyść wszystko), cache CDN, jeśli jest używany, i cache przeglądarki. Odpowiedzi AJAX mogą zostać zbuforowane już przy pierwszym żądaniu i mini-koszyk przestanie się aktualizować. Na stronie produkcyjnej po włączeniu AJAX proszę przejść pełny cykl: dodać produkt → sprawdzić licznik → otworzyć koszyk → upewnić się, że produkt tam jest.

Czy można używać starego admin-ajax.php zamiast wc-ajax?

Technicznie tak, ale nie warto. admin-ajax.php wymaga dwóch haków (wp_ajax_ dla zalogowanych i wp_ajax_nopriv_ dla gości), a wtyczki buforujące często blokują lub buforują ten endpoint. wc-ajax to nowoczesny standard WooCommerce, jest bardziej niezawodny i prostszy w konfiguracji. Jeśli przenoszą Państwo kod ze starego poradnika, gdzie używany jest admin-ajax.php, proszę zastąpić go przez wc-ajax.

Co zrobić, jeśli po dodaniu AJAX licznik koszyka nie aktualizuje się?

Najprawdopodobniej motyw używa niestandardowego znacznika mini-koszyka. WooCommerce aktualizuje fragmenty przez selektory zarejestrowane filtrem woocommerce_add_to_cart_fragments. Proszę sprawdzić functions.php motywu pod kątem obecności tego filtra i porównać selektory z faktycznym znacznikiem mini-koszyka w inspektorze przeglądarki. Jeśli selektory nie pasują, proszę je poprawić w filtrze, a licznik zacznie działać.

Podsumowanie

Koszyk AJAX to nie ozdobnik, a bezpośrednia dźwignia konwersji. Minuta na instalację wtyczki lub godzina na niestandardowy kod zwracają się spadkiem liczby porzuconych koszyków i wzrostem sfinalizowanych zakupów. Proszę wybrać sposób odpowiedni do swoich zadań:

• Nie mają Państwo czasu i potrzebują rezultatu od zaraz, proszę zainstalować Ajax Add to Cart for WooCommerce, aktywować i iść testować sklep.
• Sprzedają Państwo tylko produkty proste z witryny sklepowej, proszę włączyć wbudowane ustawienie WooCommerce.
• Potrzebują Państwo pełnej kontroli i niezawodności na buforowanej stronie, proszę wybrać sposób 3 z endpointem wc-ajax i weryfikacją nonce.

Jeśli sklep działa na motywie blokowym lub używa WooCommerce Blocks dla strony produktu, proszę sprawdzić zgodność: bloki renderują przycisk „Dodaj do koszyka" przez React i standardowe handlery jQuery mogą nie zadziałać. W takich przypadkach bezpieczniejsza jest wtyczka.