Comment harmoniser les couleurs de sa boutique WooCommerce avec Divi ?

Vous venez d’ajouter une boutique en ligne à votre site Divi et vous vous rendez compte que les boutons WooCommerce sont d’un bleu effroyable ? Ne vous inquiétez pas, dans cet article, je vous explique rapidement comment obtenir une boutique en harmonie avec votre charte graphique…

Voici le programme :

1. Changer la couleur d’accent du thème
2. Changer la couleur des boutons au survol
3. Changer la couleur du badge promo de WooCommerce
4. Utiliser une couleur différente de la couleur d’accent du thème

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Changer la couleur d’accent du thème

Comme vous pouvez le voir sur la capture d’écran ci-dessus : voilà à quoi ressemble la fiche d’un produit d’une boutique en ligne créée avec WooCommerce et Divi. Si vous ne changez rien, votre produit aura cette allure :

1. La notification WooCommerce aura un fond bleu
2. Le bouton Voir le panier sera écrit en bleu
3. Le badge promo sera orangé
4. Le prix du produit sera bleu
5. Le bouton Ajouter au panier sera également bleu.

Et ce bleu, je suppose qu’on le déteste tous !!!

Voici alors comment changer la couleur de la plupart des boutons/notifiactions WooCommerce en un seul clic :

1. Rendez-vous à l’onglet Apparence > Personnaliser > Paramètres généraux > Paramètres de mise en page. Définissez la couleur d’accent de votre thème. Cela implique que de nombreux éléments de votre site auront la même couleur. Cela permet d’uniformiser le design de votre site et cela agira également sur votre boutique.
2. Ainsi, la notification WooCommerce prendra la couleur d’accent de votre thème.
3. Le prix du produit également.
4. Par contre, le bouton d’ajout au panier restera bleu pour l’instant, au survol de la souris.
5. Et le badge promo, restera orangé également.

2 – Changer la couleur des boutons au survol

Pour changer la couleur du bouton Ajouter au panier, lors du survol de la souris :

1. Rendez-vous à l’onglet Apparence > Personnaliser > Boutons > Style des boutons en survol. Définissez la couleur du texte au survol de la souris.
2. À présent, le texte au survol obtient la couleur désirée.
3. Le badge promo, quant à lui, est toujours orangé. Nous allons voir comment le modifier ensuite.

3 – Changer la couleur du badge promo de WooCommerce

Il n’y a pas d’option pour changer la couleur de fond du badge promo. Vous allez devoir le faire en CSS :

1. Rendez-vous à l’onglet Apparence > Personnaliser > CSS additionnel.
2. Saisissez le code ci-après.
3. La couleur du badge promo est customisé !

/* changer la couleur du badge promo woocommerce */

 .woocommerce span.onsale, .woocommerce-page span.onsale {
     background: #974df3 !important;
 }

Bien évidemment, vous changerez le code couleur pour utiliser le vôtre.

4 – Utiliser une couleur différente de la couleur d’accent du thème

Comment faire si vous désirez utiliser une couleur différente pour votre boutique WooCommerce de la couleur d’accent du thème Divi ?

C’est tout à fait possible. Dans ce cas-là vous devrez customiser votre boutique WooCommerce entièrement avec du CSS.

Le code ci-après est à coller à l’onglet Apparence > Personnaliser > CSS additionnel.

/* customiser WooCommerce avec Divi */

 .woocommerce a.button, .woocommerce a.button.alt, .woocommerce a.button.alt:hover, .woocommerce a.button:hover, .woocommerce-page a.button, .woocommerce-page a.button.alt, .woocommerce-page a.button.alt:hover, .woocommerce-page a.button:hover, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce-page button.button, .woocommerce-page button.button.alt, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce-page button.button:hover, .woocommerce-page button.button.alt:hover {
     color: #974df3 !important;
 }

 .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
   color: #974df3 !important;
     background: #974df3 !important;
 }

 .woocommerce .woocommerce-message {
     color: #ffffff!important;
 }

 .entry-summary p.price ins {
     color: #974df3 !important;
 }

 .woocommerce span.onsale, .woocommerce-page span.onsale {
     background: #974df3 !important;
 }

Ici, aussi, vous penserez à changer le code couleur avec le vôtre.

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

Vous aimerez également :

• Obtenir une couleur différente sur chaque page de votre site Divi
• Obtenir un arrière-plan qui change de couleur automatiquement