Si vous gérez une boutique WooCommerce, le bouton "Ajouter au panier" par défaut peut sembler banal 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'il corresponde à votre marque, ou même ajouter une icône pour attirer l'attention.
La personnalisation de votre bouton d'ajout au panier WooCommerce le rend plus pertinent pour vos produits et votre marque, ce qui permet d'augmenter les clics et les ventes.
Dans ce guide, je vais vous présenter des méthodes simples pour personnaliser le bouton d'ajout au panier dans WooCommerce afin qu'il soit adapté à votre boutique et qu'il contribue à augmenter le nombre de clics.
Etapes pour personnaliser le bouton d'ajout au panier de WooCommerce :
Personnaliser le bouton d'ajout au panier de 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 d'atterrissage à fort taux de conversion et personnaliser n'importe quelle mise en page par simple pointer-cliquer.
Parce que SeedProd inclut le support 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 d'ajout au panier personnalisé à votre site WooCommerce.
Étape 1. Installer et activer SeedProd
Allez sur la page de tarification de SeedProd et choisissez le plan Elite pour débloquer les fonctionnalités de WooCommerce. Ensuite, installez et activez le plugin.
Ensuite, allez dans SeedProd " Settings, collez votre clé de licence, et cliquez sur Verify Key.
Étape 2. Choisir un kit de site web
Ensuite, allez à SeedProd " Theme Builder et cliquez sur le bouton Themes. Vous y trouverez une bibliothèque de kits de sites Web que vous pouvez importer en un seul clic.
Recherchez les kits portant la mention "WooCommerce", car ils sont conçus pour les boutiques en ligne.
Choisissez un design que vous aimez, et SeedProd le chargera dans votre Theme Builder pour que vous puissiez commencer à le personnaliser immédiatement.
Étape 3. Personnalisez votre bouton d'ajout au panier
Modifions maintenant le bouton d'ajout au panier là où c'est le plus important : sur les pages de votre boutique et de vos produits.
Personnaliser le bouton "Ajouter au panier" sur la page de la boutique
Dans SeedProd " Theme Builder, ouvrez la page de votre boutique et cliquez sur Edit Design.
Sélectionnez le bloc Grille de produits, puis ouvrez les paramètres Boutons.
- Style : Choisissez le style plat, 2D, vintage, fantôme ou lien.
- Texte : Remplacer l'étiquette par quelque chose de plus clair, comme "Acheter maintenant".
- Conception : Ajustez la couleur, la taille, le rayon de la bordure 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 du produit
Ensuite, ouvrez le modèle de page produit et cliquez sur Modifier la conception. Sélectionnez le bouton d'ajout au panier dans la zone des détails du produit pour modifier ses paramètres.
- Texte et alignement : Mettre à jour le texte et la position du CTA.
- Icône : Ajoutez une icône de panier ou de chèque avant/après le texte avec Font Awesome.
- Avancé : Modifier les couleurs, la typographie, l'espacement et les styles de survol.
Astuce bonus : Ajouter 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 de page de blog, ajoutez une section à deux colonnes avec une image et les détails du produit, puis faites glisser le bloc du bouton Ajouter au panier. Saisissez l'identifiant 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, mettez l'interrupteur Enable SeedProd Theme sur la position 'On'.
Jetons un coup d'œil à quelques-unes des pages que nous avons personnalisées :
Page de la boutique
Page produit
Page d'archive
Page du blog
Ajouter un bouton d'ajout au panier WooCommerce personnalisé avec du code
Vous préférez le code ? Vous pouvez modifier le texte et la couleur des boutons à l'aide de petits bouts de code. Pour plus de sécurité, ajoutez-les à l'aide d'un plugin comme WPCode au lieu de modifier directement les fichiers du thème.
Comment modifier le texte du bouton Ajouter au panier dans WooCommerce
Créez un nouveau snippet PHP dans WPCode et collez ce code pour remplacer "Add to cart" 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 seul produit pour voir le texte de votre nouveau bouton.
Comment changer la couleur du bouton Ajouter au panier dans WooCommerce
Allez dans Apparence " Personnaliser " CSS supplémentaire et ajoutez ce CSS pour changer la couleur du bouton sur les pages de produits individuels.
.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 possibilités de personnaliser WooCommerce
Personnaliser le bouton d'ajout au panier n'est qu'une des nombreuses façons d'améliorer votre boutique. Pour d'autres personnalisations de WooCommerce, veuillez consulter les guides suivants :
- Comment personnaliser l'onglet Informations complémentaires de WooCommerce
- Comment ajouter un bouton "Voir le panier" dans WooCommerce
- Comment changer le titre de la page de la boutique dans WooCommerce
- Comment masquer les produits en rupture de stock dans WooCommerce
FAQ sur le bouton Ajouter au panier de WooCommerce
display: none;. Certains plugins vous permettent également de le désactiver pour des produits spécifiques.border-radius pour les coins arrondis.J'espère que cet article vous a aidé à apprendre comment ajouter un bouton d'ajout au panier personnalisé dans WooCommerce.
Vous pourriez aussi aimer cet article : Comment éditer un menu dans WordPress pour une navigation personnalisée.
Prêt à personnaliser vos boutons d'ajout au panier de 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.
