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

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

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

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:

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

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.

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 :

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?

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 :

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