14mn de lecture
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 :
- Avoir une boutique en ligne WooCommerce fonctionnelle
- Avoir les accès du tableau de bord d’administration de votre site en tant qu’administrateur
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.
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 ».
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é.
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 **/
}
Une 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.
Commentaires (0)