TL;DR : Comment ajouter un bouton « Voir le panier » dans WooCommerce
WooCommerce inclut un lien basique « Voir le panier » par défaut. Pour un bouton persistant et entièrement personnalisé n'importe où sur votre boutique, utilisez SeedProd Elite.
- Vérifiez le défaut – WooCommerce ajoute automatiquement un lien « Voir le panier » à sa notification d'ajout au panier.
- Installez SeedProd Elite – active le constructeur de thème WooCommerce.
- Choisissez un kit WooCommerce – importez un thème de boutique pré-conçu en un clic.
- Ajoutez le bouton – faites glisser le bloc Bouton sur votre page produit, page boutique ou en-tête, puis liez-le à l'URL de votre panier.
- Publiez votre thème – activez SeedProd depuis le tableau de bord du constructeur de thème pour le mettre en ligne.
Astuce Pro : Enregistrez votre bouton personnalisé en tant que Bloc enregistré dans SeedProd pour le réutiliser sur différentes pages sans avoir à le reconstruire.
Voulez-vous savoir comment ajouter un bouton « Voir le panier » dans WooCommerce ?
Un bouton « Voir le panier » permet aux clients potentiels de voir tous les articles dans leur panier et d'accéder rapidement à votre page de paiement. À son tour, cela peut augmenter les taux de conversion en éliminant les étapes inutiles dans le processus de paiement.
Dans ce guide, je vais vous montrer comment ajouter un bouton « Voir le panier » dans WooCommerce étape par étape. J'utiliserai SeedProd, un constructeur de site web visuel pour WordPress qui vous permet de personnaliser votre boutique WooCommerce sans toucher au code.
Pourquoi ajouter un bouton « Voir le panier » dans WooCommerce ?
Ajouter un bouton « Voir le panier » à une boutique WooCommerce est un excellent moyen pour les propriétaires de boutiques d'améliorer l'expérience utilisateur. Il est plus facile pour les clients de voir leurs articles, d'apporter des modifications et de passer à la caisse. Cela peut entraîner une augmentation des ventes et de la satisfaction client.
Les boutons « Voir le panier » sont également efficaces pour réduire l'abandon de panier. Selon une étude de Baymard Institute, 69,57 % des paniers d'achat en ligne sont abandonnés.
L'une des raisons les plus courantes de l'abandon de panier est que les clients oublient ce qu'il y a dans leur panier. Un bouton « Voir le panier » peut aider à réduire l'abandon de panier en permettant aux clients de suivre facilement leurs articles.
En fin de compte, ajouter un bouton « Voir le panier » à votre boutique en ligne est un moyen simple d'améliorer l'expérience client et d'augmenter les ventes.
La méthode par défaut de WooCommerce
WooCommerce inclut déjà un lien basique « Voir le panier ». Lorsqu'un client ajoute un article à son panier, WooCommerce affiche une notification d'ajout au panier avec un lien « Voir le panier » à l'intérieur. De nombreux propriétaires de boutiques ont déjà cela sans s'en rendre compte.
La notification par défaut apparaît automatiquement, vous avez donc peut-être déjà un lien « Voir le panier » sans rien faire. Cela dit, il est petit et disparaît après quelques secondes. Les clients qui ne prêtent pas une attention particulière peuvent facilement le manquer.
Si vous souhaitez un bouton « Voir le panier » persistant qui reste visible sur vos pages produits, votre page boutique et votre menu, vous avez besoin d'une configuration plus flexible. C'est ce que couvrent les étapes ci-dessous.
Comment ajouter un bouton « Voir le panier » dans WooCommerce avec SeedProd
En plus de vous aider à configurer rapidement et facilement une boutique en ligne, SeedProd vous permet d'ajouter un bouton "Voir le panier" pratiquement n'importe où. Pour savoir comment faire, suivez les étapes simples ci-dessous.
- Étape 1. Installer et activer SeedProd
- Étape 2. Choisir un kit de site WooCommerce
- Étape 3. Ajouter un bouton "Voir le panier" sur la page produit WooCommerce
- Étape 4. Ajouter un bouton "Voir le panier" sur la page boutique WooCommerce
- Étape 5. Ajouter un bouton "Voir le panier" dans le menu WooCommerce
- Step 6. Publish Your WooCommerce Website Changes
Étape 1. Installer et activer SeedProd
Tout d'abord, vous devrez installer et activer SeedProd Elite sur votre site WordPress.
Le plan Elite vous donne accès aux fonctionnalités de personnalisation WooCommerce de SeedProd, au constructeur de thèmes, au support Easy Digital Downloads et à la gestion de domaine.
Pour obtenir de l'aide lors de la configuration, veuillez consulter notre documentation sur comment installer SeedProd.
Étape 2. Choisir un kit de site WooCommerce
Après avoir activé le plugin, accédez à SeedProd » Constructeur de thèmes depuis votre tableau de bord WordPress.
Vous devrez créer un thème WooCommerce personnalisé pour ajouter un bouton "Voir le panier" et un bouton "Ajouter au panier" personnalisé WooCommerce. Mais ne vous inquiétez pas ; c'est simple et cela ne prend que quelques minutes.
Depuis la page Constructeur de thèmes, cliquez sur le bouton Kits de modèles de thèmes.
Sur l'écran suivant, vous verrez les kits de sites préconçus de SeedProd. Cliquez sur l'onglet WooCommerce pour voir tous les kits conçus pour les boutiques en ligne.
Parcourez les designs jusqu'à en trouver un qui vous plaît, puis survolez-le et cliquez sur l'icône de coche.
En quelques secondes, SeedProd ajoutera le thème à votre site. Comme dans l'exemple ci-dessous, vous verrez tous les modèles qui composent votre thème WordPress dans une liste.
Vous pouvez personnaliser n'importe lequel de ces modèles en cliquant sur le lien Modifier le design. Cela ouvrira le modèle dans le constructeur de pages visuel de SeedProd, où vous pourrez adapter le design préconçu aux besoins de votre boutique.
Pour des instructions de personnalisation complètes étape par étape, veuillez consulter notre guide ultime sur comment configurer une boutique en ligne dans WordPress. Il explique comment utiliser le constructeur de pages par glisser-déposer, personnaliser les éléments du modèle et ajouter de nouveaux éléments de design à chaque page.
Une fois que vous serez familiarisé avec le fonctionnement du constructeur de SeedProd, vous pourrez passer à l'étape suivante, qui vous montrera comment ajouter un bouton "Voir le panier" à vos pages produits.
Étape 3. Ajouter un bouton "Voir le panier" sur la page produit WooCommerce
Pour ajouter un bouton "Voir le panier" à vos pages produits, vous devrez ouvrir le modèle de page produit unique sur le tableau de bord du constructeur de thèmes. Après l'avoir trouvé, survolez le modèle et cliquez sur le lien Modifier le design.
Lorsque ce modèle s'ouvrira, vous verrez une page avec les détails des produits individuels de votre boutique. Selon le thème que vous avez choisi, il affichera votre description de produit, les informations sur les produits variables, les photos de produits, les prix et un bouton ajouter au panier.
Pour ajouter un bouton "Voir le panier", vous devrez faire glisser le bloc Bouton depuis la barre latérale gauche.
Vous pourrez ensuite cliquer sur ce bloc pour ouvrir ses options de personnalisation. Ici, vous pouvez modifier le texte du bouton, ajuster l'alignement et ajouter un lien de bouton personnalisé.
Changeons le texte du bouton en « Voir le panier » et définissons l'alignement à gauche.
Vous pouvez également développer l'onglet « Icône » et choisir une icône de panier dans la bibliothèque d'icônes Font Awesome.
Maintenant, vous devrez lier le bouton à votre page de panier. Pour ce faire, collez l'URL de votre page de panier dans le champ de texte « Lien ».
Si vous souhaitez ajouter plus d'options de style à votre bouton « Voir le panier », cliquez sur l'onglet Avancé dans les paramètres du bloc.
Vous pouvez modifier la police du texte du bouton du panier, la couleur du bouton, le rayon des bordures, l'espacement, et plus encore dans ce panneau.
Continuez à personnaliser le bouton jusqu'à ce que vous soyez satisfait de son apparence.
Maintenant, nous allons vous montrer une astuce pour gagner du temps si vous souhaitez ajouter le même bouton à d'autres zones du site. Survolez le bouton dans votre aperçu, puis cliquez sur l'icône Enregistrer.
Cela ouvrira une fenêtre où vous pourrez donner un nom au bouton et l'enregistrer dans vos Blocs enregistrés. Après l'avoir enregistré, vous pourrez le réutiliser sans avoir à le construire à partir de zéro à nouveau.
Avant de quitter cette page, cliquez sur le bouton Enregistrer dans le coin supérieur droit pour sauvegarder vos modifications.
Vous pouvez maintenant quitter pour revenir au tableau de bord du constructeur de thèmes et continuer à personnaliser votre boutique en ligne.
Étape 4. Ajouter un bouton "Voir le panier" sur la page boutique WooCommerce
Votre page de boutique WooCommerce est une autre zone où vous pouvez ajouter un bouton « Voir le panier ». Pour cela, vous devrez cliquer sur le lien Modifier le design sur votre modèle de page de boutique.
Une fois que vous êtes dans le constructeur de pages pour cette page, faites défiler jusqu'à la section Blocs enregistrés et recherchez le bouton personnalisé « Voir le panier » que vous avez créé à l'étape précédente.
Faites maintenant glisser ce bloc où vous le souhaitez sur votre page de boutique. Dans cet exemple, nous l'avons ajouté en haut de la page, mais vous pouvez le placer où vous voulez.
Comme précédemment, vous pouvez ouvrir les paramètres du bloc pour le personnaliser pour cette page particulière. Par exemple, vous pouvez changer la couleur d'arrière-plan ou agrandir le bouton pour qu'il ressorte davantage.
N'oubliez pas de cliquer sur le bouton Enregistrer avant de quitter la page.
Étape 5. Ajouter un bouton "Voir le panier" dans le menu WooCommerce
Un autre endroit logique pour ajouter un bouton « Voir le panier » est votre menu WooCommerce. Comme les acheteurs utilisent le menu pour naviguer dans votre boutique, l'ajout d'un bouton ici facilitera la recherche de la page du panier.
Depuis le tableau de bord du constructeur de thèmes SeedProd, vous devrez trouver votre modèle d'en-tête et cliquer sur le lien Modifier le design pour le personnaliser.
Au lieu d'ajouter le bouton « Voir le panier » que vous avez créé précédemment, vous pouvez utiliser l'un des blocs préfabriqués de SeedProd.
Dans le panneau « Balises de modèle WooCommerce » sur le côté gauche, vous trouverez un bloc appelé Panier du menu.
Ce bloc affichera une icône et estimera la valeur totale du panier de l'acheteur. Lorsqu'il cliquera dessus, il sera instantanément dirigé vers le panier, où il pourra finaliser sa commande ou apporter des modifications.
Après avoir fait glisser ce bouton sur votre en-tête, vous pouvez le personnaliser comme n'importe quel autre bloc SeedProd.
Vous pouvez modifier l'alignement du bouton, le masquer s'il n'y a rien dans le panier, et afficher ou masquer le sous-total du panier.
Dans l'onglet avancé, vous pouvez ajuster d'autres options de style, y compris les couleurs des badges, les animations, l'espacement, et plus encore.
Quand cela vous convient, cliquez sur le bouton Enregistrer et quittez le constructeur de page.
Étape 6. Publiez les modifications de votre site Web WooCommerce
La dernière étape de ce guide consiste à mettre en ligne votre thème WooCommerce personnalisé. Depuis le tableau de bord du constructeur de thème, trouvez l'en-tête intitulé « Activer le thème SeedProd » et cliquez sur le bouton bascule pour le faire passer à la position Oui.
C'est tout ! Votre boutique personnalisée est en ligne et les clients peuvent voir le bouton « Voir le panier » sur votre menu, votre page de boutique et votre page produit.
Voici quelques exemples des modifications que nous avons apportées aujourd'hui. Cliquez sur n'importe quelle image pour l'ouvrir dans une nouvelle fenêtre et l'examiner de plus près.
Si votre bouton « Voir le panier » n'apparaît pas après avoir suivi ces étapes, consultez Comment réparer le bouton « Voir le panier » de WooCommerce qui ne fonctionne pas pour connaître les causes et les solutions courantes.
FAQ sur l'ajout d'un bouton « Voir le panier » dans WooCommerce
- Comment changer le titre de la page Boutique dans WooCommerce
- Comment personnaliser l'onglet « Informations supplémentaires » de WooCommerce
- Comment ajouter des évaluations par étoiles aux pages produits WooCommerce
- Comment corriger le problème « Voir le panier » de WooCommerce qui ne fonctionne pas
- Comment créer un site web pour un seul produit dans WooCommerce
- Comment afficher les produits liés dans WooCommerce
- Comment créer une page de remerciement WooCommerce personnalisée
- Comment afficher les catégories et les tags de produits dans WooCommerce
- Comment afficher les produits en vedette 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 à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
