Skip to content
🛒 Ajax-ostoskori WooCommercessa: 3 tapaa lisäosasta mukautettuun koodiin
WooCommerceVerkkokehitysWordPress
6 min1,235 sanaa

🛒 Ajax-ostoskori WooCommercessa: 3 tapaa lisäosasta mukautettuun koodiin

"Lisää ostoskoriin" -painike WooCommercessa lataa sivun oletuksena uudelleen jokaisella klikkauksella. Asiakas valitsee tuotteen, klikkaa ja odottaa. Puolitoista sekuntia, kaksi, kolme. Mobiilissa kaikki viisi. Jokainen tällainen viive leikkaa osan yleisöstä pois: Baymard Instituten mukaan keskimääräinen ostoskorin hylkäysaste verkkokaupassa on noin 70%, ja hidas ostoskori on yksi keskeisistä syistä.

AJAX-ostoskori poistaa sivunlatauksen. Tuote lisätään välittömästi, otsikon laskuri päivittyy ilman sivun välkkymistä ja asiakas pysyy juuri siinä missä olikin. Kaupalle tämä on suora tie konversioon: vähemmän kitkaa, enemmän toteutuneita ostoja.

Voit rakentaa AJAX-ostoskorin WooCommerceen kolmella tavalla. Alla käydään läpi jokainen: minuutissa asennettavasta lisäosasta räätälöityyn PHP- ja JavaScript-koodiin.

💡 Pikakatsaus:

  • Tapa 1: asenna ilmainen lisäosa, 2 klikkausta, toimii yksinkertaisille ja muuttuville tuotteille
  • Tapa 2: WooCommercen sisäänrakennettu asetus, vain arkistosivut, ei variaatioita
  • Tapa 3: PHP + JavaScript lapsiteemassa, täysi hallinta, moderni wc-ajax-päätepiste

Mikä AJAX-ostoskori on ja miksi kauppasi tarvitsee sen

clipboard 2026 08 01T13 56 23

Tavallinen WooCommerce-ostoskori toimii näin: asiakas klikkaa "Lisää ostoskoriin" → selain lähettää lomakkeen → palvelin käsittelee sen → sivu latautuu uudelleen → asiakas näkee tuloksen. Neljän askeleen ketju, ja voit menettää asiakkaan jokaisessa vaiheessa.

AJAX-ostoskori muuttaa mekaniikan. Selain lähettää asynkronisen pyynnön palvelimelle, palvelin palauttaa JSON-muotoista dataa päivitetyllä ostoskorin sisällöllä, ja JavaScript päivittää laskurin ja minikorin lennossa. Sivu pysyy paikallaan. Asiakas ei edes huomaa mitään tapahtuneen: tuote on jo korissa.

Kaupan näkökulmasta ero on tuntuva. Googlen vuoden 2023 tutkimus osoitti, että jokainen ylimääräinen askel ostoputkessa vähentää konversiota 10-15%. Poistamalla sivunlatauksen poistat yhden askeleen. Lisäksi palvelimen kuorma pienenee: kokonaisen sivun renderöinnin sijaan se tarjoilee kevyttä JSONia.

Mutta tässä on vivahde: WooCommerce ottaa AJAXin oletuksena käyttöön vain kauppa- ja kategoriasivuilla. Yksittäisellä tuotesivulla ja muuttuville tuotteille sivunlataus säilyy. Juuri tämän aukon me tukimme.

Tapa 1: Ajax add to cart for WooCommerce -lisäosa

clipboard 2026 08 01T13 56 39

Nopein reitti, ilmainen Ajax Add to Cart for WooCommerce -lisäosa. Asentuu minuutissa, ei vaadi konfigurointia, toimii heti aktivoinnin jälkeen.

Lisäosa hoitaa AJAX-lisäyksen yksinkertaisille ja muuttuville tuotteille millä tahansa sivulla: tuote-, arkisto-, kategoriasivu. Minikori päivittyy automaattisesti. WordPress.orgin mukaan yli 10 000 aktiivista asennusta, arvosana 4,7/5, yhteensopivuus WordPress 7.0+ ja uusien WooCommerce-versioiden kanssa. Päivitetään säännöllisesti: viimeisin julkaisu 2.6.5 tuli kesäkuussa 2026.

Asennus:

  • Siirry WordPressin hallintapaneeliin → Lisäosat → Lisää uusi
  • Hae "Ajax add to cart for WooCommerce"
  • Klikkaa "Asenna" ja sitten "Aktivoi"

Siinä kaikki. Mene mille tahansa tuotesivulle ja klikkaa "Lisää ostoskoriin": ei sivunlatausta, tuote lisätty. Lisäosa ei vaadi lisäasetuksia. Jos haluat poistaa AJAXin käytöstä tietyillä sivuilla, lisäosan asetuksissa on vastaava suodatin.

Vaihtoehto, FunnelKit Cart (myös ilmainen). AJAX-ostoskorin lisäksi se tarjoaa esiin liukuvan ostoskorin sivupaneelin ja lisämyynnit sen sisällä. Se on hieman raskaampi, mutta keskiostoksen arvoon keskittyville kaupoille se on perusteltu.

Tapa 2: WooCommercen sisäänrakennettu asetus

clipboard 2026 07 31T19 38 09

WooCommerce osaa AJAX-ostoskorin suoraan paketista, mutta kahdella rajoituksella. Se toimii vain arkistosivuilla (kauppa, kategoriat, tagit) eikä tue muuttuvia tuotteita. Yksittäisellä tuotesivulla sivunlataus säilyy.

Jos kauppasi myy vain yksinkertaisia tuotteita ja asiakkaat lisäävät ne ostoskoriin kauppasivulta, tämä riittää. Käyttöön yhdellä valintaruudulla:

  • Hallintapaneeli → WooCommerce → Asetukset → Tuotteet → Yleiset
  • Kohdassa "Lisää ostoskoriin -toiminta" valitse "Ota käyttöön AJAX-lisäys arkistoissa"
  • Tallenna

Valmista. Kauppasivulla ja kategoriasivuilla "Lisää ostoskoriin" -painike toimii nyt ilman sivunlatausta. Mutta vieraile yksittäisellä tuotesivulla, ja se on edelleen samanlainen: täysi sivunlataussykli. Useimmille kaupoille tämä ei riitä, joten siirrytään kolmanteen tapaan.

Tapa 3: PHP ja JavaScript lapsiteemassa

musta kannettava tietokone päällä pöydällä

Täysi hallinta AJAX-ostoskorista tulee räätälöidyllä koodilla. Sinä päätät, millä sivuilla AJAX toimii, miten virheet käsitellään ja mitä asiakas näkee tuotteen lisäämisen jälkeen.

Kirjoitamme käsittelijän modernille wc-ajax-päätepisteelle; se toimii hyvin yhteen välimuistilisäosien kanssa (WP Rocket, LiteSpeed Cache jättävät ?wc-ajax= oletuksena välimuistin ulkopuolelle), toisin kuin vanha admin-ajax.php, joka käyttäytyy usein arvaamattomasti välimuistitetuilla sivustoilla.

3.1 Lapsiteema

Koodi sijoitetaan lapsiteemaan: tämä on vakuutus muutosten menettämistä vastaan, kun pääteema päivittyy. Jos sinulla ei vielä ole lapsiteemaa, luo sellainen tai käytä lisäosaa, kuten Code Snippets; sen avulla voit lisätä PHP-koodia muokkaamatta teematiedostoja.

Miksi lapsiteema on pakollinen: kun pääteema seuraavan kerran päivittyy, kaikki muokkauksesi functions.php- ja JS-tiedostoissa ylikirjoitetaan. Lapsiteema elää erillään, eivätkä päivitykset koske siihen.

3.2 JavaScriptin käyttöönotto

Lapsiteeman functions.php-tiedostossa rekisteröimme ja lokalisoimme skriptin:

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

Erittely. wp_register_script rekisteröi tulevan JS-tiedostomme riippuvuuksilla jQueryyn ja sisäänrakennettuun wc-add-to-cart-skriptiin. wp_localize_script välittää kaksi keskeistä parametria JavaScriptille: wc-ajax-päätepisteen URL-osoitteen ja nonce-avaimen CSRF-suojausta varten. Nonce on kryptografinen allekirjoitus, jonka palvelin tarkistaa pyyntöä käsitellessään: ilman sitä mikä tahansa ulkoinen sivusto voisi sorkkia ostoskoriasi.

3.3 JavaScript-käsittelijä

Luo js-kansio lapsiteeman juureen ja ajax-add-to-cart.js-tiedosto sen sisään:

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

Keskeinen ero vanhentuneisiin oppaisiin: käytämme sdAjaxCart.wc_ajax_url-osoitetta (wc-ajax-päätepiste) wc_add_to_cart_params.ajax_url-osoitteen (vanha admin-ajax.php) sijaan. Välimuistilisäosat jättävät wc-ajax-päätepisteen automaattisesti huomiotta, eikä se vaadi erillistä wp_ajax_nopriv_-koukkua; WooCommerce itse käsittelee sekä kirjautuneet että kirjautumattomat käyttäjät.

3.4 PHP-käsittelijä

Lisää seuraava lapsiteeman functions.php-tiedostoon heti ensimmäisen lohkon perään:

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

Käsittelijä tekee kolme asiaa. Se tarkistaa noncen: jos pyyntö tuli ulkoiselta sivustolta, se palauttaa välittömästi 403-virheen. Se lisää tuotteen ostoskoriin WC()->cart->add_to_cart()-metodilla, joka on WooCommercen vakiometodi ja hoitaa varastosaldot, variaatiot ja validoinnin itse. Se kutsuu WC_AJAX::get_refreshed_fragments()-metodia; tämä palauttaa päivitetyt HTML-fragmentit minikorista, jotka JavaScriptimme poimii.

Koukku wc_ajax_sd_ajax_add_to_cart on wc-ajax-päätepiste, jonka WooCommerce käsittelee useimpien välimuistilisäosien ohi. wp_ajax_ / wp_ajax_nopriv_-koukkuja ei tarvita: wc-ajax tietää itse, onko käyttäjä kirjautunut vai ei.

Yleiset virheet AJAX-ostoskoria toteutettaessa

AJAX-ostoskori hajoaa ennustettavasti; melkein aina syyllisiä on kolme. Tässä mitä tarkistaa ensin.

Ristiriita välimuistilisäosien kanssa. Jos minikori ei päivity tai päivittyy viiveellä, välimuistilisäosa välimuistitti AJAX-vastauksen. Ratkaisu: käytä wc-ajax-päätepistettä (se jätetään automaattisesti välimuistin ulkopuolelle) ja varmista, etteivät WP Rocket / LiteSpeed Cache minifioi ostoskorin sisäistä JS:ää. Etsi välimuistiasetuksista "Viivästytä JavaScriptiä" -kohta ja lisää /wc-ajax= poikkeuksiin.

Teema ei tue WooCommercen fragmentteja. Jotkin teemat muokkaavat minikoria niin, että WooCommercen vakio-valitsimet lakkaavat toimimasta. Oire: AJAX suoritetaan, tuote on korissa, mutta otsikon laskuri ei päivity. Korjataan vaihtamalla valitsimet woocommerce_add_to_cart_fragments-suodattimen kautta.

Mobiilipainikkeen asettelu. Kosketuslaitteilla click-tapahtuma laukeaa eri tavalla kuin työpöydällä, joskus 300 ms viiveellä tai tuplana. Jos tuote lisätään mobiilissa kahdesti, kääri käsittelijä $button.hasClass('disabled')-lipun tarkistukseen, kuten yllä olevassa koodissa.

⁉️🤔 Usein kysytyt kysymykset

Toimiiko AJAX-ostoskori muuttuvien tuotteiden kanssa?

Kyllä. Sekä Ajax Add to Cart for WooCommerce -lisäosa että tavan 3 räätälöity koodi käsittelevät muuttuvat tuotteet oikein. Variaatio välitetään variation_id-parametrilla pyynnön rungossa, ja WooCommerce korvaa oikean hinnan ja attribuutit. Ainoa ehto: kaikki pakolliset variaatio-attribuutit on valittava ennen painikkeen klikkaamista.

Täytyykö välimuisti tyhjentää AJAX-ostoskorin käyttöönoton jälkeen?

Ehdottomasti. Tyhjennä sivuston välimuisti (välimuistilisäosa → tyhjennä kaikki), CDN-välimuisti jos käytössä, ja selaimen välimuisti. AJAX-vastaukset voivat jäädä välimuistiin heti ensimmäisellä pyynnöllä, ja minikori lakkaa päivittymästä. Tuotantosivustolla AJAXin käyttöönoton jälkeen käy läpi koko sykli: lisää tuote → tarkista laskuri → avaa ostoskori → varmista, että tuote on siellä.

Voinko käyttää vanhaa admin-ajax.php-tiedostoa wc-ajax-päätepisteen sijaan?

Teknisesti kyllä, mutta ei pitäisi. admin-ajax.php vaatii kaksi koukkua (wp_ajax_ kirjautuneille käyttäjille ja wp_ajax_nopriv_ vieraille), ja välimuistilisäosat usein estävät tai välimuistittavat tämän päätepisteen. wc-ajax on moderni WooCommerce-standardi; se on luotettavampi ja helpompi konfiguroida. Jos siirrät koodia vanhasta oppaasta, joka käyttää admin-ajax.php-tiedostoa, korvaa se wc-ajax-päätepisteellä.

Entä jos ostoskorin laskuri ei päivity AJAX-lisäyksen jälkeen?

Todennäköisesti teema käyttää epästandardia minikorin merkintää. WooCommerce päivittää fragmentit woocommerce_add_to_cart_fragments-suodattimen rekisteröimien valitsimien kautta. Tarkista teeman functions.php-tiedostosta tämä suodatin ja vertaa valitsimia minikorin todelliseen merkintään selaimen tarkastustyökalussa. Jos valitsimet eivät täsmää, korjaa ne suodattimessa, niin laskuri alkaa toimia.

Yhteenveto

AJAX-ostoskori ei ole koriste; se on suora konversion vipuvarsi. Minuutti lisäosan asentamiseen tai tunti räätälöityyn koodiin maksaa itsensä takaisin alhaisempana ostoskorin hylkäysasteena ja useampina toteutuneina ostoina. Valitse tarpeisiisi sopiva tapa:

  • Ei aikaa ja tarvitset tuloksia heti: asenna Ajax Add to Cart for WooCommerce, aktivoi se ja mene testaamaan kauppaasi.
  • Myyt vain yksinkertaisia tuotteita kauppasivulta: ota käyttöön WooCommercen sisäänrakennettu asetus.
  • Tarvitset täyden hallinnan ja luotettavuuden välimuistitetulla sivustolla: valitse tapa 3 käyttäen wc-ajax-päätepistettä ja nonce-tarkistusta.

Jos kauppasi käyttää lohkoteemaa tai WooCommerce Blocks -lohkoja tuotesivulla, tarkista yhteensopivuus: lohkot renderöivät "Lisää ostoskoriin" -painikkeen Reactilla, eivätkä tavalliset jQuery-käsittelijät välttämättä kiinnity. Tällaisissa tapauksissa lisäosa on luotettavampi.

Toimitus
ToimitusToimitustiimi→ Kaikki julkaisut

Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.