Dernières nouvelles de SeedProd

Tutoriels, conseils et ressources WordPress pour développer votre activité

icône du panier d'achat woocommerce dans le menu

Comment ajouter une icône de panier d'achat WooCommerce dans les menus 

Écrit par : avatar de l'auteur Stacey Corrin
avatar de l'auteur Stacey Corrin
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.
     Reviewed By : avatar de l'évaluateur Turner John
avatar de l'évaluateur Turner John
John Turner est le cofondateur de SeedProd. Il a plus de 20 ans d'expérience dans le domaine des affaires et du développement et ses plugins ont été téléchargés plus de 25 millions de fois.

Voulez-vous ajouter une icône de panier d'achat 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 à passer à la caisse plus rapidement, en particulier lorsqu'il comprend un décompte 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 les abandons de panier.

Lorsque vous gérez une boutique en ligne, il est essentiel de créer une expérience utilisateur optimale. 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 des articles. De cette façon, les acheteurs peuvent voir le contenu de leur panier et passer à la caisse quand ils le souhaitent.

Cet article vous montrera comment ajouter une icône de panier d'achat WooCommerce dans les menus, étape par étape.

Qu'est-ce qu'une icône de panier d'achat ?

Une icône de panier de menu est une petite icône qui se trouve dans votre menu principal dans WooCommerce. Elle indique souvent le nombre d'articles dans le panier d'un client et se met à jour au fur et à mesure qu'il ajoute des articles à son panier.

Vous avez probablement vu des icônes de panier de ce type lors de vos achats sur Amazon :

L'icône reste dans le menu de navigation même si vous cliquez sur différentes pages de produits.

Pourquoi ajouter l'icône du panier d'achat de WooCommerce dans le menu ?

Le principal avantage de l'ajout d'icônes de décompte de panier à votre menu de navigation est qu'il aide les acheteurs à voir combien de produits ils ajoutent au panier. De plus, cela leur donne une idée du coût des produits avant de passer à la page de paiement.

En outre, les icônes de menu de panier permettent aux utilisateurs d'accéder rapidement et facilement à la page du panier. Le processus de paiement est donc plus fluide et les visiteurs sont plus enclins à ne pas abandonner leur panier.

Comment ajouter une icône de panier WooCommerce dans votre menu WordPress (avec le nombre d'articles)

WooCommerce n'inclut pas d'icône de panier d'achat dans les menus par défaut. Vous devrez donc 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 très simples et sans code d'ajouter une icône de panier d'achat WooCommerce à votre menu.

Méthode 1 : Ajouter l'icône du panier WooCommerce au menu en utilisant SeedProd (Pas de code)

La première méthode consiste à utiliser un puissant plugin WordPress pour personnaliser votre boutique WooCommerce.

SeedProd WordPress website builder (en anglais)

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 WooCommerce et des pages d'atterrissage à fort taux de 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 grâce au constructeur visuel par glisser-déposer et aux blocs et sections réactifs.

Les blocs dédiés à WooCommerce sont particulièrement intéressants. Ils vous permettent de personnaliser chaque partie de votre site WooCommerce en quelques clics.

Suivez les étapes ci-dessous pour ajouter une icône de panier WooCommerce aux menus avec SeedProd.

Etape 1. Installer SeedProd Website Builder

Tout d'abord, téléchargez une copie du plugin de création de site web SeedProd.

Note : 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 " Réglages 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.

entrez votre clé de licence

Vous pouvez trouver votre clé de licence en allant sur le site web de SeedProd et en vous connectant à votre compte. De là, copiez votre clé de licence à partir de la section "Téléchargements".

Trouvez votre clé de licence SeedProd

Collez votre clé dans le champ de texte et cliquez sur le bouton Vérifier la clé.

Etape 2. Créer un nouveau thème WooCommerce

L'étape suivante consiste à aller sur la page SeedProd " Theme Builder . 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 pourrez personnaliser facilement par glisser-déposer. Cela signifie également que vous n'aurez pas besoin de créer un 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ème 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 individuelles du thème : construisez les différentes parties de votre boutique WooCommerce individuellement.

Nous utiliserons la méthode des thèmes pré-construits pour ce guide car elle fait tout pour vous automatiquement. Cliquez sur le bouton Thèmes pour voir une liste de thèmes WordPress et WooCommerce prédéfinis.

ajouter un modèle de thème

Chaque thème est 100% adapté aux mobiles et facile à éditer avec le constructeur de pages par glisser-déposer de SeedProd.

Passez votre souris sur un thème et cliquez sur l'icône de la coche pour l'importer dans le générateur de thèmes.

Choisir un thème woocommerce dans la bibliothèque de modèles de SeedProd

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 le design de votre site WooCommerce. Vous pouvez personnaliser chaque modèle individuellement pour les adapter aux besoins de votre site avec le constructeur de pages de SeedProd.

modèles de thèmes woocommerce

Ensuite, nous allons vous montrer comment personnaliser le modèle "Header nav".

Étape 3. Personnalisez votre menu de navigation WooCommerce

Beaucoup de thèmes pré-faits de SeedProd sont automatiquement livrés avec une icône de panier d'achat WooCommerce dans la barre de navigation. Ouvrons le modèle de navigation de l'en-tête pour voir comment cela fonctionne.

Recherchez le modèle "Header nav" dans votre liste de modèles et cliquez sur le lien " Edit Design" pour l'ouvrir dans le constructeur visuel de pages.

Modifier le modèle de navigation de l'en-tête de WooCommerce

Lorsque vous ouvrez la page, la disposition de l'en-tête apparaît sur le côté droit. Sur la gauche se trouvent les blocs et les sections que vous pouvez ajouter à votre design.

Pour ajouter un bloc à votre page, faites-le glisser depuis la gauche et déposez-le sur votre dessin.

Glissez-déposez les blocs pour les ajouter à votre navigation woocoommerce

Comme vous pouvez le voir, il y a déjà 3 blocs dans l'en-tête :

  • Image pour le logo du site web
  • Menu de navigation WordPress
  • Bloc menu panier
Blocs d'en-tête WooCommerce

Le bloc Menu Panier 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 de configuration du panier de menu situé à gauche.

Par exemple, vous pouvez masquer le panier lorsqu'il est vide, afficher ou masquer le sous-total et modifier l'alignement du panier.

Paramètres de l'icône du panier du menu de WooCommerce

Vous trouverez d'autres 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.

Menu icône panier d'achat paramètres avancés

Lorsque vous êtes satisfait de l'aspect de votre icône de panier, 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 pas à pas :

Etape 5. Activer 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 " Theme Builder. Ensuite, dans le coin supérieur droit, mettez l'interrupteur "Enable SeedProd Theme" sur la position " Yes ".

activer votre thème seedprod

Vous pouvez maintenant prévisualiser l'icône de votre menu panier pour voir à quoi il ressemble.

icône du panier d'achat woocommerce dans le menu

Lorsque les acheteurs cliquent sur l'icône du panier du menu, ils accèdent à la page du panier d'achat. Vous pouvez également personnaliser votre panier WooCommerce avec SeedProd.

SeedProd panier d'achat personnalisé woocommerce

Voici un exemple de panier d'Amazon que nous avons également réalisé avec SeedProd :

Icône du panier d'achat Amazon woocommerce dans le menu

Méthode 2 : Ajouter l'icône du panier du menu WooCommerce avec un plugin gratuit

Voici une solution que vous pouvez utiliser si vous ne souhaitez pas modifier votre thème WordPress existant. Vous pouvez utiliser le plugin gratuit WooCommerce pour ajouter une icône aux éléments de votre menu nav.

WooCommerce menu cart plugin

Le plugin que nous allons utiliser s'appelle WooCommerce Menu Cart. Il fonctionne avec WooCommerce, Easy Digital Downloads, et beaucoup d'autres plateformes WordPress de commerce électronique et ne prend que quelques minutes à installer.

Etape 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 boîte de recherche.

Ensuite, cliquez sur le bouton Installer et cliquez sur Activer pour mettre le plugin en service.

Installer et activer le plugin woocommerce menu cart

Etape 2. Configurer l'icône du panier d'achat de WooCommerce

Après avoir installé le plugin, allez dans WooCommerce " Menu Cart Setup depuis votre panneau d'administration WordPress. Sur cette page, vous pouvez choisir votre plateforme eCommerce, sélectionner un menu pour afficher l'icône de votre panier woo, choisir une icône de panier, et plus encore.

Paramètres de l'icône du panier du menu WP

Configurez les paramètres de l'icône du panier, puis cliquez sur le bouton Enregistrer les modifications.

Sauvegarder les paramètres du plugin WP Menu cart

Vous pouvez maintenant visiter votre site et voir le menu de l'icône de votre panier d'achat WooCommerce.

icône du panier d'achat woocommerce dans le menu

FAQs sur les icônes de panier de WooCommerce dans les menus

Comment ajouter une icône de panier à mon menu WordPress ?
Vous pouvez utiliser un plugin comme SeedProd ou WooCommerce Menu Cart pour insérer facilement une icône de panier dans votre menu sans toucher au code. Les deux méthodes vous permettent d'afficher le panier dans l'en-tête de votre site ou dans la barre de navigation.
Puis-je afficher le nombre d'articles du panier dans le menu de WooCommerce ?
Oui, SeedProd et WooCommerce Menu Cart ont tous deux des options pour afficher le nombre total d'articles dans le panier. Ce nombre est mis à jour automatiquement au fur et à mesure que les utilisateurs effectuent leurs achats.
Quel est le moyen le plus simple d'ajouter une icône de panier dans le menu de WooCommerce ?
L'option la plus rapide, sans code, est d'utiliser le bloc drag-and-drop Menu Cart de SeedProd. Vous pouvez également utiliser le plugin gratuit WooCommerce Menu Cart si vous souhaitez conserver votre thème actuel.
Pourquoi l'icône de mon panier WooCommerce n'apparaît-elle pas dans le menu ?
Cela se produit généralement si votre thème ne prend pas en charge les icônes de panier par défaut. Essayez d'utiliser un plugin pour ajouter l'icône manuellement, ou passez à un thème construit avec SeedProd.

L'ajout d'une icône de panier d'achat WooCommerce à votre menu permet aux visiteurs de passer plus facilement à la caisse, ce qui se traduit pour vous par un plus grand nombre de ventes.

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 le faire fonctionner. Il suffit de quelques clics et le tour est joué.

Ensuite, vous pouvez consulter ces guides pour continuer à personnaliser votre boutique WooCommerce :

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.

Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.

avatar de l'auteur
Stacey Corrin Rédacteur
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.