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

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

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

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:

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

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.

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:

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?

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:

• Get a different color on each page of your Divi site
• Get a background that changes color automatically