🛒 Carrello Ajax in WooCommerce: 3 modi dal plugin al codice personalizzato

Il pulsante «Aggiungi al carrello» in WooCommerce ricarica la pagina per impostazione predefinita a ogni clic. Un cliente sceglie un prodotto, clicca e aspetta. Un secondo e mezzo, due, tre. Su mobile, tutti e cinque. Ogni ritardo di questo tipo taglia via una parte del pubblico: secondo il Baymard Institute, il tasso medio di abbandono del carrello nell'e-commerce si aggira intorno al 70% e un carrello lento è uno dei fattori chiave.

Un carrello AJAX elimina il ricaricamento. Il prodotto viene aggiunto all'istante, il contatore in testata si aggiorna senza che la pagina sfarfalli e il cliente rimane esattamente dov'era. Per un negozio, questa è una via diretta alla conversione: meno attrito, più acquisti completati.

Puoi realizzare un carrello AJAX in WooCommerce in tre modi. Di seguito, ciascuno di essi: dall'installazione di un plugin in un minuto al codice PHP e JavaScript personalizzato.

💡 Panoramica rapida:

• Metodo 1: installa un plugin gratuito, 2 clic, funziona per prodotti semplici e variabili
• Metodo 2: impostazione nativa di WooCommerce, solo archivio, nessuna variante
• Metodo 3: PHP + JavaScript in un child theme, controllo totale, endpoint moderno wc-ajax

Cos'è un carrello AJAX e perché il tuo negozio ne ha bisogno

Un carrello WooCommerce normale funziona così: il cliente clicca «Aggiungi al carrello» → il browser invia il form → il server lo elabora → la pagina si ricarica → il cliente vede il risultato. Una catena di quattro passaggi, e puoi perdere una persona in ciascuno di essi.

Un carrello AJAX cambia la meccanica. Il browser invia una richiesta asincrona al server, il server restituisce JSON con i dati aggiornati del carrello e JavaScript aggiorna il contatore e il mini-carrello al volo. La pagina rimane ferma. Il cliente non si accorge nemmeno che sia successo qualcosa: il prodotto è già nel carrello.

Dal punto di vista del negozio, la differenza è tangibile. Uno studio Google del 2023 ha mostrato che ogni passaggio extra nel funnel d'acquisto riduce la conversione del 10-15%. Eliminando il ricaricamento, elimini un passaggio. Inoltre, il carico sul server diminuisce: invece di generare una pagina intera, serve JSON leggero.

Ma c'è una sfumatura: WooCommerce di default abilita l'AJAX solo per le pagine negozio e categoria. Sulla pagina del singolo prodotto e per i prodotti variabili, il ricaricamento rimane. È esattamente questa lacuna che stiamo colmando.

Metodo 1: plugin Ajax add to cart for WooCommerce

Il percorso più veloce, il plugin gratuito Ajax Add to Cart for WooCommerce. Si installa in un minuto, non richiede configurazione, funziona subito dopo l'attivazione.

Il plugin gestisce l'aggiunta AJAX per prodotti semplici e variabili su qualsiasi pagina: prodotto, archivio, categoria. Il mini-carrello si aggiorna automaticamente. Secondo WordPress.org, 10.000+ installazioni attive, valutazione 4,7 su 5, compatibilità con WordPress 7.0+ e versioni recenti di WooCommerce. Aggiornato regolarmente: l'ultima release 2.6.5 è uscita a giugno 2026.

Installazione:

• Vai su amministrazione WordPress → Plugin → Aggiungi nuovo
• Cerca «Ajax add to cart for WooCommerce»
• Clicca «Installa», poi «Attiva»

Tutto qui. Visita una qualsiasi pagina prodotto e clicca «Aggiungi al carrello»: nessun ricaricamento, prodotto aggiunto. Il plugin non richiede impostazioni aggiuntive. Se hai bisogno di disabilitare l'AJAX per certe pagine, le impostazioni del plugin hanno un filtro corrispondente.

Un'alternativa, FunnelKit Cart (anch'esso gratuito). Oltre a un carrello AJAX, fornisce un pannello laterale a scorrimento e upsell al suo interno. È un po' più pesante, ma per negozi focalizzati sul valore medio dell'ordine è giustificato.

Metodo 2: impostazione nativa di WooCommerce

WooCommerce può gestire un carrello AJAX nativamente, ma con due limitazioni. Funziona solo sulle pagine archivio (negozio, categorie, tag) e non supporta i prodotti variabili. Per la pagina del singolo prodotto, il ricaricamento rimane.

Se il tuo negozio vende solo prodotti semplici e i clienti li aggiungono al carrello dalla vetrina, questo è sufficiente. Si abilita con un singolo checkbox:

• Amministrazione → WooCommerce → Impostazioni → Prodotti → Generale
• Nel blocco «Comportamento aggiunta al carrello», spunta «Abilita i pulsanti Aggiungi al carrello AJAX sugli archivi»
• Salva

Fatto. Sulla pagina negozio e sulle pagine categoria, il pulsante «Aggiungi al carrello» ora funziona senza ricaricamento. Ma visita una pagina di prodotto singolo, ed è sempre la stessa storia: un ciclo completo di ricaricamento. Per la maggior parte dei negozi, questo non basta, quindi passiamo al terzo metodo.

Metodo 3: PHP e JavaScript in un child theme

Il controllo totale sul carrello AJAX arriva con il codice personalizzato. Decidi tu su quali pagine funziona l'AJAX, come vengono gestiti gli errori e cosa vede il cliente dopo aver aggiunto un prodotto.

Scriveremo un handler sull'endpoint moderno wc-ajax; funziona bene con i plugin di caching (WP Rocket, LiteSpeed Cache escludono ?wc-ajax= dalla cache per impostazione predefinita), a differenza del vecchio admin-ajax.php, che spesso si comporta in modo imprevedibile sui siti in cache.

3.1 Child theme

Il codice andrà in un child theme: questa è un'assicurazione contro la perdita delle modifiche quando il tema padre si aggiorna. Se non hai ancora un child theme, creane uno o usa un plugin come Code Snippets; ti permette di aggiungere codice PHP senza modificare i file del tema.

Perché un child theme è obbligatorio: al prossimo aggiornamento del tema padre, tutte le tue modifiche in functions.php e nei file JS saranno sovrascritte. Un child theme vive separatamente e non viene toccato dagli aggiornamenti.

3.2 Caricamento JavaScript

Nel functions.php del child theme, registriamo e localizziamo lo script:

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

Spiegazione. wp_register_script registra il nostro futuro file JS con dipendenze da jQuery e dal wc-add-to-cart nativo. wp_localize_script passa due parametri chiave a JavaScript: l'URL dell'endpoint wc-ajax e una chiave nonce per la protezione CSRF. Un nonce è una firma crittografica che il server verificherà quando elabora la richiesta: senza, un sito esterno qualsiasi potrebbe interferire con il tuo carrello.

3.3 Handler JavaScript

Crea una cartella js nella root del child theme e al suo interno un file ajax-add-to-cart.js:

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

La differenza chiave rispetto ai tutorial obsoleti: usiamo sdAjaxCart.wc_ajax_url (l'endpoint wc-ajax) invece di wc_add_to_cart_params.ajax_url (il vecchio admin-ajax.php). wc-ajax è automaticamente escluso dai plugin di caching e non richiede un hook wp_ajax_nopriv_ separato; WooCommerce stesso gestisce utenti autenticati e non autenticati.

3.4 Handler PHP

Aggiungi quanto segue al functions.php del child theme subito dopo il primo blocco:

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

L'handler fa tre cose. Controlla il nonce: se la richiesta proviene da un sito esterno, restituisce immediatamente un 403. Aggiunge il prodotto al carrello tramite WC()->cart->add_to_cart(), il metodo standard di WooCommerce che gestisce autonomamente stock, varianti e validazione. Chiama WC_AJAX::get_refreshed_fragments(); questo metodo restituisce i frammenti HTML aggiornati del mini-carrello, che il nostro JavaScript raccoglierà.

L'hook wc_ajax_sd_ajax_add_to_cart è un endpoint wc-ajax che WooCommerce elabora bypassando la maggior parte dei plugin di caching. Nessun wp_ajax_ / wp_ajax_nopriv_ necessario: wc-ajax sa da solo se l'utente ha effettuato l'accesso o meno.

Errori comuni nell'implementazione di un carrello AJAX

Un carrello AJAX si rompe in modo prevedibile; quasi sempre, la colpa è di tre cose. Ecco cosa controllare per primo.

Conflitto con i plugin di caching. Se il mini-carrello non si aggiorna o si aggiorna con ritardo, il plugin di cache ha memorizzato la risposta AJAX. Soluzione: usa l'endpoint wc-ajax (è escluso automaticamente dalla cache) e assicurati che WP Rocket / LiteSpeed Cache non stiano minificando il JS inline del carrello. Nelle impostazioni della cache, trova la direttiva «Delay JavaScript» e aggiungi /wc-ajax= alle esclusioni.

Il tema non supporta i frammenti WooCommerce. Alcuni temi personalizzano il mini-carrello in modo che i selettori standard di WooCommerce smettano di funzionare. Sintomo: l'AJAX viene eseguito, il prodotto è nel carrello, ma il contatore in testata non si aggiorna. Si risolve sostituendo i selettori tramite il filtro woocommerce_add_to_cart_fragments.

Layout del pulsante su mobile. Sui dispositivi touch, l'evento click si attiva in modo diverso rispetto al desktop, a volte con un ritardo di 300 ms o un doppio scatto. Se un prodotto viene aggiunto due volte su mobile, avvolgi l'handler in un controllo del flag $button.hasClass('disabled'), come nel codice sopra.

⁉️🤔 Domande frequenti

Il carrello AJAX funziona con i prodotti variabili?

Sì. Sia il plugin Ajax Add to Cart for WooCommerce che il codice personalizzato del metodo 3 gestiscono correttamente i prodotti variabili. La variante viene passata tramite variation_id nel corpo della richiesta e WooCommerce sostituirà il prezzo e gli attributi corretti. L'unica condizione: tutti gli attributi obbligatori della variante devono essere selezionati prima di cliccare il pulsante.

Devo svuotare la cache dopo aver abilitato il carrello AJAX?

Assolutamente sì. Svuota la cache del sito (plugin di caching → svuota tutto), la cache CDN se utilizzata e la cache del browser. Le risposte AJAX possono essere memorizzate nella cache già alla prima richiesta e il mini-carrello smetterà di aggiornarsi. Su un sito di produzione, dopo aver abilitato l'AJAX, esegui un ciclo completo: aggiungi un prodotto → controlla il contatore → apri il carrello → assicurati che il prodotto sia presente.

Posso usare il vecchio admin-ajax.php invece di wc-ajax?

Tecnicamente sì, ma non dovresti. admin-ajax.php richiede due hook (wp_ajax_ per utenti autenticati e wp_ajax_nopriv_ per ospiti) e i plugin di caching spesso bloccano o memorizzano questo endpoint. wc-ajax è lo standard moderno di WooCommerce; è più affidabile e più semplice da configurare. Se stai portando codice da un vecchio tutorial che usa admin-ajax.php, sostituiscilo con wc-ajax.

Cosa fare se il contatore del carrello non si aggiorna dopo un'aggiunta AJAX?

Molto probabilmente, il tema utilizza un markup del mini-carrello non standard. WooCommerce aggiorna i frammenti tramite selettori registrati dal filtro woocommerce_add_to_cart_fragments. Controlla il functions.php del tema per questo filtro e confronta i selettori con il markup effettivo del mini-carrello nell'ispettore del browser. Se i selettori non corrispondono, correggili nel filtro e il contatore funzionerà.

Riepilogo

Un carrello AJAX non è decorazione; è una leva diretta sulla conversione. Un minuto per installare un plugin o un'ora per il codice personalizzato ripaga con un minor abbandono del carrello e più acquisti completati. Scegli il metodo più adatto alle tue esigenze:

• Non hai tempo e ti servono risultati subito: installa Ajax Add to Cart for WooCommerce, attivalo e vai a testare il tuo negozio.
• Vendi solo prodotti semplici dalla vetrina: abilita l'impostazione nativa di WooCommerce.
• Hai bisogno di controllo totale e affidabilità su un sito in cache: scegli il metodo 3 con l'endpoint wc-ajax e il controllo nonce.

Se il tuo negozio gira su un block theme o usa WooCommerce Blocks per la pagina prodotto, verifica la compatibilità: i blocchi renderizzano il pulsante «Aggiungi al carrello» tramite React e gli handler jQuery standard potrebbero non agganciarsi. In questi casi, un plugin è più affidabile.