WooCommerce AJAX ajouter au panier - Tutoriel étape par étape

Publié: 2019-11-20

Il y a quelques semaines, nous avons parlé de la façon d'ajouter la fonction de panier par programmation pour augmenter vos ventes. Aujourd'hui, nous verrons comment implémenter AJAX dans le bouton Ajouter au panier dans les produits WooCommerce . Cela améliorera l'expérience utilisateur et le processus de vente global, ce qui vous aidera également à optimiser votre boutique et à augmenter vos revenus.

De nos jours, si vous souhaitez gérer un magasin avec succès, il est essentiel que votre site mette à jour le panier de manière dynamique. Sinon, chaque fois qu'un utilisateur ajoute un produit au panier, la page se recharge, ce qui ralentit considérablement le processus d'achat et augmente les risques d'abandon des clients. C'est pourquoi la refonte de votre boutique avec la fonction d'ajout au panier WooCommerce AJAX est indispensable pour réduire l'abandon du panier et augmenter vos ventes.

Dans ce guide, nous vous montrerons comment procéder étape par étape.

Avantages d'AJAX dans WooCommerce

Donc, pour résumer, les avantages d'utiliser AJAX dans votre magasin sont :

Réduire la charge du serveur et la bande passante
Accélérez le processus d'achat
Améliorer l'expérience client
Réduire l'abandon de panier
Augmenter les taux de conversion

Tutoriel : WooCommerce AJAX ajouter au panier

Pour appliquer la fonction d'ajout au panier AJAX dans WooCommerce , il existe deux options :

Avec un plugin
Le coder soi-même

Voyons chaque méthode.

1) AJAX ajouter au panier avec un plugin

Si vous n'avez pas d'expérience en codage ou si vous préférez une solution simple, l'utilisation d'un plugin est un excellent choix. Téléchargez simplement notre plugin AJAX ajouter au panier WooCommerce, installez-le et le logiciel fera le reste.

Ajax ajouter au panier pour WooCommerce

AJAX ajouter au panier pour WooCommerce est l'un des meilleurs plugins pour ajouter AJAX au bouton Ajouter au panier de WooCommerce. Cet outil permet aux acheteurs d'inclure des produits uniques ou variables dans leurs paniers sans avoir à recharger le site à chaque fois. Ce qui est encore mieux, c'est qu'il fonctionne sans problème dans 99 % des thèmes WordPress et qu'il ne nécessite aucune configuration initiale. Une fois installé, il sera prêt à fonctionner.

2) Codez-le vous-même

Avez-vous des compétences en codage et préférez-vous personnaliser votre bouton d'ajout au panier WooCommerce AJAX ? Dans ce guide, nous vous montrerons comment procéder étape par étape.

A) Installer un thème enfant

La première chose à faire est de créer un thème enfant . Si vous n'en avez pas, vous pouvez utiliser un plugin. Il y en a plusieurs, alors choisissez celui que vous préférez et installez-le dans votre magasin. Pourquoi installer un thème enfant ? Car si vous personnalisez directement les fichiers du thème, la prochaine fois que vous mettrez à jour le thème, les nouveaux fichiers remplaceront vos modifications et toutes vos personnalisations seront perdues. Cependant, si vous personnalisez le thème enfant, les modifications ne seront pas annulées.

B) Inclure le fichier JavaScript (JS)

Dans le fichier functions.php du thème enfant, incluez un fichier JavaScript en utilisant le hook wp_enqueue_script . C'est l'un des crochets les plus populaires que WordPress propose pour personnaliser les sites Web. Jetons un coup d'œil au script qui inclut le fichier ajax_add_to_cart.js ci-dessous :

 fonction ql_woocommerce_ajax_add_to_cart_js() {
    if (function_exists('is_product') && is_product()) {  
       wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') . '/js/ajax_add_to_cart.js', array('jquery'),'1.0' );
    }
}
add_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');

Avec le conditionnel if (function_exists('is_product') && is_product()) à la ligne 2, vous vous assurez que le JQuery n'est appliqué que sur une page de produit.

C) Créer un fichier JS

Une fois que vous avez fait cela, créez le fichier que vous avez inclus à l'étape précédente. Allez simplement dans votre cPanel puis dans le dossier du thème enfant . Après cela, suivez la route wp_content /themes/ dossier . Là, créez un nouveau dossier dans le thème enfant appelé js , puis un fichier à l'intérieur avec le même nom que vous avez utilisé dans le hook ajax-add-to-cart.js . Gardez à l'esprit que cette étape fonctionne également même si vous utilisez un client FTP. Si votre thème enfant a déjà un dossier JS, vous pouvez l'utiliser sans en créer un nouveau.

D) Le fichier JQuery/JS

L'étape suivante consiste à travailler sur le fichier JQuery que vous avez téléchargé dans votre thème enfant. Ce fichier est vide, vous devez donc ajouter des scripts. Tout d'abord, empêchez le bouton d' ajout au panier de recharger la page avec le script suivant :

 $('.single_add_to_cart_button').on('click', function(e) { 
    e.preventDefault();
});

Veuillez noter que nous utilisons le sélecteur $('.single_add_to_cart_button') pour déclencher l'appel AJAX lorsque le bouton est cliqué. Vous devez comprendre cela car tout le script suivant ira à l'intérieur de cette fonction.

E) JQuery WooCommerce AJAX ajouter au panier sur des produits uniques

Ainsi, le script JQuery complet pour AJAX ajouter au panier sur des produits uniques est :

 jQuery(document).ready(fonction($) {
    $('.single_add_to_cart_button').on('click', function(e){ 
    e.preventDefault();
    $cebouton = $(ceci),
                $form = $thisbutton.closest('form.cart'),
                id = $cebouton.val(),
                product_qty = $form.find('input[name=quantity]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || identifiant,
                variation_id = $form.find('input[name=variation_id]').val() || 0 ;
    var données = {
            action : 'ql_woocommerce_ajax_add_to_cart',
            id_produit : id_produit,
            product_sku : '',
            quantité : product_qty,
            variation_id : variation_id,
        } ;
    $.ajax({
            tapez : 'poste',
            URL : wc_add_to_cart_params.ajax_url,
            données : données,
            beforeSend : fonction (réponse) {
                $thisbutton.removeClass('ajouté').addClass('loading');
            },
            complet : fonction (réponse) {
                $thisbutton.addClass('ajouté').removeClass('loading');
            }, 
            succès : fonction (réponse) { 
                si (response.error & response.product_url) {
                    window.location = réponse.product_url ;
                    retourner;
                } autre { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) Le script PHP

Ensuite, vous avez besoin du gestionnaire PHP. La meilleure façon est d'utiliser certains des hooks de filtre WooCommerce pour créer votre fonction d'ajout au panier . Cette fois, vous le ferez en utilisant AJAX. Copiez et collez simplement le script suivant dans le fichier functions.php du thème enfant sous le script précédent que nous avons utilisé pour inclure le fichier JS.

 add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'); 
add_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');          
fonction ql_woocommerce_ajax_add_to_cart() {  
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantité = vide($_POST['quantité']) ? 1 : wc_stock_amount($_POST['quantité']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $quantity);
    $product_status = get_post_status($product_id); 
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
            si ('oui' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $quantity), true); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } autre { 
                $données = tableau( 
                    'erreur' => vrai,
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                echo wp_send_json($data);
            }
            wp_die();
        }

C'est ça! Vous venez de créer votre bouton d'ajout au panier WooCommerce AJAX ! Mais comment savez-vous que vous avez tout fait correctement ? Vous pouvez le vérifier facilement. Lorsque vous cliquez sur le bouton Ajouter au panier , le produit doit être ajouté au panier sans recharger la page.

Conclusion

Dans l'ensemble, si vous souhaitez optimiser votre boutique, la fonction d'ajout au panier de WooCommerce AJAX est indispensable. Le moyen le plus simple de l'appliquer consiste à utiliser le plug-in AJAX add to cart WooCommerce. Cependant, si vous avez des compétences en codage, vous pouvez coder vous-même AJAX ajouter au panier avec un thème enfant et un peu de PHP comme décrit ci-dessus.

Les deux options sont excellentes, alors choisissez celle qui correspond le mieux à vos besoins et à vos compétences. Cela vous aidera à améliorer l'expérience utilisateur et à augmenter vos taux de conversion. Veuillez nous faire part de vos réflexions dans la section des commentaires ci-dessous.

Enfin, pour plus de guides sur WooCommerce, nous vous recommandons de consulter nos guides sur la façon d'ajouter des produits WooCommerce et de créer des attributs de produit par défaut dans WooCommerce.