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
Changer les boutons de couleur WooCommerce et Divi

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

Couleur de base - WorCommerce et Divi

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 :

Couleur d'accent du thème Divi
  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

Bouton au survol - Divi et WooCommerce

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.
plus de ressources pour Divi

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 :

Changer la couleur du badge promo Divi et WooCommerce
  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 ?

couleur différence de la couleur d'accent du thème

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 :

Changer la couleur des boutons WooCommerce
Harmoniser la couleur de la boutique avec la charte graphique
Curabitur ut libero. ipsum libero tempus in Praesent suscipit odio

Pin It on Pinterest

Shares
Share This