Si vous gérez une boutique WooCommerce, le bouton par défaut « Ajouter au panier » peut sembler fade et facile à manquer. En le personnalisant, vous pouvez remplacer le texte par quelque chose de plus persuasif comme « Acheter maintenant », changer sa couleur pour qu'elle corresponde à votre marque, ou même ajouter une icône pour attirer l'attention.
La personnalisation de votre bouton Ajouter au panier WooCommerce le rend plus pertinent pour vos produits et votre marque, ce qui contribue à augmenter les clics et les ventes.
Dans ce guide, je vais vous présenter des moyens simples de personnaliser le bouton Ajouter au panier dans WooCommerce afin qu'il corresponde à votre boutique et vous aide à augmenter les clics.
Étapes pour personnaliser le bouton Ajouter au panier WooCommerce :
Personnaliser le bouton Ajouter au panier WooCommerce avec SeedProd
Pour la première méthode, nous utiliserons SeedProd, le meilleur constructeur de sites web pour WordPress.
Ce puissant plugin comprend un constructeur de pages par glisser-déposer qui vous permet de personnaliser n'importe quelle partie de votre site web sans code. Vous pouvez créer des thèmes WordPress personnalisés, créer des pages de destination à forte conversion et personnaliser n'importe quelle mise en page en un clic.
Comme SeedProd inclut la prise en charge de WooCommerce, vous pouvez l'utiliser pour concevoir et lancer des sites WooCommerce entiers sans développeur. Suivez les étapes ci-dessous pour utiliser SeedProd afin d'ajouter un bouton Ajouter au panier personnalisé à votre site WooCommerce.
Étape 1. Installer et activer SeedProd
Rendez-vous sur la page de tarification de SeedProd et choisissez le plan Elite pour débloquer les fonctionnalités WooCommerce. Ensuite, installez et activez le plugin.
Ensuite, allez dans SeedProd » Paramètres, collez votre clé de licence et cliquez sur Vérifier la clé.
Étape 2. Choisir un kit de site web
Ensuite, allez dans SeedProd » Constructeur de thèmes et cliquez sur le bouton Thèmes. Ici, vous verrez une bibliothèque de kits de sites web que vous pouvez importer en un clic.
Recherchez les kits marqués « WooCommerce », car ils sont conçus pour les boutiques en ligne.
Choisissez un design que vous aimez, et SeedProd le chargera dans votre constructeur de thèmes afin que vous puissiez commencer la personnalisation immédiatement.
Étape 3. Personnaliser votre bouton Ajouter au panier
Maintenant, modifions le bouton Ajouter au panier là où cela compte le plus : vos pages Boutique et Produit.
Personnaliser le bouton Ajouter au panier sur la page Boutique
Dans SeedProd » Constructeur de thèmes, ouvrez votre Page Boutique et cliquez sur Modifier le design.
Sélectionnez le bloc Grille de produits, puis ouvrez les paramètres des Boutons.
- Style : Choisissez Plat, 2D, Vintage, Fantôme ou Lien.
- Texte : Changez l'étiquette pour quelque chose de plus clair comme « Acheter maintenant ».
- Design : Ajustez la couleur, la taille, le rayon du bord et les effets de survol sous Avancé.
Cliquez sur Enregistrer lorsque vous êtes satisfait du style du bouton.
Personnaliser le bouton Ajouter au panier sur la page Produit
Ensuite, ouvrez le modèle Page Produit et cliquez sur Modifier le design. Sélectionnez le bouton Ajouter au panier dans la zone des détails du produit pour modifier ses paramètres.
- Texte et alignement : Mettez à jour le texte et la position du CTA.
- Icône : Ajoutez une icône de panier ou de coche avant/après le texte avec Font Awesome.
- Avancé : Ajustez les couleurs, la typographie, l'espacement et les styles au survol.
Astuce bonus : Ajoutez un bouton « Ajouter au panier » aux articles de blog
Si vous souhaitez promouvoir des produits dans le contenu de votre blog, ouvrez le modèle Page de blog, ajoutez une section à deux colonnes avec une image et les détails du produit, puis faites glisser le bloc Bouton Ajouter au panier. Entrez l'ID du produit pour que le bouton renvoie directement à l'article.
Étape 4. Enregistrez et publiez vos modifications
Lorsque vous êtes satisfait de l'apparence de vos pages WooCommerce, vous êtes prêt à mettre votre boutique en ligne. Pour ce faire, retournez dans le Theme Builder, et dans le coin supérieur droit, activez le bouton Activer le thème SeedProd sur « On ».
Jetons un coup d'œil à certaines des pages que nous avons personnalisées :
Page Boutique
Page produit
Page d'archive
Page de blog
Ajouter un bouton personnalisé « Ajouter au panier » WooCommerce avec du code
Vous préférez le code ? Vous pouvez modifier le texte et la couleur du bouton avec de petits extraits. Par mesure de sécurité, ajoutez-les à l'aide d'un plugin comme WPCode au lieu de modifier directement les fichiers du thème.
Comment changer le texte du bouton « Ajouter au panier » dans WooCommerce
Créez un nouvel extrait PHP dans WPCode et collez ce code pour remplacer « Ajouter au panier » par votre propre texte.
add_filter('woocommerce_product_single_add_to_cart_text', 'SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce() {
return __('Buy this item', 'woocommerce');
}
Enregistrez l'extrait, puis affichez un produit unique pour voir le texte de votre nouveau bouton.
Comment changer la couleur du bouton « Ajouter au panier » dans WooCommerce
Allez dans Apparence » Personnaliser » CSS additionnel et ajoutez ce CSS pour changer la couleur du bouton sur les pages de produits uniques.
.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}Pour styliser les boutons dans les archives de produits ou la grille de la boutique, utilisez ce sélecteur :
.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}
Plus de façons de personnaliser WooCommerce
La personnalisation du bouton « ajouter au panier » n'est qu'une des nombreuses façons de modifier votre boutique. Pour plus de personnalisations WooCommerce, veuillez consulter les guides suivants :
- 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 masquer les produits hors stock dans WooCommerce
FAQ sur le bouton « Ajouter au panier » WooCommerce
display: none;. Some plugins also let you disable it for specific products.border-radius for rounded corners.J'espère que cet article vous a aidé à apprendre comment ajouter un bouton personnalisé « ajouter au panier » dans WooCommerce.
Vous pourriez également aimer cet article : Comment modifier un menu dans WordPress pour une navigation personnalisée.
Prêt à personnaliser vos boutons « Ajouter au panier » 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.
