WooCommerce
time_read14mn de lecture

Comment personnaliser le bouton « Ajouter au panier » dans WooCommerce ?

20 avril 2023

Comment personnaliser le bouton

Lors de l’installation, WooCommerce s’installe avec un thème et un design par défaut que vous devez modifier. Ce n’est qu’à l’issue de cette étape de personnalisation que vous pourrez obtenir un site de vente à l’image de marque de votre entreprise. Et c’est dans ce cadre que vous pouvez envisager de modifier le bouton « Ajouter au panier » de votre boutique.🤫

Le processus visant à personnaliser le bouton « Ajouter au panier » dans WooCommerce n’est pas technique. Il exige seulement d’avoir quelques notions élémentaires dans l’utilisation du code CSS pour vous lancer.🤔

Objectif

L’objectif de cet article est de vous apprendre les connaissances dont vous avez besoin pour personnaliser le bouton « Ajouter au panier » dans WooCommerce. Ainsi, en lisant cet article jusqu’à la fin, vous serez en mesure d’agir tout seul sans faire appel à un développeur externe.😊

Prérequis

Avant d’envisager quoi que ce soit, vous devez respecter certains préalables, notamment :

Quand personnaliser le bouton « Ajouter au panier » dans WooCommerce ?

Au moment de son installation, WooCommerce s’installe avec un design par défaut. Mais celui-ci peut ne pas répondre à vos critères. Ainsi, vous pouvez envisager de personnaliser votre bouton « Ajouter au panier » si :

  • L’affichage du bouton par défaut n’est pas cohérence avec votre image de marque
  • Vous avez installé un autre thème, mais que le design appliqué au bouton « Ajouter au panier » n’est pas adapté pour une bonne expérience utilisateur.

Quelle que soit la raison qui vous amène à personnaliser ce bouton, notez que c’est plus simple à faire.

Besoin de créer une boutique en ligne rapide et sécurisée ?

LWS vous conseille sa formule d’hébergement e-commerce en promotion à -40% (offre à partir de 2,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Comment personnaliser le bouton « Ajouter au panier » dans WooCommerce ?

Pour commencer, connectez-vous à l’espace d’administration de votre boutique puis rendez-vous dans la section « Apparence › personnaliser ».Personnaliser une boutique WooCommerce Vous serez redirigé vers l’interface de personnalisation de votre boutique WooCommerce. Défilez vers le bas l’écran et développez la section « CSS additionnels ».

Sur l’interface suivante, vous accédez à un tableau vous permettant d’ajouter et d’appliquer du code CSS à votre site. Cette zone devrait être vide si vous ne l’avez jamais utilisé.Section d'ajout du Code CSS à WordPress et WooCommerce

Mais pour que les modifications s’appliquent à votre bouton « Ajouter au panier », vous devez insérer un sélecteur CSS. C’est ensuite à l’intérieur de celui-ci que vous pouvez ajouter n’importe quel code CSS.

Pour ce faire, copiez le sélecteur ci-dessous dans votre zone d’ajout de CSS.

.woocommerce .button.alt {
 /** Ajouter votre CSS personnalisé ici **/
}

Sélecteur CSS du bouton "Ajouter au panier" de WooCommerceUne fois que le sélecteur est ajouté, vous pouvez procéder systématiquement à l’ajout du Code CSS de votre choix afin de personnaliser votre boutique « Ajouter au panier ».

Voyons maintenant deux cas d’illustration.

1. Modifier la couleur du bouton « Ajouter au panier » de WooCommerce

Pour modifier la couleur de votre bouton « Ajouter au panier« , insérez le code CSS ci-dessous directement à l’intérieur du sélecteur.

.woocommerce .button.alt {
  background: #65f50b !important;
  color: red !important;
  margin-top: 10 px;
}

Le code CSS ci-dessus applique la couleur rouge à ce bouton et un arrière-plan en vert foncé. Mais vous pouvez choisir une combinaison CSS différente de la nôtre. Dans ce cas, remplacez simplement notre code hexadécimal par celui qui correspond à votre couleur pour la propriété background et une autre pour la propriété color.

2. Personnaliser la taille du bouton « Ajouter au panier » sur WooCommerce

Le sélecteur CSS inséré précédemment vous permet aussi de modifier la taille de votre bouton « Ajouter au panier« . Le cas d’illustration ci-dessous applique des nouvelles dimensions à ce bouton, notamment une nouvelle marge interne et une taille au texte.

.woocommerce .button.alt:hover {
  /* Code précédent ici */
  padding: 25px 35px;
  font-size: 40px;
}

Vous devez toujours publier vos modifications afin qu’elles soient prises en charge par WooCommerce. Avec ces codes, vous avez possibilité de personnalisation.

Bravo ! Vous venez d’apprendre à personnaliser le bouton « Ajouter au panier » dans WooCommerce. 🤗Nous supposons maintenant que vous avez une idée sur ce qu’il y a à faire et que vous pouvez travailler tout seul. N’hésitez à vous lancer en vous référant à quelques cas d’illustration utilisés dans cet article.

Si vous avez de difficultés à modifier le bouton « Ajouter au panier » de votre boutique WooCommerce, alors n’hésitez pas à nous envoyer un message en utilisant la section Commentaires. 

Besoin d'une solution de sauvegardes en ligne ?

LWS vous conseille sa formule de sauvegarde Cloud Drive en promotion à -50% (offre à partir de 3,99€ par mois au lieu de 7,99 €). Non seulement vos données sont sauvegardées en France mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Avatar de l'auteur

Auteur de l'article

Joseph

Bonjour, je m'appelle Joseph. Je suis rédacteur spécialisé dans WordPress, PrestaShop et d'autres CMS. Fort d'une expertise approfondie en PHP et MySQL, je partage mes connaissances à travers des tutoriels simples et accessibles. Passionné par le développement et la transmission de savoir, j'aime expliquer et rendre les concepts techniques compréhensibles pour tous

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (0)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.