Woocommerce personnalisation des couleurs

Wordpress et WooCommerce
Comment faire pour personnaliser les couleurs WooCommerce quand le thème ne vous le permet pas comme avec hello elementor

Partager cet article

Image de Raphael

Raphael

Table des matières

WordPress et WooCommerce, c'est quoi ?

Les avantages d'utiliser WordPress & Woo Commerce

WordPress est un CMS open source gratuit, ayant une interface complète, permettant de créer des sites internets ou système intranet, extranet pour créer vos environnements digitaux intuitifs dans leurs gestions.

Les nombreux plugins vous offre infinie de possibilité.

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” 

Personnaliser les couleurs WooCommerce

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. 

Personnaliser les couleurs WooCommerce

Trouvez la classe ou id des items pour le personnaliser

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

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 simplement personnaliser les couleurs en trouvant les classes ou id des éléments WooCommerce. 

Vous avez deux choix, faire appel à la classe en commençant votre code par un . ou alors faire appel à l’identifiant de l’élément, commencez dès lors par #

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 les couleurs WooCommerce

Personnaliser n'importe quels éléments sur woo commerce en trouvant sa 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ément

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 CMS qui reste complet malgré ses fonctionnalités parfois limités. On peut le personnaliser à l’infinie et lui ajouter des plugins afin de lui attribuer des fonctionnalités dédiées à notre besoin

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. En sélectionnant indivuellement les id ou classes afin de pouvoir personnaliser les couleurs de 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

Création d’un Site E-Commerce pour la Réservation et le Paiement de Locations Saisonnières

Découvrez comment nous avons créé un site de location saisonnière avec WordPress et le plugin WP BOOKING CALENDAR.

Vous avez un projet ?

Faites nous part de vos besoins