WordPress et WooCommerce, c'est quoi ?
WordPress est un logiciel gratuit, ayant une interface complète et des fonctions qui restent payantes, permettant de créer des sites internets, afin de faire la partie design mais aussi responsive qui consiste à adapter votre site sur plusieurs types d’appareils (téléphone, tablette, etc..).
Avec toutes ces extensions, WordPress en a une parmi lesquelles il est possible de transformer votre site en boutique en ligne. Celle-ci se nomme WooCommerce.
Elle est gratuite, facile d’utilisation et elle est également traduite dans plus de 24 langues si vous voulez que votre e-commerce soit un marché international.
Si vous cherchez à l’installer, ce plugin est disponible dans l’onglet “Extension de WordPress”
Comment fait-on pour changer les couleurs sur WooCommerce ?
Vous avez dit changer les couleurs ? On vous y répond maintenant !
Voici la manière basique pour changer les couleurs que vous voulez via l’extension WooCommerce.
Si vous souhaitez changer la couleur d’accent sur votre thème (faire en sorte à ce que votre site change de couleur) vous devez aller dans l’onglet Apparence et cliquer sur Personnaliser, ensuite Paramètres généraux puis Paramètre de mise en page.
Enfin, vous sélectionnez une couleur. La plupart des éléments de votre site aura la même couleur ce qui agira sur la boutique (la notification WooCommerce deviendra de la couleur que vous souhaitez le prix du produit aussi).
Pour les boutons de survol, c’est simple, cliquez dans l’onglet Apparence sur Personnaliser, puis Boutons, et pour finir Style des boutons en survol. Votre texte en survol obtiendra la couleur que vous désirez mais le badge promotionnel ne changera toujours pas.
Le badge promo ne se modifie pas comme les autres. Pour le changer il faudra le faire en CSS (Cascading Style Sheets) qui est un langage informatique dont les lignes se composent essentiellement de code HTML ou XML.
Il faudra donc aller dans l’onglet Apparence, puis Personnaliser et enfin CSS additionnel.
Vous devez par la suite entrer le code suivant :
/* changer la couleur du badge promo woocommerce */
.woocommerce span.onsale, .woocommerce-page span.onsale {
background: #974df3 !important;
}
Il faudra entrer vos couleurs et non celles mises dans cet exemple.
Pour finir, si vous souhaitez utiliser une autre couleur que celle de l’accent du thème pour votre boutique vous pouvez également le faire en utilisant les codes CSS toujours en allant dans l’onglet Apparence, Personnaliser et CSS additionnel.
Mais alors, comment faire si le thème de WordPress ne vous permet pas de personnaliser les couleurs WooCommerce ?
Nous allons voir comment, grâce au CSS additionnel, nous pouvons réussir à personnaliser les items de notre choix.
Il se peut que votre thème ne vous propose pas la personnalisation WooCommerce ainsi vous êtes libre de pouvoir personnaliser certains items facilement grâce à la fonctionnalité “CSS additionnel”.
Nous allons voir comment facilement personnaliser les couleurs en trouvant les classes des éléments WooCommerce.
Utiliser l’outil Inspecter de Google pour cibler la bonne classe
Faites clic droit inspecter et l’onglet de droite apparaîtra
Utiliser l’outil de sélection pour déterminer la classe de l’éléments
En analysant chacun des éléments, trouvez la classe correspondant à l’item que vous souhaitez personnaliser.
Conclusion
Le logiciel WordPress est un logiciel qui reste complet malgré ses fonctionnalités payantes. On peut également lui ajouter des plugins afin de lui attribuer des fonctions avantageuses.
L’extension WooCommerce n’est pas 100% fiable car il est possible qu’elle ne retranscrive pas la même chose sur le design WordPress et WooCommerce.
C’est pour cela qu’il est préférable, même si cela prend du temps, de faire vos lignes CSS avec l’outil Inspecter de Google que de faire tout un travail qui ne sera peut-être pas visible à la fin.
Vous voulez créer un site personnalisé qui vous ressemble ? On vous accompagne
