skip to Main Content

Comment personnaliser le bouton « Ajouter au panier » de WooCommerce

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

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 500.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [-10% de réduction]

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 :

Créez facilement votre site Web avec Avada

Arrêtez de payer des Webmasters et créez vous-même n'importe quel type de site Web avec Avada. Créez votre site Web en 2 clics. 56 templates déjà disponibles. [GRATUIT]

  • 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 :

Menu Custom CSS plugin WordPress

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

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

Interface plugin WordPress Simple Custom CSS

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

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

Téléchargez les meilleurs plugins WordPress

Booking, membership, formulaires, WooCommerce, Sécurité, SEO, et bien plus... Téléchargez les meilleurs plugins WordPress pour votre Blog ou votre site Web. [Recommandé]

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.

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
Partagez