Voulez-vous ajouter une icône de panier WooCommerce dans les barres de menu ?
L'ajout d'une icône de panier WooCommerce dans votre menu aide les acheteurs à visualiser leur panier et à finaliser leur achat plus rapidement, surtout lorsqu'il inclut un nombre d'articles en temps réel. C'est l'un des moyens les plus simples d'améliorer l'expérience d'achat et de réduire l'abandon de panier.
Lorsque vous gérez une boutique en ligne, créer la meilleure expérience utilisateur est crucial. Si vous ne répondez pas aux besoins des acheteurs, ils quitteront votre site pour une alternative meilleure et plus conviviale.
Pour faciliter les achats dans votre boutique, vous pouvez ajouter une icône de panier à votre menu WooCommerce avec un décompte d'articles. Ainsi, les acheteurs peuvent voir le contenu de leur panier et finaliser leur achat quand ils le souhaitent.
Cet article vous montrera comment ajouter une icône de panier WooCommerce dans les menus, étape par étape.
Vous avez probablement déjà vu des icônes de panier comme celle-ci en achetant sur Amazon :
L'icône reste dans le menu de navigation même lorsque vous cliquez sur différentes pages de produits.
Pourquoi ajouter une icône de panier WooCommerce dans le menu ?
L'avantage principal d'ajouter des icônes de décompte de panier à votre menu de navigation est qu'elles aident les acheteurs à voir combien de produits ils ajoutent au panier. De plus, cela leur donne une idée du coût des articles avant de se diriger vers la page de paiement.
De plus, les icônes de panier dans le menu offrent aux utilisateurs un moyen rapide et facile d'accéder à la page du panier. Par conséquent, le processus de paiement est plus fluide, ce qui rend plus probable que les visiteurs n'abandonnent pas leur panier.
Comment ajouter une icône de panier WooCommerce à votre menu WordPress (avec décompte d'articles)
WooCommerce n'inclut pas d'icône de panier par défaut pour les menus. Au lieu de cela, vous devrez soit installer un plugin WooCommerce, soit coder cette fonctionnalité à partir de zéro.
Si écrire du code vous semble effrayant, ne vous inquiétez pas. Voici 2 façons super faciles et sans code d'ajouter une icône de panier WooCommerce à votre menu.
Méthode 1 : Ajouter une icône de panier WooCommerce au menu avec SeedProd (sans code)
La première méthode consiste à utiliser un puissant plugin WordPress pour personnaliser votre boutique WooCommerce.
SeedProd est le meilleur constructeur de sites web pour WordPress, avec plus d'un million d'utilisateurs. Il vous permet de créer des thèmes WordPress personnalisés, des sites web WooCommerce et des pages de destination à forte conversion sans code.
Avec plus de 200 modèles prédéfinis, il est facile de commencer. Vous pouvez personnaliser n'importe quelle mise en page avec le constructeur visuel par glisser-déposer et des blocs et sections réactifs.
Particulièrement notables sont les blocs WooCommerce dédiés. Ils vous permettent de personnaliser chaque partie de votre site WooCommerce en quelques clics seulement.
Suivez les étapes ci-dessous pour ajouter une icône de panier WooCommerce aux menus avec SeedProd.
Étape 1. Installer le constructeur de site SeedProd
Tout d'abord, téléchargez une copie du plugin constructeur de site SeedProd.
Remarque : il existe une version gratuite de SeedProd que vous pouvez utiliser. Cependant, nous utiliserons le plan SeedProd Elite pour les fonctionnalités WooCommerce dont nous avons besoin.
Après avoir téléchargé SeedProd, vous devrez installer et activer le plugin sur votre site 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 pouvez entrer votre clé de licence SeedProd et débloquer les fonctionnalités de votre plugin Pro.
Vous pouvez trouver votre clé de licence en allant sur le site SeedProd et en vous connectant à votre compte. De là, copiez votre clé de licence depuis 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
L'étape suivante consiste à aller sur la page SeedProd » Constructeur de thèmes . C'est là que vous pouvez créer un nouveau thème personnalisé pour votre site WooCommerce.
Nous recommandons cette option car elle remplacera votre thème WordPress existant par un thème rapide et léger que vous pouvez personnaliser facilement par glisser-déposer. Cela signifie également que vous n'aurez pas besoin de créer de thème enfant séparé ou d'installer des plugins WordPress supplémentaires.
Il y a 2 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 automatiquement toutes les pages dont vous avez besoin pour votre boutique en ligne.
- Parties de thème individuelles : construisez les différentes parties de votre boutique WooCommerce individuellement.
Nous utiliserons la méthode du thème pré-construit pour ce guide car elle fait tout automatiquement pour vous. Cliquez sur le bouton Thèmes pour voir une liste de thèmes WordPress et WooCommerce pré-faits.
Chaque thème est 100 % adapté aux mobiles et facile à modifier avec le constructeur de pages de SeedProd.
Survolez n'importe quel thème avec votre souris et cliquez sur l'icône de coche pour l'importer dans le constructeur de thèmes.
Nous utiliserons le thème Sportswear Store pour ce tutoriel.
Après avoir importé votre thème, vous verrez tous les modèles qui composent la conception de votre site WooCommerce. Vous pouvez personnaliser chaque modèle individuellement pour l'adapter aux besoins de votre site avec le constructeur de pages de SeedProd.
Ensuite, nous vous montrerons comment personnaliser le modèle « Navigation de l'en-tête ».
Étape 3. Personnaliser votre menu de navigation WooCommerce
Beaucoup de thèmes pré-faits de SeedProd incluent automatiquement une icône de panier WooCommerce dans la barre de navigation. Ouvrons le modèle de navigation de l'en-tête pour voir comment cela fonctionne.
Trouvez le modèle « Navigation de l'en-tête » dans votre liste de modèles et cliquez sur le lien Modifier le design pour l'ouvrir dans le constructeur de pages visuel.
Vous verrez la mise en page de votre en-tête sur le côté droit lorsque vous ouvrirez la page. Sur la gauche se trouvent les blocs et sections que vous pouvez ajouter à votre conception.
Pour ajouter un bloc à votre page, faites-le glisser de la gauche et déposez-le sur votre conception.
Comme vous pouvez le voir, il y a déjà 3 blocs dans l'en-tête :
- Image du logo du site Web
- Menu de navigation WordPress
- Bloc panier du menu
Le bloc Panier du menu affiche une icône de panier, le nombre d'articles dans le panier et le sous-total. Vous pouvez modifier l'apparence et les fonctionnalités dans le panneau des paramètres du Panier du menu sur la gauche.
Par exemple, vous pouvez masquer le panier lorsqu'il est vide, afficher ou masquer le sous-total et modifier l'alignement du panier.
Vous trouverez plus de paramètres en cliquant sur l'onglet Avancé. Par exemple, vous pouvez modifier la couleur du panier et du badge du panier, ajuster l'espacement et même masquer le badge sur les appareils mobiles ou de bureau.
Lorsque vous êtes satisfait de l'apparence de votre icône de panier de menu, cliquez sur le bouton vert Enregistrer.
Étape 4. Personnalisez votre thème WooCommerce
Vous pouvez maintenant personnaliser les autres modèles qui composent votre thème WooCommerce. Le processus est similaire à l'étape précédente, mais si vous avez besoin d'aide, voici quelques instructions étape par étape :
- 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. Activez le thème WooCommerce SeedProd
Après avoir personnalisé votre thème WooCommerce avec SeedProd, vous êtes prêt à le mettre en ligne sur votre site Web.
Pour ce faire, allez dans SeedProd » Constructeur de thèmes. Ensuite, dans le coin supérieur droit, basculez le commutateur « Activer le thème SeedProd » sur la position Oui .
Vous pouvez maintenant prévisualiser votre icône de panier de menu pour voir à quoi elle ressemble.
Lorsque les acheteurs cliquent sur l'icône du panier du menu, ils accèdent à la page du panier. Vous pouvez également personnaliser votre panier WooCommerce avec SeedProd.
Voici un exemple du panier de menu d'Amazon que nous avons également créé avec SeedProd :
Méthode 2 : Ajouter une icône de panier de menu WooCommerce avec un plugin gratuit
Voici une solution que vous pouvez utiliser si vous ne souhaitez pas modifier votre thème WordPress existant. Au lieu de cela, vous pouvez utiliser un plugin WooCommerce gratuit pour ajouter une icône à vos éléments de menu de navigation wp.
Le plugin que nous utiliserons s'appelle WooCommerce Menu Cart. Il fonctionne avec WooCommerce, Easy Digital Downloads, et de nombreuses autres plateformes e-commerce WordPress et ne prend que quelques minutes à configurer.
Étape 1. Installer le plugin WooCommerce Menu Cart
Tout d'abord, allez dans Plugins » Ajouter un nouveau depuis votre tableau de bord WordPress et tapez « WooCommerce Menu Cart » dans la zone de recherche.
Ensuite, cliquez sur le bouton Installer, puis cliquez sur Activer pour rendre le plugin actif.
Étape 2. Configurer l'icône du panier WooCommerce
Après avoir installé le plugin, allez dans WooCommerce » Configuration du panier du menu depuis votre panneau d'administration WordPress. Sur cette page, vous pouvez choisir votre plateforme e-commerce, sélectionner un menu pour afficher votre icône de panier woo, choisir une icône de panier, et plus encore.
Configurez les paramètres de votre icône de panier, puis cliquez sur le bouton Enregistrer les modifications .
Vous pouvez maintenant visiter votre site et voir votre menu d'icône de panier WooCommerce.
FAQ sur les icônes de panier WooCommerce dans les menus
L'ajout d'une icône de panier WooCommerce à votre menu permet aux visiteurs de finaliser leur achat plus facilement, ce qui se traduit par plus de ventes conclues pour vous.
Que vous utilisiez le constructeur par glisser-déposer de SeedProd ou un plugin gratuit, vous n'avez pas besoin de code ou de paramètres compliqués pour que cela fonctionne. Quelques clics suffisent.
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 corriger le problème « Voir le panier » de WooCommerce qui ne fonctionne pas
- 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 à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
