You have just added an online store to your Divi site and you realize that the WooCommerce buttons are a dreadful blue? Don't worry, in this article, I will quickly explain how to get a shop in harmony with your graphic charter...

Here is the program:

  1. Change the accent color of the theme
  2. Change the color of the buttons when hovering
  3. Change the color of the WooCommerce promotional badge
  4. Use a color different from the accent color of the theme
Changer les boutons de couleur WooCommerce et Divi

Advertisement: 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 accent color of the theme

Couleur de base - WorCommerce et Divi

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

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

And this bruise, I guess we all hate it!

Here is how to change the color of most WooCommerce buttons/notifications with a single click:

Couleur d'accent du thème Divi
  1. Go to the tab Appearance > Customize > General settings > Layout settings. Define the accent color of your theme. This means that many elements of your site will have the same color. This makes it possible to standardize the design of your site and it will also affect your shop.
  2. Thus, the WooCommerce notification will take the accent color of your theme.
  3. The price of the product also.
  4. However, the add to basket button will remain blue for now, when the mouse hovers over it.
  5. And the promotional badge will also remain orange.

2 - Change the color of the buttons when hovering

Bouton au survol - Divi et WooCommerce

To change the color of the button Add to the basketwhen the mouse hovers over it:

  1. Go to the tab Appearance > Customize > Buttons > Button Style > Hover Button Style. Define the color of the text when you hover the mouse.
  2. Now the text on the flyover gets the desired color.
  3. The promotional badge, on the other hand, is always orange. We will see how to modify it afterwards.
plus de ressources pour Divi

3 - Change the color of the WooCommerce promotional 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 promotional 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 color different from the accent color of the theme

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

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

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

The following code is to be pasted on 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 will think about changing the color code with yours.

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

You will also like it:

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

Pin It on Pinterest

Shares
Share This