Comment harmoniser les couleurs de sa boutique WooCommerce avec Divi ?

Publié le 13/05/2019 | 4 commentaires

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

618 mots

2

Ça devrait vous plaire aussi :

Effet zoom sur image avec texte cliquable

Effet zoom sur image avec texte cliquable

Cet article vous explique comment obtenir simplement un effet zoom au survol des images avec un texte et un lien cliquable. Pas besoin d’extension, Divi permet de le faire facilement !

4 Commentaires

  1. audrey PUYBONNIEUX

    Bonjour, j’ai regardé pour faire mon changement de couleur d’accent du thème mais je pense avoir la dernière version de DIVI. donc j’ai rien pour le changer dans la manière que vous l’expliquer comment faire dans ce cas et dans quelle ligne mon css faut faire les changement;
    merci à voua d si vous pouvez m’aider.
    Audrey

  2. Lycia Diaz

    Salut Audrey, tu dois inspecter le code CSS dans ton navigateur pour trouver quelle est la ligne à changer.

  3. Broggini

    Bonjour,

    je ne sais pas si je suis dans la bonne section.

    Je post ici mon problème:

    J’utilise le layout ‘Nutritionnist’ pour mon site que je personnalise. Il n’y a pas de page SHOP dans ce layout.
    Donc j’utilise un autre layout qui possède une page SHOP.

    Seulement cette page SHOP ne se met pas en fullWidth comme convenu.

    J’ai essayé plusieurs possibilités, ajout de code CSS, parametrages dans les options de theme, mais rien n’y fait.

    Auriez-vous une solution?

    Merci à vous 🙂

    Damien

  4. Lycia Diaz

    Salut Damien,
    Tu dois vérifier le dimensionnement, soit des sections, soit des rangées. Tu dois mettre à 100% au lieu de 80% et mettre la largeur à 2500px au lieu de 1080px. Ça se passe dans les réglages des sections ou des rangées à l’onglet Styles > Dimensionnement ou Styles > Espacement.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This