skip to Main Content

Comment personnaliser le bouton « Ajouter au panier » de WooCommerce

Divi : le thème WordPress le plus facile à utiliser

Voici les meilleurs thèmes WordPress créés avec Elementor

Pour changer la couleur des boutons WooCommerce, Nous devrons changer ou remplacer le style css par défaut des boutons. Pour ce faire, nous aurons besoin d’ajouter un css personnalisé à votre thème enfant wordpress.

Il y a deux façons d’y arriver :

  • Ajoutez un css personnalisé dans le style.css du thème enfant
  • Utilisez certains plugin pour injecter du code css personnalisé sur vos pages Web.

Etape 1 : Installez le plugin Simple Custom CSS sur WordPress et activez-le

Nous allons utiliser un plugin WordPress pour injecter le css aux pages d’une boutique WooCommerce. Vous pouvez télécharger le plugin: Simple Custom CSS

Vous pouvez lire notre tutoriel sur l’installation et l’activation de plugin WordPress. Après l’activation du plugin, un nouveau sous-menu s’ajoutera au menu Apparence :

Obtenez votre site Web en 24 heures avec TemplateMonster

Menu Custom CSS plugin WordPress

PEARL : un Thème WordPress dédié aux entreprises

En accédant à l’interface du plugin, vous accédez à une interface avec une zone de texte où vous pourrez entrer le code CSS personnalisé.

Interface plugin WordPress Simple Custom CSS

Mettez le css suivant sur la zone de texte et cliquez ensuite sur « Update Custom CSS« .

WPML, le meilleur plugin pour traduire votre site Web

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {

background: red !important;

color:white !important;

text-shadow: transparent !important;

border-color:#ca0606 !important;

}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background: red !important;

box-shadow: none;

text-shadow: transparent !important;

color:white !important;

border-color:#ca0606 !important;

}

Vous pouvez désormais accédez à votre boutique, vous verrez remarquerez que les boutons ont effectivement changé de couleurs. Pour changer la couleur des boutons, Remplacer la propriété  » backgroud: red !important » par une couleur de votre choix. Mettez à jour les codes et accédez à nouveau à votre boutique. En réalité, à l’aide du style que nous venons de vous fournir, vous pouvez complètement modifier la structure des boutons.

Avec un peu de recherche, vous pouvez créer des boutons uniques avec un style qui correspond à votre thème (surtout si ce dernier n’est pas compatible avec WooCommerce).

Découvrez la boîte à outils tout-en-un pour blogueurs

ajouter au panier bouton WordPress

Pour l’exemple suivant, vous pouvez utiliser le code CSS suivant.

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {

background-color:#6fba26;
 padding:10px;
 position:relative;
 font-family: 'Open Sans', sans-serif;
 font-size:12px;
 text-decoration:none;
 color:#fff;
 background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
 box-shadow: inset 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F;
 border-radius: 5px;

}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

top:7px;
 background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
 box-shadow: inset 0px 1px 0px #0D496F, inset 0px -1px 0px #0D496F;
 color: #156785;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
 background: rgb(44,160,202);

}

C’est tout pour ce tutoriel. N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux.

Blair Jersyer

Developpeur WordPress et passionné de tout ce qui lié aux nouvelles tendances technologiques. Auteurs de plugins, thèmes WordPress et d'autres applications Web. Auteur chez BlogPasCher.com.

Cet article comporte 4 commentaires
  1. Eh bien, c’est fantastique de traduire un morceau de code de l’anglais vers l’italien. CSS est plein d’erreurs! Mais pouvons-nous le faire?!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
5 Partages
Partagez3
Tweetez2
Enregistrer