🛒 Ajax handlekurv i WooCommerce: 3 måter fra plugin til egendefinert kode

«Legg i handlekurv»-knappen i WooCommerce laster siden på nytt som standard ved hvert klikk. En kunde velger et produkt, klikker og venter. Ett og et halvt sekund, to, tre. På mobil, alle fem. Hvert slikt avbrudd kutter av en del av publikum: ifølge Baymard Institute ligger den gjennomsnittlige andelen forlatte handlekurver i netthandel rundt 70%, og en treg handlekurv er en av nøkkelfaktorene.

En AJAX-handlekurv fjerner sideinnlastingen. Produktet legges til umiddelbart, telleren i toppteksten oppdateres uten at siden blinker, og kunden forblir akkurat der de var. For en butikk er dette en direkte vei til konvertering: mindre friksjon, flere fullførte kjøp.

Du kan bygge en AJAX-handlekurv i WooCommerce på tre måter. Nedenfor gjennomgås hver av dem: fra å installere en utvidelse på ett minutt til tilpasset PHP- og JavaScript-kode.

💡 Rask oversikt:

• Metode 1: installer en gratis utvidelse, 2 klikk, fungerer for enkle og variable produkter
• Metode 2: innebygd WooCommerce-innstilling, kun arkivsider, ingen varianter
• Metode 3: PHP + JavaScript i et child theme, full kontroll, moderne wc-ajax-endepunkt

Hva en AJAX-handlekurv er og hvorfor butikken din trenger den

En vanlig WooCommerce-handlekurv fungerer slik: kunden klikker «Legg i handlekurv» → nettleseren sender skjemaet → serveren behandler det → siden lastes på nytt → kunden ser resultatet. En kjede på fire steg, og du kan miste en person ved hvert av dem.

En AJAX-handlekurv endrer mekanikken. Nettleseren sender en asynkron forespørsel til serveren, serveren returnerer JSON med oppdaterte handlekurvdata, og JavaScript oppdaterer telleren og minihandlekurven i sanntid. Siden blir stående. Kunden legger ikke engang merke til at noe skjedde: produktet er allerede i handlekurven.

Fra butikkens perspektiv er forskjellen merkbar. En Google-studie fra 2023 viste at hvert ekstra steg i kjøpstrakten reduserer konverteringen med 10-15%. Ved å fjerne sideinnlastingen fjerner du et steg. I tillegg reduseres serverbelastningen: i stedet for å rendre en hel side, serverer den lettvekts JSON.

Men det er en nyanse: WooCommerce ut av boksen aktiverer AJAX kun for butikk- og kategorisider. På enkeltproduktsiden og for variable produkter består sideinnlastingen. Det er akkurat det gapet vi lukker.

Metode 1: Ajax add to cart for WooCommerce-utvidelsen

Den raskeste veien, den gratis Ajax Add to Cart for WooCommerce-utvidelsen. Installeres på et minutt, krever ingen konfigurasjon, fungerer rett etter aktivering.

Utvidelsen håndterer AJAX-tillegging for enkle og variable produkter på alle sider: produkt, arkiv, kategori. Minihandlekurven oppdateres automatisk. Ifølge WordPress.org: 10 000+ aktive installasjoner, 4,7 av 5 i vurdering, kompatibilitet med WordPress 7.0+ og nyere WooCommerce-versjoner. Oppdateres jevnlig: den nyeste utgivelsen 2.6.5 kom i juni 2026.

Installasjon:

• Gå til WordPress admin → Utvidelser → Legg til ny
• Søk etter «Ajax add to cart for WooCommerce»
• Klikk «Installer», deretter «Aktiver»

Det er alt. Gå til en hvilken som helst produktside og klikk «Legg i handlekurv»: ingen sideinnlasting, produkt lagt til. Utvidelsen krever ingen ekstra innstillinger. Hvis du trenger å deaktivere AJAX for bestemte sider, har utvidelsesinnstillingene et tilsvarende filter.

Et alternativ, FunnelKit Cart (også gratis). I tillegg til en AJAX-handlekurv gir den et utskyvbart handlekurvpanel og mersalg inne i det. Den er litt tyngre, men for butikker som er fokusert på gjennomsnittlig ordreverdi, er det berettiget.

Metode 2: innebygd WooCommerce-innstilling

WooCommerce kan ha en AJAX-handlekurv ut av boksen, men med to begrensninger. Den fungerer kun på arkivsider (butikk, kategorier, stikkord) og støtter ikke variable produkter. For enkeltproduktsiden består sideinnlastingen.

Hvis butikken din kun selger enkle produkter og kundene legger dem i handlekurven fra butikkgulvet, er dette nok. Aktiveres med én avkrysningsboks:

• Admin → WooCommerce → Innstillinger → Produkter → Generelt
• I blokken «Legg i handlekurv-atferd», kryss av for «Aktiver AJAX legg i handlekurv-knapper på arkiver»
• Lagre

Ferdig. På butikksiden og kategorisidene fungerer «Legg i handlekurv»-knappen nå uten sideinnlasting. Men besøk en enkeltproduktside, og det er fortsatt det samme: en full sideinnlastingssyklus. For de fleste butikker er ikke dette nok, så la oss gå videre til den tredje metoden.

Metode 3: PHP og JavaScript i et child theme

Full kontroll over AJAX-handlekurven kommer fra tilpasset kode. Du bestemmer hvilke sider AJAX fungerer på, hvordan feil håndteres, og hva kunden ser etter å ha lagt til et produkt.

Vi skriver en handler på det moderne wc-ajax-endepunktet; det spiller fint sammen med caching-utvidelser (WP Rocket, LiteSpeed Cache ekskluderer ?wc-ajax= fra cachen som standard), i motsetning til gamle admin-ajax.php, som ofte oppfører seg uforutsigbart på cachedede nettsteder.

3.1 Child theme

Koden legges i et child theme: dette er en forsikring mot å miste endringer når parent theme oppdateres. Hvis du ikke har et child theme ennå, opprett ett eller bruk en utvidelse som Code Snippets; den lar deg legge til PHP-kode uten å redigere temafiler.

Hvorfor et child theme er obligatorisk: neste gang parent theme oppdateres, vil alle dine redigeringer i functions.php og JS-filer bli overskrevet. Et child theme lever separat og berøres ikke av oppdateringer.

3.2 Last inn JavaScript

I child themeets functions.php registrerer og lokaliserer vi skriptet:

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

Gjennomgang. wp_register_script registrerer vår fremtidige JS-fil med avhengigheter til jQuery og den innebygde wc-add-to-cart. wp_localize_script sender to nøkkelparametere til JavaScript: URL-en til wc-ajax-endepunktet og en nonce-nøkkel for CSRF-beskyttelse. En nonce er en kryptografisk signatur som serveren vil verifisere når den behandler forespørselen: uten den kunne et hvilket som helst eksternt nettsted tuklet med handlekurven din.

3.3 JavaScript-handler

Opprett en js-mappe i child theme-roten og en ajax-add-to-cart.js-fil inne i den:

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

Den viktigste forskjellen fra utdaterte veiledninger: vi bruker sdAjaxCart.wc_ajax_url (wc-ajax-endepunktet) i stedet for wc_add_to_cart_params.ajax_url (gamle admin-ajax.php). wc-ajax ekskluderes automatisk av caching-utvidelser og krever ikke en separat wp_ajax_nopriv_-hook; WooCommerce håndterer selv autentiserte og uautentiserte brukere.

3.4 PHP-handler

Legg til følgende i child themeets functions.php rett etter den første blokken:

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

Handleren gjør tre ting. Den sjekker noncen: hvis forespørselen kom fra et eksternt nettsted, returnerer den umiddelbart en 403. Den legger produktet i handlekurven via WC()->cart->add_to_cart(), standard WooCommerce-metoden som håndterer lagerbeholdning, varianter og validering på egen hånd. Den kaller WC_AJAX::get_refreshed_fragments(); denne metoden returnerer oppdaterte HTML-fragmenter av minihandlekurven, som vår JavaScript vil plukke opp.

Hooken wc_ajax_sd_ajax_add_to_cart er et wc-ajax-endepunkt som WooCommerce behandler utenom de fleste caching-utvidelser. Ingen wp_ajax_ / wp_ajax_nopriv_ nødvendig: wc-ajax vet selv om brukeren er logget inn eller ikke.

Vanlige feil ved implementering av en AJAX-handlekurv

En AJAX-handlekurv brekker forutsigbart; nesten alltid er tre ting skylden. Her er hva du bør sjekke først.

Konflikt med caching-utvidelser. Hvis minihandlekurven ikke oppdateres eller oppdateres med forsinkelse, cachet caching-utvidelsen AJAX-responsen. Løsning: bruk wc-ajax-endepunktet (det er ekskludert fra cachen automatisk) og sørg for at WP Rocket / LiteSpeed Cache ikke minifiserer handlekurvens innebygde JS. I cache-innstillingene, finn direktivet «Delay JavaScript» og legg til /wc-ajax= i ekskluderingene.

Temaet støtter ikke WooCommerce-fragmenter. Noen temaer tilpasser minihandlekurven slik at standard WooCommerce-selektorer slutter å fungere. Symptom: AJAX kjører, produktet er i handlekurven, men telleren i toppteksten oppdateres ikke. Fikses ved å erstatte selektorer via woocommerce_add_to_cart_fragments-filteret.

Mobilknappoppsett. På berøringsenheter utløses click-hendelsen annerledes enn på desktop, noen ganger med 300 ms forsinkelse eller dobbel utløsning. Hvis et produkt legges til to ganger på mobil, pakk handleren inn i en sjekk for $button.hasClass('disabled')-flagget, som i koden over.

⁉️🤔 Ofte stilte spørsmål

Fungerer AJAX-handlekurven med variable produkter?

Ja. Både Ajax Add to Cart for WooCommerce-utvidelsen og den tilpassede koden fra metode 3 håndterer variable produkter korrekt. Varianten sendes via variation_id i forespørselsbrødteksten, og WooCommerce vil erstatte riktig pris og attributter. Eneste forutsetning: alle påkrevde variantattributter må være valgt før du klikker på knappen.

Må jeg tømme cachen etter å ha aktivert AJAX-handlekurven?

Absolutt. Tøm nettstedscachen (caching-utvidelse → tøm alt), CDN-cachen hvis den brukes, og nettlesercachen. AJAX-responser kan bli cachet på den aller første forespørselen, og minihandlekurven vil slutte å oppdatere. På et produksjonsnettsted etter aktivering av AJAX, gå gjennom en full syklus: legg til et produkt → sjekk telleren → åpne handlekurven → sørg for at produktet er der.

Kan jeg bruke gamle admin-ajax.php i stedet for wc-ajax?

Teknisk sett, ja, men du bør ikke. admin-ajax.php krever to hooks (wp_ajax_ for autentiserte brukere og wp_ajax_nopriv_ for gjester), og caching-utvidelser blokkerer eller cacher ofte dette endepunktet. wc-ajax er den moderne WooCommerce-standarden; den er mer pålitelig og enklere å konfigurere. Hvis du porterer kode fra en gammel veiledning som bruker admin-ajax.php, erstatt den med wc-ajax.

Hva om handlekurvtelleren ikke oppdateres etter en AJAX-tillegging?

Mest sannsynlig bruker temaet ikke-standard minihandlekurv-markup. WooCommerce oppdaterer fragmenter via selektorer registrert av woocommerce_add_to_cart_fragments-filteret. Sjekk temaets functions.php for dette filteret og sammenlign selektorene med den faktiske minihandlekurv-markupen i nettleserinspektøren. Hvis selektorene ikke stemmer overens, fiks dem i filteret, så vil telleren fungere.

Oppsummering

En AJAX-handlekurv er ikke dekorasjon; det er en direkte konverteringsspak. Et minutt for å installere en utvidelse eller en time for tilpasset kode betaler seg gjennom lavere andel forlatte handlekurver og flere fullførte kjøp. Velg metoden som passer dine behov:

• Ingen tid og du trenger resultater nå: installer Ajax Add to Cart for WooCommerce, aktiver den og gå og test butikken din.
• Du selger kun enkle produkter fra butikkgulvet: aktiver den innebygde WooCommerce-innstillingen.
• Du trenger full kontroll og pålitelighet på et cachet nettsted: gå for metode 3 med wc-ajax-endepunktet og nonce-sjekk.

Hvis butikken din kjører på et blokktema eller bruker WooCommerce Blocks for produktsiden, sjekk kompatibilitet: blokker rendrer «Legg i handlekurv»-knappen via React, og standard jQuery-handlere fester seg kanskje ikke. I slike tilfeller er en utvidelse mer pålitelig.