Skip to content
🛒 Ajax-kundvagn i WooCommerce: 3 sätt från plugin till anpassad kod
WooCommerceWebbutvecklingWordPress
8 min1,536 ord

🛒 Ajax-kundvagn i WooCommerce: 3 sätt från plugin till anpassad kod

"Lägg i varukorg"-knappen i WooCommerce laddar om sidan som standard vid varje klick. En kund väljer en produkt, klickar och väntar. En och en halv sekund, två, tre. På mobil, alla fem. Varje sådan fördröjning skär bort en del av publiken: enligt Baymard Institute ligger den genomsnittliga andelen övergivna varukorgar inom e-handel runt 70%, och en långsam varukorg är en av nyckelfaktorerna.

En AJAX-varukorg eliminerar omladdningen. Produkten läggs till direkt, räknaren i sidhuvudet uppdateras utan att sidan blinkar, och kunden stannar precis där hen var. För en butik är detta en direkt väg till konvertering: mindre friktion, fler slutförda köp.

Du kan bygga en AJAX-varukorg i WooCommerce på tre sätt. Nedan följer varje metod: från att installera ett tillägg på en minut till anpassad PHP- och JavaScript-kod.

💡 Snabb översikt:

  • Metod 1: installera ett gratis tillägg, 2 klick, fungerar för enkla och variabla produkter
  • Metod 2: inbyggd WooCommerce-inställning, endast arkivsidor, inga variationer
  • Metod 3: PHP + JavaScript i ett barntema, full kontroll, modern wc-ajax-ändpunkt

Vad en AJAX-varukorg är och varför din butik behöver den

clipboard 2026 08 01T13 56 23

En vanlig WooCommerce-varukorg fungerar så här: kunden klickar på "Lägg i varukorg" → webbläsaren skickar formuläret → servern behandlar det → sidan laddas om → kunden ser resultatet. En kedja på fyra steg, och du kan förlora en person vid varje steg.

En AJAX-varukorg ändrar mekaniken. Webbläsaren skickar en asynkron förfrågan till servern, servern returnerar JSON med uppdaterad varukorgsdata, och JavaScript uppdaterar räknaren och minivarukorgen i farten. Sidan ligger kvar. Kunden märker inte ens att något hände: produkten finns redan i varukorgen.

Ur butikens perspektiv är skillnaden påtaglig. En Google-studie från 2023 visade att varje extra steg i köptratten minskar konverteringen med 10-15%. Genom att ta bort omladdningen tar du bort ett steg. Dessutom minskar serverbelastningen: istället för att rendera en hel sida levererar den lättviktig JSON.

Men det finns en nyans: WooCommerce aktiverar som standard AJAX endast för butiks- och kategorisidor. På den enskilda produktsidan och för variabla produkter finns omladdningen kvar. Det är precis den luckan vi täpper till.

Metod 1: Tillägget Ajax add to cart for WooCommerce

clipboard 2026 08 01T13 56 39

Den snabbaste vägen, det gratis tillägget Ajax Add to Cart for WooCommerce. Installeras på en minut, kräver ingen konfiguration, fungerar direkt efter aktivering.

Tillägget hanterar AJAX-tillägg för enkla och variabla produkter på vilken sida som helst: produkt, arkiv, kategori. Minivarukorgen uppdateras automatiskt. Enligt WordPress.org: 10 000+ aktiva installationer, 4,7 av 5 i betyg, kompatibilitet med WordPress 7.0+ och senaste WooCommerce-versionerna. Uppdateras regelbundet: den senaste versionen 2.6.5 kom i juni 2026.

Installation:

  • Gå till WordPress admin → Tillägg → Lägg till nytt
  • Sök efter "Ajax add to cart for WooCommerce"
  • Klicka på "Installera", sedan "Aktivera"

Det är allt. Gå till vilken produktsida som helst och klicka på "Lägg i varukorg": ingen omladdning, produkten är tillagd. Tillägget kräver inga ytterligare inställningar. Om du behöver inaktivera AJAX för vissa sidor har tilläggets inställningar ett motsvarande filter.

Ett alternativ, FunnelKit Cart (också gratis). Förutom en AJAX-varukorg erbjuder det en utskjutbar varukorgspanel och merförsäljning inuti den. Det är lite tyngre, men för butiker som fokuserar på genomsnittligt ordervärde är det motiverat.

Metod 2: Inbyggd WooCommerce-inställning

clipboard 2026 07 31T19 38 09

WooCommerce kan hantera en AJAX-varukorg direkt ur lådan, men med två begränsningar. Det fungerar endast på arkivsidor (butik, kategorier, taggar) och stöder inte variabla produkter. För den enskilda produktsidan finns omladdningen kvar.

Om din butik endast säljer enkla produkter och kunderna lägger dem i varukorgen från butiksgolvet är detta tillräckligt. Aktiveras med en enda kryssruta:

  • Admin → WooCommerce → Inställningar → Produkter → Allmänt
  • I blocket "Beteende för Lägg i varukorg", kryssa i "Aktivera AJAX-knappar för Lägg i varukorg på arkiv"
  • Spara

Klart. På butikssidan och kategorisidorna fungerar nu "Lägg i varukorg"-knappen utan omladdning. Men besök en enskild produktsida, och det är fortfarande samma sak: en full omladdningscykel. För de flesta butiker är detta inte tillräckligt, så låt oss gå vidare till den tredje metoden.

Metod 3: PHP och JavaScript i ett barntema

svart bärbar dator påslagen på bord

Full kontroll över AJAX-varukorgen får du med anpassad kod. Du bestämmer på vilka sidor AJAX fungerar, hur fel hanteras och vad kunden ser efter att ha lagt till en produkt.

Vi skriver en hanterare mot den moderna wc-ajax-ändpunkten; den fungerar bra med cachingtillägg (WP Rocket, LiteSpeed Cache exkluderar ?wc-ajax= från cachen som standard), till skillnad från den gamla admin-ajax.php, som ofta beter sig oförutsägbart på cachade webbplatser.

3.1 Barntema

Koden placeras i ett barntema: detta är en försäkring mot att förlora ändringar när huvudtemat uppdateras. Om du inte har ett barntema ännu, skapa ett eller använd ett tillägg som Code Snippets; det låter dig lägga till PHP-kod utan att redigera temafiler.

Varför ett barntema är obligatoriskt: nästa gång huvudtemat uppdateras kommer alla dina redigeringar i functions.php och JS-filer att skrivas över. Ett barntema lever separat och berörs inte av uppdateringar.

3.2 Ladda in JavaScript

I barntemats functions.php registrerar och lokaliserar vi skriptet:

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

Genomgång. wp_register_script registrerar vår framtida JS-fil med beroenden på jQuery och den inbyggda wc-add-to-cart. wp_localize_script skickar två nyckelparametrar till JavaScript: wc-ajax-ändpunktens URL och en nonce-nyckel för CSRF-skydd. En nonce är en kryptografisk signatur som servern verifierar när den behandlar förfrågan: utan den skulle en extern webbplats kunna peta i din varukorg.

3.3 JavaScript-hanterare

Skapa en js-mapp i barntemats rot och en ajax-add-to-cart.js-fil inuti den:

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

Den viktigaste skillnaden mot föråldrade handledningar: vi använder sdAjaxCart.wc_ajax_url (wc-ajax-ändpunkten) istället för wc_add_to_cart_params.ajax_url (den gamla admin-ajax.php). wc-ajax exkluderas automatiskt av cachingtillägg och kräver ingen separat wp_ajax_nopriv_-hook; WooCommerce hanterar själv autentiserade och oautentiserade användare.

3.4 PHP-hanterare

Lägg till följande i barntemats functions.php direkt efter det första blocket:

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

Hanteraren gör tre saker. Den kontrollerar noncen: om förfrågan kom från en extern webbplats returnerar den omedelbart en 403. Den lägger till produkten i varukorgen via WC()->cart->add_to_cart(), standardmetoden i WooCommerce som själv hanterar lager, variationer och validering. Den anropar WC_AJAX::get_refreshed_fragments(); denna metod returnerar uppdaterade HTML-fragment av minivarukorgen, som vår JavaScript plockar upp.

Hooken wc_ajax_sd_ajax_add_to_cart är en wc-ajax-ändpunkt som WooCommerce behandlar förbi de flesta cachingtillägg. Inga wp_ajax_ / wp_ajax_nopriv_ behövs: wc-ajax vet själv om användaren är inloggad eller inte.

Vanliga misstag vid implementering av en AJAX-varukorg

En AJAX-varukorg går sönder på förutsägbara sätt; nästan alltid är det tre saker som är boven. Här är vad du ska kontrollera först.

Konflikt med cachingtillägg. Om minivarukorgen inte uppdateras eller uppdateras med fördröjning har cachetillägget cachat AJAX-svaret. Lösning: använd wc-ajax-ändpunkten (den exkluderas automatiskt från cachen) och se till att WP Rocket / LiteSpeed Cache inte minifierar varukorgens inline-JS. I cacheinställningarna, leta reda på direktivet "Fördröj JavaScript" och lägg till /wc-ajax= i undantagen.

Temat stöder inte WooCommerce-fragment. Vissa teman anpassar minivarukorgen så att standardväljarna i WooCommerce slutar fungera. Symptom: AJAX körs, produkten finns i varukorgen, men räknaren i sidhuvudet uppdateras inte. Åtgärdas genom att ersätta väljare via woocommerce_add_to_cart_fragments-filtret.

Mobil knapplayout. På pekskärmsenheter avfyras click-händelsen annorlunda än på dator, ibland med 300 ms fördröjning eller dubbel avfyrning. Om en produkt läggs till två gånger på mobil, slå in hanteraren i en kontroll av $button.hasClass('disabled')-flaggan, som i koden ovan.

⁉️🤔 Vanliga frågor

Fungerar AJAX-varukorgen med variabla produkter?

Ja. Både tillägget Ajax Add to Cart for WooCommerce och den anpassade koden från metod 3 hanterar variabla produkter korrekt. Variationen skickas via variation_id i förfrågans body, och WooCommerce ersätter med rätt pris och attribut. Enda villkoret: alla obligatoriska variationsattribut måste vara valda innan du klickar på knappen.

Behöver jag rensa cachen efter att ha aktiverat AJAX-varukorgen?

Absolut. Rensa webbplatsens cache (cachingtillägg → rensa allt), CDN-cachen om sådan används, och webbläsarens cache. AJAX-svar kan cachas redan vid den allra första förfrågan, och minivarukorgen slutar uppdateras. På en produktionssajt efter aktivering av AJAX, gå igenom en full cykel: lägg till en produkt → kontrollera räknaren → öppna varukorgen → säkerställ att produkten finns där.

Kan jag använda den gamla admin-ajax.php istället för wc-ajax?

Tekniskt sett ja, men du bör inte göra det. admin-ajax.php kräver två hooks (wp_ajax_ för autentiserade användare och wp_ajax_nopriv_ för gäster), och cachingtillägg blockerar eller cachar ofta denna ändpunkt. wc-ajax är den moderna WooCommerce-standarden; den är mer tillförlitlig och enklare att konfigurera. Om du porterar kod från en gammal handledning som använder admin-ajax.php, ersätt den med wc-ajax.

Vad gör jag om varukorgsräknaren inte uppdateras efter ett AJAX-tillägg?

Troligtvis använder temat icke-standardiserad märkning för minivarukorgen. WooCommerce uppdaterar fragment via väljare registrerade av woocommerce_add_to_cart_fragments-filtret. Kontrollera temats functions.php för detta filter och jämför väljarna med den faktiska minivarukorgens märkning i webbläsarens inspector. Om väljarna inte matchar, åtgärda dem i filtret så kommer räknaren att fungera.

Sammanfattning

En AJAX-varukorg är inte dekoration; det är en direkt konverteringsspak. En minut för att installera ett tillägg eller en timme för anpassad kod betalar sig genom lägre andel övergivna varukorgar och fler slutförda köp. Välj den metod som passar dina behov:

  • Ingen tid och du behöver resultat direkt: installera Ajax Add to Cart for WooCommerce, aktivera det och testa din butik.
  • Du säljer endast enkla produkter från butiksgolvet: aktivera den inbyggda WooCommerce-inställningen.
  • Du behöver full kontroll och tillförlitlighet på en cachad webbplats: kör metod 3 med wc-ajax-ändpunkten och nonce-kontroll.

Om din butik körs på ett blocktema eller använder WooCommerce Blocks för produktsidan, kontrollera kompatibiliteten: block renderar "Lägg i varukorg"-knappen via React, och standard jQuery-hanterare kanske inte fäster. I sådana fall är ett tillägg mer tillförlitligt.

Redaktionen
RedaktionenRedaktionellt team→ Alla publikationer

Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.