How to match the colors of your WooCommerce store with Divi?

Published on 13/05/2019 | 6 comments

You've just added an online store to your Divi site and you realize that the WooCommerce buttons are a terrible blue? Don't worry, in this article, I'll quickly explain how to get a store that matches your graphic design...

Here is the program:

  1. Change the theme accent color
  2. Change the color of the hover buttons
  3. Change the color of the WooCommerce promo badge
  4. Use a different color than the theme's accent color
Changer les boutons de couleur WooCommerce et Divi

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Change the theme accent color

Couleur de base - WorCommerce et Divi

As you can see in the screenshot above: this is what a product listing looks like in an online store created with WooCommerce and Divi. If you don't change anything, your product will look like this:

  1. The WooCommerce notification will have a blue background
  2. The button View cart will be written in blue
  3. The promotional badge will be orange
  4. The product price will be blue
  5. The button Add to cart will also be blue.

And that blue, I guess we all hate it!!!

So here's how to change the color of most WooCommerce buttons/notifiers in one click:

Couleur d'accent du thème Divi
  1. Go to the tab Appearance > Customize > General Settings > Layout Settings. Set the accent color of your theme. This means that many elements on your site will have the same color. This helps to unify the design of your site and will also work for your store.
  2. This way, the WooCommerce notification will take the accent color of your theme.
  3. The price of the product as well.
  4. However, the add to cart button will remain blue for the time being, on mouse over.
  5. And the promo badge, will remain orange as well.

2 - Change the color of the hover buttons

Bouton au survol - Divi et WooCommerce

To change the color of the button Add to cartbutton, when the mouse hovers over it:

  1. Go to the Appearance > Customize > Buttons > Hover Button Style. Set the color of the text on mouseover.
  2. Now the hover text gets the desired color.
  3. The promo badge is always orange. We'll see how to change it next.
plus de ressources pour Divi

3 - Change the color of the WooCommerce promo badge

There is no option to change the background color of the promo badge. You will have to do it in CSS :

Changer la couleur du badge promo Divi et WooCommerce
  1. Go to the tab Appearance > Customize > Additional CSS.
  2. Enter the code below.
  3. The color of the promo badge is customized!
/* changer la couleur du badge promo woocommerce */

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

Of course, you will change the color code to use your own.

4 - Use a different colour from the theme's accent colour

What if you want to use a different color for your WooCommerce store than the Divi theme accent color?

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

It is quite possible. In this case you will have to customize your WooCommerce store entirely with CSS.

The following code is to be pasted to the tab Appearance > Customize > Additional CSS.

/* 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;
 }

Here, too, you'll want to consider changing the color code with your own.

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

You will also like :

Changer la couleur des boutons WooCommerce
Harmoniser la couleur de la boutique avec la charte graphique

618 words

2

You should like it too:

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

6 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.

  5. sanchez

    Bonjour Lycia,
    je recherche une manière de changer la forme des boutons, auriez-vous une solution?

  6. Lycia Diaz

    Ça ne fonctionne pas si tu personnalises tes boutons depuis l’onglet Apparence > Personnaliser > Boutons ?

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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