Quantité et contenu du produit du panier d'achat WooCommerce de la méthode d'affichage de la mise à jour en temps réel

Dans un site de commerce électronique, la page du panier est l'une des parties essentielles où les clients peuvent consulter les informations relatives à leur commande. Par défaut, la pageWooCommerce Le panier d'achat n'apparaît pas dans la barre de menu, ce qui n'est peut-être pas assez intuitif pour la plupart des marchands. C'est pourquoi l'optimisation et la personnalisation de la fonctionnalité du panier d'achat est un outil important pour améliorer les taux de conversion.

Vérifier si WooCommerce est actif

Avant de mettre en œuvre une mise à jour dynamique du panier d'achat, il faut d'abord s'assurer que l'élément WooCommerce Si WooCommerce a été correctement activé. Si WooCommerce n'est pas installé ou activé, l'appel à la fonction de panier peut générer une erreur. Le code suivant est utilisé pour détecter si WooCommerce est disponible et affiche la quantité actuelle du produit et le montant total sur le bouton du panier :

<?php global $woocommerce; ?>
<a class="your-class-name" href="/fr/</?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('Cart View', 'woothemes'); ?>">
cart-&gt;cart_contents_count, 'woothemes'), ?
 $woocommerce-&gt;cart-&gt;cart_contents_count); ? &gt; -
cart-&gt;get_cart_total() ; ? &gt;
</a>

Ce code peut être placé dans n'importe quel fichier de modèle du thème et il est recommandé de le placer à un endroit approprié, par exemple dans la zone de la barre de navigation, afin que les clients puissent voir le contenu du panier à tout moment.

Ajouter le code du panier d'achat au fichier header.php

Pour que les informations relatives au panier d'achat apparaissent dans la barre de navigation, il est nécessaire de modifier le paramètre header.php qui insère le code du bouton du panier d'achat dans la structure du menu, par exemple :

<header id="masthead" class="site-header" role="banner">
    
    <div class="navigation-top">
        <div class="wrap">
            <?php get_template_part('template-parts/navigation/navigation', 'top'); ?>
            <!-- 购物车开始 -->
            <?php global $woocommerce; ?>
            <a class="your-class-name" href="/fr/</?php echo $woocommerce->cart->get_cart_url(); ?>"
               title="<?php _e('Cart View', 'woothemes'); ?>">
                cart-&gt;cart_contents_count, 'woothemes'), ?
                $woocommerce-&gt;cart-&gt;cart_contents_count); ? &gt; -
                cart-&gt;get_cart_total() ; ? &gt;
            </a>
            <!-- 购物车结束 -->
        </div>
    </div>
    <?php endif; ?>
</header>

Après avoir enregistré le fichier, rafraîchissez la page d'accueil pour voir apparaître le fichier WooCommerce Les informations relatives au panier d'achat ont été ajoutées avec succès à la barre de navigation.

Tester l'affichage de la quantité et du montant total du panier d'achat

Une fois le code ajouté, mettez la page à jour et observez si le panier affiche correctement la quantité et le montant. Si tout est correct, le panier affichera le message suivant.

Ajouter des produits au panier

Essayez d'ajouter quelques articles sur la page d'accueil et observez la mise à jour du panier. Par défaut, les informations du panier ne sont pas mises à jour automatiquement et ne changent qu'après actualisation de la page.

régler (un litige) AJAX Problèmes de mise à jour du panier d'achat

par défaut (réglage) WooCommerce Le panier d'achat n'est pas mis à jour automatiquement et vous devez rafraîchir manuellement la page pour voir les changements. Pour remédier à ce problème, ajoutez le code suivant au fichier functions.php pour permettre au panier d'achat de se mettre à jour dynamiquement au fur et à mesure que des articles sont ajoutés :

add_filter('add_to_cart_custom_fragments', 'woocommerce_header_add_to_cart_custom_fragment') ;
function woocommerce_header_add_to_cart_custom_fragment($cart_fragments) {
    global $woocommerce ; function
    ob_start() ; ?
    ? >
    <a class="cart-contents" href="/fr/</?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View cart', 'woothemes'); ?>">
        cart-&gt;cart_contents_count, 'woothemes'), $woocommerce-&gt;cart-&gt;cart _contents_count); ? &gt; - cart-&gt;get_cart_total() ; ? &gt;
    </a>
    <?php
    $cart_fragments['a.cart-contents'] = ob_get_clean();
    return $cart_fragments;
}

Après avoir enregistré le fichier, testez à nouveau le panier d'achat. Lors de l'ajout d'articles, la quantité et le montant total du panier seront mis à jour automatiquement, sans qu'il soit nécessaire de rafraîchir la page manuellement.

résumés

Cet article décrit le WooCommerce Méthodes d'optimisation de base pour les paniers d'achat, y compris l'affichage des informations sur le panier dans la barre de navigation, la mise à jour dynamique du contenu du panier et l'utilisation de la fonction AJAX Laissez le panier d'achat changer en temps réel. Cette approche ne nécessite pas de plugins supplémentaires et peut être réalisée en ajoutant du code directement dans les fichiers du thème. Si vous souhaitez optimiser davantage la fonctionnalité du panier d'achat, par exemple en ajoutant des offres à rebours, des produits recommandés, etc. JavaScript Effectuer davantage de conception d'interaction.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.