Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


On en a parlé il y a quelques semaines comment ajouter la fonction de panier par programme pour augmenter vos ventes. Aujourd’hui, nous examinons cela comment implémenter AJAX dans le Ajouter au chariot Bouton dans les produits WooCommerce. Cela améliore l’expérience utilisateur et l’ensemble du processus de vente, ce qui vous permet également d’optimiser votre entreprise Augmentez vos ventes.

Si vous souhaitez gérer une entreprise prospère ces jours-ci, il est important que votre site mette à jour dynamiquement le panier. Sinon, la page se rechargera à chaque fois qu’un utilisateur ajoute un produit au panier, ce qui ralentira considérablement le processus d’achat et augmentera la probabilité que les clients descendent. Par conséquent Refondez votre entreprise avec le WooCommerce AJAX Ajouter au chariot La fonction est un must 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

En résumé, les avantages de l’utilisation d’AJAX dans votre entreprise sont les suivants:

  • Réduisez la charge du serveur et la bande passante
  • Accélérez le processus d’achat
  • Améliorez l’expérience client
  • Réduisez la sortie de la voiture
  • Augmenter les taux de conversion

Tutoriel: Ajouter WooCommerce AJAX au panier

Pour appliquer ça AJAX Ajouter au chariot Fonction dans WooCommerce Il y a deux possibilités:

  1. Avec un plugin
  2. Codez-le vous-même

Jetons un coup d’œil à chaque méthode.

1) Ajoutez AJAX au panier avec un plugin

Si vous êtes inexpérimenté en codage ou préférez une solution simple, utiliser un plugin est un excellent choix. Facile Téléchargez notre AJAX Ajouter au chariot Plugin WooCommerce, installez-le et laissez le logiciel faire le reste.

Ajouter Ajax au panier pour WooCommerce

Ajouter AJAX au panier pour WooCommerce est l’un des meilleurs plugins pour ajouter AJAX à WooCommerce Ajouter au chariot Bouton. Avec cet outil, les clients peuvent ajouter des produits individuels ou variables à leur panier sans avoir à recharger le site à chaque fois. Ce qui est encore mieux, c’est qu’il fonctionne correctement dans 99% des thèmes WordPress et ne nécessite aucune configuration initiale. Une fois que vous l’avez installé, vous êtes prêt à partir.

2) Codez-le vous-même

Vous avez des connaissances en programmation et préférez personnaliser votre WooCommerce AJAX? Ajouter au chariot Bouton? Dans ce guide, nous vous montrerons comment procéder étape par étape.

A) Installez un thème enfant

La première chose à faire est a … créer Thème des enfants. Si vous n’en avez pas, vous pouvez utiliser un plugin. Il y en a plusieurs Choisissez simplement celui que vous aimez le plus et installez-le dans votre magasin. Pourquoi devriez-vous installer un sous-thème? Si vous personnalisez les fichiers du thème sur place la prochaine fois que vous mettez à jour le thème, les nouveaux fichiers remplaceront vos modifications et toutes vos personnalisations seront perdues. Toutefois, si vous personnalisez le sujet enfant, les modifications ne seront pas écrasées.

B) Ajouter un fichier JavaScript (JS)

En faisant functions.php Fichier de sous-rubrique, ajoutez un fichier JavaScript en modifiant le wp_enqueue_script Accrocher. C’est l’un des plus crochet populaire que WordPress propose pour personnaliser les sites Web. Jetons un coup d’œil au script qui contient cela ajax_add_to_cart.js Fichier ci-dessous:

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

Sous condition if (function_exists (‘is_product’) && is_product ()) Dans la ligne 2, assurez-vous que JQuery n’est appliqué qu’à une seule page de produit.

C) Créez un fichier JS

Créez ensuite le fichier que vous avez enregistré à l’étape précédente. Allez dans le vôtre cPanel puis au dossier de sous-thèmes. Puis suivez l’itinéraire wp_content / thème / dossier. Là, créez un nouveau dossier dans le sous-sujet avec le nom jspuis un fichier avec le même nom que celui que vous avez utilisé dans le hook ajax-add-to-cart.js. Notez que cette étape fonctionnera également si vous utilisez un client FTP. Si votre sujet 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 sujet enfant. Ce fichier est vide, vous devrez donc ajouter des scripts. Tout d’abord, évitez le Ajouter au chariot Bouton de rechargement de page avec le script suivant:

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

Veuillez noter que nous utilisons le $ (‘. single_add_to_cart_button’) Choix de déclencher l’appel AJAX lorsque le bouton est cliqué. Vous devez comprendre cela car tous les scripts suivants sont intégrés à cette fonctionnalité.

E) Ajouter JQuery WooCommerce AJAX au panier pour les produits individuels

Ainsi, le script JQuery complet pour AJAX dans le panier pour les produits individuels est:

jQuery(document).ready(function($) {
    $('.single_add_to_cart_button').on('click', function(e){ 
    e.preventDefault();
    $thisbutton = $(this),
                $form = $thisbutton.closest('form.cart'),
                id = $thisbutton.val(),
                product_qty = $form.find('input[name=quantity]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || id,
                variation_id = $form.find('input[name=variation_id]').val() || 0;
    var data = {
            action: 'ql_woocommerce_ajax_add_to_cart',
            product_id: product_id,
            product_sku: '',
            quantity: product_qty,
            variation_id: variation_id,
        };
    $.ajax({
            type: 'post',
            url: wc_add_to_cart_params.ajax_url,
            data: data,
            beforeSend: function (response) {
                $thisbutton.removeClass('added').addClass('loading');
            },
            complete: function (response) {
                $thisbutton.addClass('added').removeClass('loading');
            }, 
            success: function (response) { 
                if (response.error & response.product_url) {
                    window.location = response.product_url;
                    return;
                } else { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) Le script PHP

Après cela, vous avez besoin du gestionnaire PHP. Le meilleur moyen est d’utiliser certains des crochets de filtre WooCommerce pour créer le vôtre Ajouter au chariot Une fonction. Cette fois, vous le faites avec AJAX. Copiez et collez simplement le script ci-dessous dans celui-ci functions.php Fichier de rubrique enfant sous le script précédent que nous utilisions 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');          
function ql_woocommerce_ajax_add_to_cart() {  
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
    $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);
            if ('yes' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $quantity), true); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } else { 
                $data = array( 
                    'error' => true,
                    '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! Tu viens de faire le tien Ajouter WooCommerce AJAX au panier bouton! Mais comment savez-vous que vous avez tout bien fait? Vous pouvez le vérifier facilement. Si vous cliquez sur Ajouter au chariot Cliquez sur le bouton pour ajouter le produit au panier sans recharger la page.

Conclusion

Dans l’ensemble, si vous souhaitez optimiser votre boutique, le WooCommerce AJAX Ajouter au chariot La fonction est un must. Le moyen le plus simple de l’appliquer est d’utiliser AJAX Ajouter au chariot Plugin WooCommerce. Cependant, si vous avez des compétences en programmation, vous pouvez code AJAX Ajouter au chariot Vous-même avec un sous-sujet 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. S’il vous plaît laissez-nous savoir ce que vous pensez dans la section commentaires ci-dessous.

Vous trouverez de plus amples instructions sur WooCommerce dans nos instructions sous comment ajouter des produits WooCommerce et Comment créer des attributs de produit standard dans WooCommerce.





Source link

Recent Posts