Un guide détaillé pour afficher les totaux des articles du panier dans WooCommerce en utilisant Elementor.

Comment puis-je afficher le nombre total d'articles dans mon panier WooCommerce en utilisant l'éditeur Elementor dans Wordpress ? Nous allons utiliser l'élément Elementor Icon List, mais cette méthode fonctionnera également pour la plupart des autres éléments.

Voici l'effet que nous essayons d'obtenir :

Avec ce tutoriel, vous apprendrez à afficher le nombre total d'articles dans votre panier d'achat et la quantité sera mise à jour automatiquement lorsque des articles sont ajoutés ou supprimés.

Tout d'abord, ajoutez l'extrait de code WooCommerce Shopping Cart Total short.

Pour commencer, le code suivant doit être ajouté au nouvel extrait de code PHP. Vous pouvez soit utiliser le plugin Code Snippets, soit l'ajouter directement à la section functions.php Documentation.

Pour localiser et modifier le functions.php vous pouvez suivre les étapes ci-dessous :

1. Se connecter au tableau de bord de WordPress.
2. Naviguez vers "Apparence" > "Editeur de fichier de thème"..
   • Dans le menu de gauche, cliquez sur "Apparence", puis sélectionnez "Editeur de fichier de thème".

3. Sélectionner un sous-thème.
   • Sélectionnez votre thème enfant dans le menu déroulant "Sélectionner un thème à modifier" dans le coin supérieur droit.

4. localiser functions.php papiers.
   • Dans la liste des fichiers à droite, recherchez et cliquez sur le fichier functions.php Documentation.

existent functions.php Ajoutez le code à la fin du fichier et cliquez sur "Documents mis à jour"pour enregistrer les modifications.

// Affiche le nombre d'articles dans le panier
function display_cart_count() {
    $cart_count = WC()->cart->get_cart_contents_count() ;
    $cart_url = wc_get_cart_url() ; ?
    ? >
    <a class="menu-item cart-contents" href="/fr/</?php echo $cart_url; ?>" title="Voir votre panier d&#039;achat">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
}
// 使用短代码
add_shortcode('cart_count', 'display_cart_count');
// Ajax 刷新购物车商品数量
function refresh_cart_count($fragments) {
    ob_start();
    $cart_count = WC()->cart->get_cart_contents_count();
    ?>
    <a class="menu-item cart-contents" href="/fr/</?php echo wc_get_cart_url(); ?>" title="Voir votre panier d&#039;achat">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
    $fragments['a.cart-contents'] = ob_get_clean();
    return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'refresh_cart_count');
// Affiche le nombre d'articles dans le panier
function display_cart_count() {
    $cart_count = WC()->cart->get_cart_contents_count() ;
    $cart_url = wc_get_cart_url() ; ?
    ? >
    <a class="menu-item cart-contents" href="/fr/</?php echo $cart_url; ?>" title="Voir votre panier d&#039;achat">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
}

// 使用短代码
add_shortcode('cart_count', 'display_cart_count');

// Ajax 刷新购物车商品数量
function refresh_cart_count($fragments) {
    ob_start();
    $cart_count = WC()->cart->get_cart_contents_count();
    ?>
    <a class="menu-item cart-contents" href="/fr/</?php echo wc_get_cart_url(); ?>" title="Voir votre panier d&#039;achat">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
    $fragments['a.cart-contents'] = ob_get_clean();
    return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'refresh_cart_count');
// Affiche le nombre d'articles dans le panier
function display_cart_count() {
    $cart_count = WC()-&gt;cart-&gt;get_cart_contents_count() ;
    $cart_url = wc_get_cart_url() ; ?
    ? &gt;
    <a class="menu-item cart-contents" href="/fr/</?php echo $cart_url; ?>" title="Voir votre panier d&#039;achat">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
}

// 使用短代码
add_shortcode('cart_count', 'display_cart_count');

// Ajax 刷新购物车商品数量
function refresh_cart_count($fragments) {
    ob_start();
    $cart_count = WC()->cart->get_cart_contents_count();
    ?>
    <a class="menu-item cart-contents" href="/fr/</?php echo wc_get_cart_url(); ?>" title="Voir votre panier d&#039;achat">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
    $fragments['a.cart-contents'] = ob_get_clean();
    return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'refresh_cart_count');

Ensuite, allez dans le modèle de titre d'Elementor.

Ouvrez le modèle d'en-tête Elementor (ou tout autre emplacement) où vous souhaitez afficher le nombre total d'articles dans votre panier WooCommerce et ajoutez un élément de liste d'icônes. Suivez les étapes ci-dessous :

1. Naviguer vers le modèle: :
   • Dans le menu de gauche, cliquez sur "Modèles".
   • Sélectionnez ensuite "Theme Builder" (ou "Theme Builder").

2. Sélectionnez le modèle à modifier: :
   • Sur la page Theme Builder, vous verrez tous les modèles tels que l'en-tête, le pied de page, l'article unique, la page d'archive, etc.
   • Pour modifier le modèle d'en-tête, recherchez et cliquez sur le modèle "En-tête" (ou "Header").

3. Modifier le modèle: :
   • Trouvez le modèle de titre que vous souhaitez modifier et cliquez sur le bouton "Editer avec Elementor" (ou "Editer avec Elementor").
4. Ajout d'un élément de liste d'icônes: :
   • Dans l'éditeur Elementor, localisez l'élément "Icon List" (ou "Icon List") dans le panneau de gauche.
   • Faites glisser l'élément Icon List à l'endroit où vous souhaitez afficher le nombre total d'articles dans votre panier WooCommerce.

5. Configurer la liste des icônes: :

Dans la liste des icônes, sélectionnez l'un des éléments de l'icône et cliquez sur l'icône pour sélectionner l'icône du panier.

Dans la zone de texte de cet élément, entrez ce qui suit :

[cart_item_count]
[cart_item_count]
[cart_item_count]

6. Sauvegarde et mise à jour: :
   • Une fois la configuration terminée, cliquez sur le bas de la page "mettre à jour"pour enregistrer les modifications.

le stylisme

Rendons-le un peu plus joli, sinon il ressemblera à ceci :

Ajout d'une feuille de style CSS personnalisée: :

• Sélectionnez l'élément de la liste d'icônes.
• Dans le panneau de gauche, cliquez sur "niveau élevé"Onglet.
• Trouvez et cliquez sur la section "Customise CSS".
• Ajoutez le code CSS suivant à la boîte de saisie CSS personnalisée :

.elementor-icon-list-item .cart-contents {
    position : relative ;
    display : inline-block ;
}
.elementor-icon-list-item .cart-contents-count {
    position : absolute ; top : -10px ; }
    top : -10px ;
    right : -10px ; }
    background : red ; colour : white ; }
    background : red ; colour : white ;
    border-radius : 50% ; padding : 2px 6px ;
    padding : 2px 6px ; font-size : 12px ; font-size : 6px
    font-size : 12px ; }
}
.elementor-icon-list-item .cart-contents {
    position : relative ;
    display : inline-block ;
}
.elementor-icon-list-item .cart-contents-count {
    position : absolute ; top : -10px ; }
    top : -10px ;
    right : -10px ; }
    background : red ; colour : white ; }
    background : red ; colour : white ;
    border-radius : 50% ; padding : 2px 6px ;
    padding : 2px 6px ; font-size : 12px ; font-size : 6px
    font-size : 12px ; }
}
.elementor-icon-list-item .cart-contents {
    position : relative ;
    display : inline-block ;
}
.elementor-icon-list-item .cart-contents-count {
    position : absolute ; top : -10px ; }
    top : -10px ;
    right : -10px ; }
    background : red ; colour : white ; }
    background : red ; colour : white ;
    border-radius : 50% ; padding : 2px 6px ;
    padding : 2px 6px ; font-size : 12px ; font-size : 6px
    font-size : 12px ; }
}

Vous verrez cette section deux fois dans le CSS :

:nth-child(3)
:nth-child(3)
:nth-child(3)

Ajustez les deux pour qu'ils correspondent à vos propres icônes.

Par exemple, si l'icône de votre panier d'achat est la première dans la liste des icônes, changez-la en:nth-child(1)plutôt que:nth-child(3).

Le reste du CSS, ajusté selon les besoins pour positionner et styliser le compte.

Résumé.

En ajoutant des extraits de code PHP personnalisés et en les intégrant dans la section functions.php pour créer un shortcode permettant d'afficher le nombre d'articles du panier. Il montre également comment ajouter un élément de liste d'icônes au modèle d'en-tête Elementor et utiliser ce shortcode pour afficher le nombre total d'articles du panier sur la page. Enfin, utilisez l'icône Elementor pour afficher le nombre d'articles dans votre panier WooCommerce en temps réel ! Une meilleure expérience d'achat pour les utilisateurs.