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

Published on 13/05/2019 | 0 comments

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 Appearance > Customize > General Settings > Layout Settings. Set the accent color of your theme. This implies that many elements of your site will have the same color. This allows you to standardize the design of your site and it will also act on 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 Appearance > Customize > Buttons > Hover button style. Set the color of the text when the mouse hovers over it.
  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 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 indicator is to be pasted on the tabbed page 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

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Create a custom "back up" button in just a few clicks!

When I tell you we can do anything with Divi! No need to code or install many plugins... You just have to know where to look: the options are there! In this article, I'll show you how to create a back-to-top button in just a few clicks!

0 commentaires

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