Comment personnaliser le bouton Ajouter au panier WooCommerce (sans code ou avec code) 

Vous avez configuré votre boutique WooCommerce, mais le bouton par défaut « Ajouter au panier » est gris uni et se fond dans la page. Vous voulez qu'il dise quelque chose de plus clair, qu'il corresponde à la couleur de votre marque, ou qu'il porte une icône qui attire l'œil.

J'ai créé des pages de boutique WooCommerce avec SeedProd et modifié le texte des boutons avec WPCode, je vais donc vous montrer les options de bouton personnalisé Ajouter au panier WooCommerce que j'utilise réellement. Pour une refonte visuelle complète, j'utilise SeedProd, pour un changement natif gratuit, j'utilise les Blocs WooCommerce, et pour un échange rapide de texte ou de couleur, j'insère un extrait de code.

Quelle méthode devriez-vous utiliser ?

Choisissez la méthode qui correspond au niveau de contrôle dont vous avez besoin et à ce que vous êtes prêt à payer.

• SeedProd (visuel, sans code) : Idéal lorsque vous concevez vos pages de boutique et de produits et que vous souhaitez un contrôle total sur le texte, la couleur, l'icône et les styles de survol. La conception WooCommerce nécessite le plan Elite.
• Blocs WooCommerce (gratuit, natif) : Convient pour placer le bouton et définir le style du sélecteur de quantité, mais ne changera pas le texte, la couleur ou la typographie du bouton sur la page du produit unique.
• Extrait de code (ajustement rapide) : Idéal pour un changement rapide de texte ou de couleur sur les pages de produits uniques et de boutique lorsque vous êtes à l'aise pour coller un extrait dans WPCode.

Une chose qui mérite d'être dite d'emblée est que des étiquettes plus claires et orientées vers l'action comme « Acheter maintenant » ou « Ajouter au panier » ont tendance à réduire l'hésitation des visiteurs novices, car elles indiquent exactement ce qui se passe ensuite. Ce petit changement de formulation est souvent le gain le plus facile ici.

Personnaliser le bouton Ajouter au panier personnalisé WooCommerce avec SeedProd

Pour la première méthode, j'utiliserai SeedProd, car il vous permet de modifier le texte, la couleur et l'icône du bouton visuellement tout en regardant le changement se produire.

SeedProd est un constructeur de sites Web par glisser-déposer qui vous permet de personnaliser n'importe quelle partie de votre boutique sans code. Parce qu'il inclut la prise en charge de WooCommerce, vous pouvez concevoir vos pages de boutique et de produits, y compris le bouton Ajouter au panier, en pointant et en cliquant.

Une note honnête avant de commencer : les fonctionnalités de conception WooCommerce de SeedProd nécessitent le plan Elite. Si vous souhaitez une solution gratuite, passez à la méthode des blocs WooCommerce ci-dessous.

É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.

Vous pouvez également déposer le bloc Ajouter au panier dans d'autres modèles, comme un article de blog, et entrer un identifiant de produit pour que le bouton renvoie directement à cet article. Je fais cela lorsque je veux promouvoir un seul produit dans un 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 au constructeur de thèmes, et dans le coin supérieur droit, basculez l'interrupteur Activer le thème SeedProd sur la position « Activé ».

Jetons un coup d'œil à certaines des pages que j'ai personnalisées, en commençant par la page de la boutique.

Voici la page produit avec le nouveau bouton.

Et voici la page d'archive des produits.

Vous pouvez également utiliser le même bloc Ajouter au panier sur une page de blog.

Personnaliser le bouton Ajouter au panier avec les blocs WooCommerce (gratuit)

Si votre thème est un thème de blocs, vous pouvez ouvrir le bouton « Ajouter au panier » dans l'éditeur de site sous Apparence » Éditeur et modifier votre modèle de produit unique.

Sélectionnez ensuite le bloc Ajouter au panier.

Voici la limite honnête que j'ai rencontrée : le bloc natif de produit unique ne vous permet pas de modifier le texte, la couleur ou la typographie du bouton. Son option principale est le style du sélecteur de quantité, que vous pouvez basculer entre un champ de saisie simple et un sélecteur plus/moins.

Sur les grilles de boutiques et d'archives, le bloc Bouton Produit expose des paramètres de couleur et de typographie, mais l'étiquette provient toujours de WooCommerce, vous ne pouvez donc pas la retaper là non plus. Pour changer le texte du bouton gratuitement, utilisez la méthode de l'extrait de code ci-dessous.

Pour un contrôle total du texte, des couleurs, des icônes et des styles de survol en un seul endroit, le constructeur visuel ci-dessus vous offre le plus, et vous pouvez personnaliser la page de boutique WooCommerce dans le même éditeur.

Ajouter un bouton Ajouter au panier personnalisé 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 ?

Vous changez le texte du bouton avec un petit filtre PHP. WooCommerce utilise un filtre pour les pages de produits uniques et un filtre séparé pour les pages de boutique et d'archives, alors couvrez les deux si vous voulez la nouvelle étiquette partout.

Ce premier extrait modifie l'étiquette sur les pages de produits uniques. Créez un nouvel extrait PHP dans WPCode et collez-le.

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');
}

Ce deuxième extrait modifie l'étiquette sur les pages de boutique et d'archives de produits, où les produits s'affichent dans une grille. Ajoutez-le comme son propre extrait à côté du premier.

add_filter('woocommerce_product_add_to_cart_text', 'SP_customize_archive_add_to_cart_button_woocommerce');
function SP_customize_archive_add_to_cart_button_woocommerce() {
  return __('Buy this item', 'woocommerce');
}

Enregistrez les extraits, puis affichez un produit unique pour voir le nouveau texte de votre bouton.

Si le nouveau texte ne s'affiche pas, videz le cache de votre page et le cache d'objet. Le filtre ne modifie que les rendus frais, donc une page mise en cache ou une copie CDN peut continuer à servir l'ancienne étiquette « Ajouter au panier » jusqu'à ce que vous la vidiez.

Comment changer la couleur du bouton « Ajouter au panier » dans WooCommerce ?

Vous changez la couleur du bouton avec du CSS. Cette première règle cible le bouton sur les pages de produits uniques.

Accédez à Apparence » Personnaliser » CSS additionnel et ajoutez ce CSS.

.single-product .product .single_add_to_cart_button.button {
  background-color: #FF0000;
  color: #C0C0C0;
}

Cette deuxième règle stylise les boutons dans les archives de produits et la grille de la boutique, de sorte que la couleur corresponde également à la page de catégorie de produit (archive).

.woocommerce .product .add_to_cart_button.button {
  background-color: #FF0000;
  color: #C0C0C0;
}

Liez un bouton d'achat depuis n'importe où avec des URL d'ajout au panier

Si vous souhaitez un bouton qui ajoute un produit au panier depuis une page de destination, un tableau de prix ou un article de blog, utilisez une URL d'ajout au panier. Liez à ?add-to-cart=ID&quantity=N, en remplaçant ID par l'ID du produit et N par la quantité.

Par exemple, https://votre-boutique.com/?add-to-cart=99&quantity=1 ajoute un exemplaire du produit 99 au panier lorsqu'il est cliqué. C'est un moyen simple d'envoyer les clients directement au paiement sans étape supplémentaire.

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 personnalisé WooCommerce

Comment puis-je changer le texte du bouton « Ajouter au panier » sur les pages de la boutique et d'archive, pas seulement sur les produits individuels ?

Les pages de produits individuels et les pages de boutique/archive utilisent des filtres différents. Utilisez woocommerce_product_single_add_to_cart_text pour la page de produit individuel et woocommerce_product_add_to_cart_text pour les grilles de boutique et d'archive.

Ajoutez les deux extraits dans WPCode pour obtenir le nouveau libellé partout. Si vous préférez ne pas toucher au code, changez le texte visuellement dans SeedProd.

Ai-je besoin d'un plugin pour personnaliser le bouton « Ajouter au panier » de WooCommerce, ou puis-je le faire gratuitement ?

Vous pouvez le faire gratuitement avec un extrait de code. La version gratuite de WPCode vous permet de changer le texte et la couleur du bouton sans rien acheter.

La conception visuelle WooCommerce de SeedProd nécessite le plan Elite, mais elle vous offre le plus de contrôle sur le texte, la couleur, les icônes et les styles de survol en un seul endroit.

Comment personnaliser le bouton « Ajouter au panier » à l'aide des blocs WooCommerce ou de l'éditeur de site ?

Ouvrez Apparence » Éditeur sur un thème de blocs, modifiez votre modèle de produit individuel et sélectionnez le bloc Ajouter au panier. Le bloc natif est limité : sur la page du produit individuel, son option principale est le style du sélecteur de quantité, un champ de saisie simple ou un sélecteur plus/moins.

Cela ne changera pas le texte, la couleur ou la typographie du bouton là-bas. Pour cela, utilisez plutôt un extrait de code ou le constructeur visuel de SeedProd.

Pourquoi le texte personnalisé de mon bouton « Ajouter au panier » ne s'affiche-t-il pas ?

La cause la plus fréquente est la mise en cache. Un plugin de mise en cache, un cache d'objet ou un CDN peut servir une ancienne version de la page, de sorte que le filtre ne modifie le libellé que lors des rendus frais.

Videz le cache de votre page et le cache d'objet, puis rechargez. Vérifiez également que vous avez ajouté le bon filtre pour le type de page, car les pages individuelles et d'archive utilisent des filtres distincts.

Personnalisez votre bouton « Ajouter au panier » WooCommerce dès aujourd'hui

Ce bouton gris uni est maintenant un appel à l'action clair et conforme à votre marque qui indique aux acheteurs exactement quoi faire ensuite. Choisissez la méthode qui convient à votre boutique, qu'il s'agisse de l'option gratuite Blocs WooCommerce, d'un extrait de code rapide ou de SeedProd pour une refonte visuelle complète.

Vous pourriez également aimer cet article : Comment modifier un menu dans WordPress pour une navigation personnalisée.

Commencez avec SeedProd dès aujourd'hui

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.