🛒 Panier Ajax dans WooCommerce : 3 méthodes, du plugin au code personnalisé

Le bouton «Ajouter au panier» dans WooCommerce recharge la page par défaut à chaque clic. Un client choisit un produit, clique et attend. Une seconde et demie, deux, trois. Sur mobile, les cinq. Chaque délai de ce type vous fait perdre une partie de votre audience: selon le Baymard Institute, le taux moyen d’abandon de panier en e-commerce tourne autour de 70%, et un panier lent est l’un des facteurs clés.

Un panier AJAX supprime le rechargement. Le produit est ajouté instantanément, le compteur dans l’en-tête se met à jour sans que la page ne clignote et le client reste exactement là où il était. Pour une boutique, c’est un levier direct de conversion: moins de friction, plus d’achats finalisés.

Vous pouvez mettre en place un panier AJAX dans WooCommerce de trois manières. Voici chacune d’elles, de l’installation d’une extension en une minute au code PHP et JavaScript sur mesure.

💡 Aperçu rapide:

• Méthode 1: installer une extension gratuite, 2 clics, fonctionne pour les produits simples et variables
• Méthode 2: réglage WooCommerce intégré, pages d’archive uniquement, pas de variantes
• Méthode 3: PHP + JavaScript dans un thème enfant, contrôle total, endpoint moderne wc-ajax

Ce qu’est un panier AJAX et pourquoi votre boutique en a besoin

Un panier WooCommerce classique fonctionne ainsi: le client clique sur «Ajouter au panier» → le navigateur soumet le formulaire → le serveur le traite → la page se recharge → le client voit le résultat. Une chaîne de quatre étapes, et vous pouvez perdre une personne à chacune d’elles.

Un panier AJAX change la mécanique. Le navigateur envoie une requête asynchrone au serveur, le serveur renvoie du JSON avec les données du panier mises à jour et JavaScript actualise le compteur et le mini-panier à la volée. La page ne bouge pas. Le client ne remarque même pas qu’il s’est passé quelque chose: le produit est déjà dans le panier.

Du point de vue de la boutique, la différence est tangible. Une étude Google de 2023 a montré que chaque étape supplémentaire dans l’entonnoir d’achat réduit la conversion de 10 à 15%. En supprimant le rechargement, vous supprimez une étape. De plus, la charge serveur diminue: au lieu de générer une page complète, il sert du JSON léger.

Mais il y a une nuance: par défaut, WooCommerce active l’AJAX uniquement pour les pages boutique et catégories. Sur la page produit individuelle et pour les produits variables, le rechargement subsiste. C’est précisément ce vide que nous allons combler.

Méthode 1: l’extension Ajax Add to Cart for WooCommerce

La voie la plus rapide, l’extension gratuite Ajax Add to Cart for WooCommerce. Elle s’installe en une minute, ne nécessite aucune configuration et fonctionne dès l’activation.

L’extension gère l’ajout AJAX pour les produits simples et variables sur n’importe quelle page: produit, archive, catégorie. Le mini-panier se met à jour automatiquement. Selon WordPress.org, plus de 10 000 installations actives, une note de 4,7 sur 5, une compatibilité avec WordPress 7.0+ et les versions récentes de WooCommerce. Mise à jour régulièrement: la dernière version 2.6.5 est sortie en juin 2026.

Installation:

• Allez dans l’administration WordPress → Extensions → Ajouter
• Recherchez «Ajax add to cart for WooCommerce»
• Cliquez sur «Installer», puis sur «Activer»

C’est tout. Rendez-vous sur n’importe quelle page produit et cliquez sur «Ajouter au panier»: pas de rechargement, produit ajouté. L’extension ne nécessite aucun réglage supplémentaire. Si vous avez besoin de désactiver l’AJAX sur certaines pages, les paramètres de l’extension proposent un filtre correspondant.

Une alternative, FunnelKit Cart (également gratuite). En plus d’un panier AJAX, elle fournit un panier latéral coulissant et des ventes additionnelles à l’intérieur. Elle est un peu plus lourde, mais pour les boutiques qui cherchent à augmenter le panier moyen, cela se justifie.

Méthode 2: le réglage WooCommerce intégré

WooCommerce peut proposer un panier AJAX de base, mais avec deux limites. Cela ne fonctionne que sur les pages d’archive (boutique, catégories, étiquettes) et ne prend pas en charge les produits variables. Pour la page produit individuelle, le rechargement subsiste.

Si votre boutique ne vend que des produits simples et que les clients les ajoutent au panier depuis la boutique, cela suffit. Activation en une seule case à cocher:

• Administration → WooCommerce → Réglages → Produits → Général
• Dans le bloc «Comportement d’ajout au panier», cochez «Activer les boutons d’ajout au panier en AJAX sur les archives»
• Enregistrez

Voilà. Sur la page boutique et les pages de catégories, le bouton «Ajouter au panier» fonctionne désormais sans rechargement. Mais visitez une page produit individuelle, et c’est toujours la même chose: un cycle complet de rechargement. Pour la plupart des boutiques, cela ne suffit pas, alors passons à la troisième méthode.

Méthode 3: PHP et JavaScript dans un thème enfant

Le contrôle total du panier AJAX passe par du code sur mesure. Vous décidez sur quelles pages l’AJAX fonctionne, comment les erreurs sont gérées et ce que le client voit après avoir ajouté un produit.

Nous allons écrire un gestionnaire sur l’endpoint moderne wc-ajax; il fonctionne bien avec les extensions de cache (WP Rocket, LiteSpeed Cache excluent ?wc-ajax= du cache par défaut), contrairement à l’ancien admin-ajax.php, qui se comporte souvent de manière imprévisible sur les sites mis en cache.

3.1 Thème enfant

Le code sera placé dans un thème enfant: c’est une assurance contre la perte de modifications lors de la mise à jour du thème parent. Si vous n’avez pas encore de thème enfant, créez-en un ou utilisez une extension comme Code Snippets; elle vous permet d’ajouter du code PHP sans modifier les fichiers du thème.

Pourquoi un thème enfant est obligatoire: lors de la prochaine mise à jour du thème parent, toutes vos modifications dans functions.php et les fichiers JS seront écrasées. Un thème enfant vit séparément et n’est pas touché par les mises à jour.

3.2 Mise en file du JavaScript

Dans le functions.php du thème enfant, nous enregistrons et localisons le 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');

Détail. wp_register_script enregistre notre futur fichier JS avec des dépendances à jQuery et au wc-add-to-cart intégré. wp_localize_script transmet deux paramètres clés à JavaScript: l’URL de l’endpoint wc-ajax et une clé nonce pour la protection CSRF. Un nonce est une signature cryptographique que le serveur vérifiera lors du traitement de la requête: sans elle, n’importe quel site externe pourrait manipuler votre panier.

3.3 Gestionnaire JavaScript

Créez un dossier js à la racine du thème enfant et un fichier ajax-add-to-cart.js à l’intérieur:

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 différence clé par rapport aux tutoriels obsolètes: nous utilisons sdAjaxCart.wc_ajax_url (l’endpoint wc-ajax) au lieu de wc_add_to_cart_params.ajax_url (l’ancien admin-ajax.php). wc-ajax est automatiquement exclu par les extensions de cache et ne nécessite pas de hook wp_ajax_nopriv_ séparé; WooCommerce gère lui-même les utilisateurs connectés et non connectés.

3.4 Gestionnaire PHP

Ajoutez ce qui suit au functions.php du thème enfant, juste après le premier bloc:

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

Le gestionnaire fait trois choses. Il vérifie le nonce: si la requête provient d’un site externe, il renvoie immédiatement une 403. Il ajoute le produit au panier via WC()->cart->add_to_cart(), la méthode WooCommerce standard qui gère elle-même le stock, les variantes et la validation. Il appelle WC_AJAX::get_refreshed_fragments(); cette méthode renvoie les fragments HTML mis à jour du mini-panier, que notre JavaScript va récupérer.

Le hook wc_ajax_sd_ajax_add_to_cart est un endpoint wc-ajax que WooCommerce traite en contournant la plupart des extensions de cache. Pas besoin de wp_ajax_ / wp_ajax_nopriv_: wc-ajax sait de lui-même si l’utilisateur est connecté ou non.

Erreurs courantes lors de l’implémentation d’un panier AJAX

Un panier AJAX casse de manière prévisible; presque toujours, trois choses sont en cause. Voici ce qu’il faut vérifier en premier.

Conflit avec les extensions de cache. Si le mini-panier ne se met pas à jour ou se met à jour avec un délai, l’extension de cache a mis en cache la réponse AJAX. Solution: utilisez l’endpoint wc-ajax (il est exclu du cache automatiquement) et assurez-vous que WP Rocket / LiteSpeed Cache ne minifient pas le JS inline du panier. Dans les paramètres de cache, trouvez la directive «Delay JavaScript» et ajoutez /wc-ajax= aux exclusions.

Le thème ne prend pas en charge les fragments WooCommerce. Certains thèmes personnalisent le mini-panier de telle sorte que les sélecteurs WooCommerce standard cessent de fonctionner. Symptôme: l’AJAX s’exécute, le produit est dans le panier, mais le compteur dans l’en-tête ne se met pas à jour. Correction: remplacez les sélecteurs via le filtre woocommerce_add_to_cart_fragments.

Disposition du bouton sur mobile. Sur les appareils tactiles, l’événement click se déclenche différemment que sur ordinateur, parfois avec un délai de 300 ms ou un double déclenchement. Si un produit est ajouté deux fois sur mobile, enveloppez le gestionnaire dans une vérification du drapeau $button.hasClass('disabled'), comme dans le code ci-dessus.

⁉️🤔 Foire aux questions

Le panier AJAX fonctionne-t-il avec les produits variables?

Oui. L’extension Ajax Add to Cart for WooCommerce et le code sur mesure de la méthode 3 gèrent correctement les produits variables. La variante est transmise via variation_id dans le corps de la requête, et WooCommerce substitue le prix et les attributs corrects. La seule condition: tous les attributs de variante obligatoires doivent être sélectionnés avant de cliquer sur le bouton.

Dois-je vider le cache après avoir activé le panier AJAX?

Absolument. Videz le cache du site (extension de cache → purger tout), le cache du CDN si vous en utilisez un, et le cache du navigateur. Les réponses AJAX peuvent être mises en cache dès la première requête, et le mini-panier cessera de se mettre à jour. Sur un site en production après avoir activé l’AJAX, effectuez un cycle complet: ajoutez un produit → vérifiez le compteur → ouvrez le panier → assurez-vous que le produit est bien là.

Puis-je utiliser l’ancien admin-ajax.php au lieu de wc-ajax?

Techniquement, oui, mais vous ne devriez pas. admin-ajax.php nécessite deux hooks (wp_ajax_ pour les utilisateurs connectés et wp_ajax_nopriv_ pour les visiteurs), et les extensions de cache bloquent ou mettent souvent en cache cet endpoint. wc-ajax est le standard WooCommerce moderne; il est plus fiable et plus simple à configurer. Si vous portez du code d’un ancien tutoriel qui utilise admin-ajax.php, remplacez-le par wc-ajax.

Que faire si le compteur du panier ne se met pas à jour après un ajout AJAX?

Très probablement, le thème utilise un balisage de mini-panier non standard. WooCommerce met à jour les fragments via des sélecteurs enregistrés par le filtre woocommerce_add_to_cart_fragments. Vérifiez le functions.php du thème pour ce filtre et comparez les sélecteurs avec le balisage réel du mini-panier dans l’inspecteur du navigateur. Si les sélecteurs ne correspondent pas, corrigez-les dans le filtre, et le compteur fonctionnera.

Résumé

Un panier AJAX n’est pas un élément décoratif; c’est un levier de conversion direct. Une minute pour installer une extension ou une heure pour du code sur mesure est rentabilisée par une baisse de l’abandon de panier et davantage d’achats finalisés. Choisissez la méthode qui correspond à vos besoins:

• Vous n’avez pas de temps et vous voulez des résultats tout de suite: installez Ajax Add to Cart for WooCommerce, activez-la et allez tester votre boutique.
• Vous ne vendez que des produits simples depuis la boutique: activez le réglage WooCommerce intégré.
• Vous avez besoin d’un contrôle total et de fiabilité sur un site mis en cache: optez pour la méthode 3 avec l’endpoint wc-ajax et la vérification du nonce.

Si votre boutique fonctionne sur un thème bloc ou utilise les blocs WooCommerce pour la page produit, vérifiez la compatibilité: les blocs génèrent le bouton «Ajouter au panier» via React, et les gestionnaires jQuery standard peuvent ne pas s’attacher. Dans ce cas, une extension est plus fiable.