Vous avez configuré votre boutique WooCommerce, mais les clients ne voient pas leur panier dans le menu. Ils ajoutent un produit, puis doivent chercher le lien du panier avant de pouvoir finaliser leur achat.
Une icône de panier WooCommerce résout ce problème. Elle affiche un nombre d'articles en direct qui se met à jour au fur et à mesure que les clients ajoutent des produits, directement dans l'en-tête de votre site, de sorte que le chemin vers le paiement est toujours à un clic.
Dans ce guide, je vais vous montrer deux méthodes sans code pour ajouter une icône de panier WooCommerce à votre menu, comment personnaliser son apparence et comment résoudre le problème d'une icône qui ne s'affiche pas.
Qu'est-ce qu'une icône de panier dans le menu (et pourquoi c'est utile)
Une icône de panier dans le menu est un petit panier qui se trouve dans la navigation principale de votre boutique WooCommerce et qui affiche le nombre d'articles dans le panier d'un client. Le compte se met à jour lorsqu'ils ajoutent ou suppriment des produits, et l'icône reste dans le menu pendant qu'ils parcourent différentes pages de produits.
Vous avez probablement déjà vu des icônes de panier comme celle-ci en faisant des achats sur Amazon :
En ajouter une à votre boutique fait deux choses :
- Indique aux clients ce qu'il y a dans leur panier : Le nombre d'articles et le sous-total donnent un total provisoire avant qu'ils n'atteignent la page de paiement.
- Accélère le processus de paiement : Un chemin en un clic vers le panier maintient le processus fluide, de sorte que les visiteurs sont moins susceptibles d'abandonner leur panier.
Comment ajouter une icône de panier WooCommerce à votre menu WordPress (avec décompte d'articles)
WooCommerce n'inclut pas par défaut d'icône de panier pour les menus. Vous devez soit installer un plugin WooCommerce, soit ajouter le code vous-même.
Voici deux méthodes sans code pour le faire. La première utilise SeedProd pour intégrer l'icône dans l'en-tête de votre thème. La seconde utilise un plugin gratuit si vous ne souhaitez pas modifier votre thème actuel.
Méthode 1 : Ajouter une icône de panier WooCommerce avec SeedProd (sans code)
SeedProd est un constructeur de sites web par glisser-déposer pour WordPress qui vous permet de créer une boutique WooCommerce personnalisée sans toucher au code, et ses blocs WooCommerce dédiés incluent un bloc Panier de menu pour ajouter une icône de panier à votre en-tête.
J'utilise SeedProd pour construire mon propre site, et le bloc Panier de menu est celui que j'utilise ici car il gère le nombre d'articles, le sous-total et le style en un seul endroit. Avec plus de 300 modèles pour commencer, vous pouvez avoir un en-tête construit dans l'après-midi.
Suivez les étapes ci-dessous pour ajouter une icône de panier WooCommerce à votre menu avec SeedProd.
Étape 1. Installer SeedProd
Tout d'abord, téléchargez une copie du plugin constructeur de site SeedProd.
Après avoir téléchargé SeedProd, installez et activez le plugin sur votre site web WordPress. Vous pouvez suivre ce guide pour installer un plugin WordPress si vous avez besoin d'aide.
Ensuite, allez dans SeedProd » Paramètres depuis votre menu d'administration WordPress. C'est là que vous entrez votre clé de licence SeedProd pour débloquer les fonctionnalités Pro.
Vous pouvez trouver votre clé de licence en vous rendant sur le site Web de SeedProd et en vous connectant à votre compte. De là, copiez votre clé de licence dans la section « Téléchargements ».
Collez maintenant votre clé dans le champ de texte et cliquez sur le bouton Vérifier la clé.
Étape 2. Créer un nouveau thème WooCommerce
Ensuite, allez à la page SeedProd » Theme Builder. C'est ici que vous créez un thème personnalisé pour votre site Web WooCommerce.
Je recommande cette option car elle remplace votre thème WordPress existant par un thème rapide et léger que vous pouvez modifier par glisser-déposer. Elle vous donne également le bloc Panier de menu dont vous avez besoin pour l'icône du panier.
Il existe deux façons de créer un thème avec le constructeur de thèmes de SeedProd :
- Thème pré-construit : importez un thème WooCommerce prêt à l'emploi qui crée toutes les pages dont vous avez besoin pour votre boutique en ligne.
- Éléments de thème individuels : construisez chaque partie de votre boutique WooCommerce pièce par pièce.
J'utiliserai la méthode du thème pré-construit ici car elle effectue la configuration pour vous. Cliquez sur le bouton Thèmes pour voir la liste des kits de thèmes WordPress préfabriqués.
Chaque thème est adapté aux mobiles et facile à modifier avec le constructeur de pages par glisser-déposer de SeedProd.
Survolez n'importe quel thème et cliquez sur l'icône en forme de coche pour l'importer.
J'utiliserai le thème Sportswear Store pour ce tutoriel.
Après l'importation, vous verrez tous les modèles qui composent la conception de votre site Web WooCommerce. Vous pouvez modifier chacun d'eux pour qu'il corresponde à votre boutique.
Ensuite, je vais vous montrer comment personnaliser le modèle « Navigation de l'en-tête », où se trouve l'icône du panier.
Étape 3. Personnaliser votre menu de navigation WooCommerce
Beaucoup de thèmes pré-faits de SeedProd incluent déjà une icône de panier d'achat WooCommerce dans la barre de navigation. Ouvrez le modèle de navigation de l'en-tête pour le vérifier et l'ajuster.
Trouvez le modèle « Navigation de l'en-tête » dans votre liste de modèles et cliquez sur le lien Modifier la conception pour l'ouvrir dans le constructeur visuel.
La disposition de votre en-tête s'affiche à droite. À gauche se trouvent les blocs et les sections que vous pouvez ajouter.
Pour ajouter un bloc, faites-le glisser de la gauche et déposez-le sur votre conception.
L'en-tête contient déjà trois blocs :
- Image du logo du site Web
- Menu de navigation WordPress
- Bloc Panier de menu
Le bloc Panier de menu affiche l'icône du panier, le nombre d'articles et le sous-total. Cliquez dessus pour ouvrir les paramètres du Panier de menu, où vous pouvez contrôler son apparence et son comportement.
Depuis le panneau des paramètres, vous pouvez :
- Masquer le panier lorsqu'il est vide : affichez l'icône uniquement une fois qu'un client a ajouté un article.
- Afficher ou masquer le sous-total : affichez le total courant à côté du nombre, ou seulement le nombre.
- Définir l'alignement : positionnez le panier à gauche, au centre ou à droite dans l'en-tête.
- Ajuster les couleurs, l'espacement et l'affichage mobile : ouvrez l'onglet Avancé pour modifier la couleur du panier et de l'insigne, l'espacement et si l'insigne s'affiche sur mobile.
Lorsque vous êtes satisfait de l'apparence de l'icône du panier, cliquez sur le bouton vert Enregistrer.
Étape 4. Personnalisez votre thème WooCommerce
Vous pouvez maintenant modifier les autres modèles de votre thème WooCommerce. Le processus est le même que pour l'en-tête. Si vous avez besoin d'aide, voici quelques guides :
- Comment personnaliser votre page de boutique WooCommerce
- Comment personnaliser les pages de catégories de produits WooCommerce
- Comment afficher les produits en vedette dans WooCommerce
Étape 5. Activer votre thème WooCommerce SeedProd
Après avoir personnalisé votre thème, vous êtes prêt à le mettre en ligne.
Allez dans SeedProd » Theme Builder. Dans le coin supérieur droit, basculez le commutateur « Activer le thème SeedProd » sur la position Oui.
Prévisualisez maintenant l'icône de votre panier dans le menu pour voir à quoi elle ressemble sur votre boutique en ligne.
Lorsque les clients cliquent sur l'icône du panier, ils accèdent directement à la page du panier. Vous pouvez également personnaliser votre panier WooCommerce avec SeedProd.
Voici un exemple d'icône de panier de menu de style Amazon que nous avons également créée avec SeedProd :
Comment personnaliser l'icône du panier
Une icône de panier par défaut fonctionne, mais la plupart des boutiques veulent qu'elle corresponde à leur image de marque. Voici ce que vous pouvez modifier avec les paramètres avancés du bloc Panier de menu SeedProd, et ce qu'il faut faire si vous utilisez un autre thème.
- Afficher ou masquer le badge du nombre d'articles : le petit nombre sur l'icône peut rester visible en permanence ou n'apparaître qu'une fois que le panier contient des articles.
- Changer la couleur et la taille : faites correspondre l'icône et le badge à vos couleurs de marque et ajustez leur taille dans l'onglet Avancé.
- Remplacer l'icône par une autre : si vous n'utilisez pas SeedProd, la plupart des plugins d'icônes de panier vous permettent de choisir une icône différente ou de la remplacer par du texte comme « Panier » ou « Caddie » dans leurs paramètres.
Lorsque j'ai configuré cela sur ma propre boutique, masquer le badge jusqu'à ce que le panier contienne des articles a permis de garder l'en-tête plus épuré sans perdre le compte lorsqu'il était important.
Méthode 2 : Ajouter une icône de panier WooCommerce au menu avec un plugin gratuit
Si vous ne souhaitez pas modifier votre thème WordPress actuel, utilisez plutôt un plugin gratuit. Il ajoute une icône de panier à votre menu existant sans toucher aux fichiers de votre thème.
Le plugin que j'utiliserai s'appelle WooCommerce Menu Cart. Il fonctionne avec WooCommerce, Easy Digital Downloads, et de nombreuses autres plateformes eCommerce WordPress.
Étape 1. Installer le plugin WooCommerce Menu Cart
Tout d'abord, allez dans Plugins » Ajouter depuis votre tableau de bord WordPress et tapez « WooCommerce Menu Cart » dans la zone de recherche.
Ensuite, cliquez sur le bouton Installer, puis sur Activer pour rendre le plugin opérationnel.
Étape 2. Configurer l'icône du panier
Après avoir installé le plugin, allez dans WooCommerce » Configuration du menu panier depuis votre panneau d'administration WordPress. Ici, vous choisissez votre plateforme eCommerce et sélectionnez dans quel menu l'icône du panier apparaît.
Configurez les paramètres de votre icône de panier, puis cliquez sur le bouton Enregistrer les modifications.
Visitez maintenant votre site pour voir l'icône de votre panier WooCommerce dans le menu.
Pourquoi votre icône de panier WooCommerce ne s'affiche pas
Si vous avez ajouté une icône de panier mais qu'elle n'apparaît pas dans votre menu, la cause est généralement l'une des quelques raisons courantes. Examinez-les avant de modifier quoi que ce soit d'autre.
- Votre thème n'a pas d'icône de panier native : la plupart des thèmes WordPress standard n'en ajoutent pas pour WooCommerce, c'est pourquoi vous avez besoin de SeedProd ou d'un plugin en premier lieu.
- Le panier est configuré pour se masquer lorsqu'il est vide : si vous avez activé « masquer lorsqu'il est vide », l'icône n'apparaît qu'après avoir ajouté un produit au panier. Ajoutez un article et actualisez pour vérifier.
- La mise en cache affiche une ancienne version : un plugin de mise en cache ou la mise en cache de votre hébergeur peut servir la page d'avant l'ajout de l'icône. Videz votre cache et rechargez.
- Vous utilisez un thème bloc : si votre thème utilise l'éditeur de site WordPress, vous pouvez ajouter un bloc Panier ou Mini-Panier natif directement dans le modèle d'en-tête, sans plugin. Allez dans Apparence » Éditeur, ouvrez votre modèle d'en-tête et ajoutez le bloc Mini-Panier.
Si l'icône ne s'affiche toujours pas après cela, il est utile de vérifier si le lien du panier fonctionne lui-même, car une page de panier défectueuse peut empêcher l'icône de s'afficher.
FAQ sur les icônes de panier WooCommerce dans les menus
Comment ajouter une icône de panier au menu WordPress ?
Vous ajoutez une icône de panier avec un plugin ou un constructeur de site, car WordPress et WooCommerce n'en incluent pas par défaut. Avec SeedProd, vous déposez le bloc Menu Panier dans votre modèle d'en-tête.
Avec un plugin gratuit comme WooCommerce Menu Cart, vous l'installez et choisissez à quel menu l'icône s'attache. Les deux méthodes ne nécessitent aucun code.
Comment ajouter l'icône du panier à l'en-tête dans WooCommerce ?
Ajoutez l'icône du panier à votre modèle d'en-tête, pas au contenu de la page. Dans le constructeur de thème de SeedProd, modifiez le modèle « En-tête de navigation » et déposez le bloc Menu Panier.
Si vous utilisez un thème bloc, ouvrez l'éditeur de site, modifiez votre modèle d'en-tête et ajoutez le bloc Mini-Panier au même endroit.
Pourquoi mon icône de panier WooCommerce ne s'affiche-t-elle pas dans le menu ?
La raison la plus courante est que le panier est configuré pour se cacher lorsqu'il est vide, il n'apparaît donc qu'après qu'un client a ajouté un article. La mise en cache peut également servir une ancienne version de la page, alors videz votre cache et rechargez.
Si aucune de ces solutions ne fonctionne, votre thème peut ne pas prendre en charge une icône de panier native, ce qui signifie que vous avez besoin de SeedProd ou d'un plugin pour en ajouter une.
Comment afficher le nombre d'articles sur l'icône du panier WooCommerce ?
Le nombre d'articles est le petit badge sur l'icône du panier, et la plupart des outils l'affichent par défaut. Dans les paramètres du Menu Panier de SeedProd, le nombre se met à jour automatiquement lorsque les clients ajoutent des produits.
Si vous ne le voyez pas, ouvrez l'onglet Avancé et assurez-vous que le badge n'est pas masqué, y compris sur mobile.
Ajoutez votre icône de panier WooCommerce dès aujourd'hui
Une icône de panier avec un nombre d'articles en direct offre aux clients un chemin clair vers le paiement, ce qui signifie plus de ventes conclues pour vous. Vous pouvez en créer une dès maintenant avec le constructeur glisser-déposer de SeedProd, sans code.
Commencez avec SeedProd et ajoutez votre icône de panier d'achat WooCommerce en quelques minutes.
Ensuite, vous voudrez peut-être consulter ces guides pour continuer à personnaliser votre boutique WooCommerce :
- Comment personnaliser l'onglet Informations supplémentaires de WooCommerce
- Comment ajouter un bouton « Voir le panier » dans WooCommerce
- Comment changer le titre de la page boutique dans WooCommerce
- Comment créer une superbe galerie d'images de produits dans WooCommerce
- Comment ajouter des évaluations par étoiles aux pages produits WooCommerce
- Comment afficher les produits liés dans WooCommerce
- Comment afficher les catégories et les tags de produits dans WooCommerce
- Comment obtenir et afficher les descriptions de produits dans WooCommerce
- Comment masquer les produits hors stock dans WooCommerce
Merci de votre lecture ! Nous serions ravis d’entendre vos réflexions, alors n’hésitez pas à participer à la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
