Woocommerce personnalisation des couleurs

Wordpress et WooCommerce
Cet article traitera du logiciel Wordpress et de son extension WooCommerce.

Partager cet article

Table des matières

WordPress et WooCommerce, c'est quoi ?

Les avantages d'utiliser WordPress & Woo Commerce

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 de l’extension WooCommerce.

Si vous souhaitez changer la couleur d’accent sur votre thème (faire en sorte que votre site change de couleur) 

  1. Vous devez aller dans l’onglet Apparence :
  2. Cliquez sur Personnaliser, ensuite Paramètres généraux puis Paramètre de mise en page
  3. Enfin, vous sélectionnez une couleur. La plupart des éléments de votre site auront 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. 

comment faire si le thème de WordPress ne vous permet pas de personnaliser les couleurs WooCommerce ?

Trouver la classe de l'items pour le personnaliser

En allant dans l’onglet Apparence, Personnaliser et CSS additionnel. 

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. 

Changer le badge promo en CSS personnalisé

Pour changer le badge promo 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 :

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

				
					 /* changer la couleur du badge promo woocommerce */

 .woocommerce span.onsale, .woocommerce-page span.onsale {

     background: #974df3 !important;

 }
				
			

Personnaliser n'importe quel éléments sur woo commerce en trouvant sa classe

Utiliser l’outil Inspecter de Google pour cibler la bonne classe

 Inspecter de Google

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

Outil sélection

En analysant chacun des éléments, trouvez la classe correspondant à l’item que vous souhaitez personnaliser.

Sélection et Identification

Trouver la classe

Conclusion

Comment personnaliser les couleurs de woo Commerce

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% compatible car il est possible qu’elle ne retranscrive pas les modifications 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  et les classes afin de pouvoir personnaliser ses couleurs pour l’interface de e-commerce Woocommerce.

Vous voulez créer un site personnalisé qui vous ressemble ? On vous accompagne

Vous voulez être informé(e) de nos dernières astuces

Inscrivez-vous pour recevoir nos astuces du mois, c'est promis pas de mail inutile

Découvrir nos autres astuces

Projets Clients

Création E-commerce coaching sportif

Création d’un e-commerce coaching sportif, coachcharlie.fr un projet de création d’e-commerce dans le monde du coaching sportif, simplifier votre processus de vente

Vous avez un projet ?

Faites nous part de vos besoins

small_c_popup.png

Vous souhaitez être contacté(e) par un(e) conseillé(ère)

Entrez votre nom et vos coordonnées :