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

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

Here is the program:

1. Change the color of the theme
2. Change button color overfly
3. Change WooCommerce promo badge color
4. Use a different color from the theme d accent color

1 – Change the color of the theme

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

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

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

Here is how to change the color of most WooCommerce buttons/notifications in one click:

1. Go to the tab Appearance > Customize > General Settings > Layout Settings. Define the color accent of your theme. This implies 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 too.
4. On the other hand, the add button in the basket will remain blue for the moment on the mouse's side.
5. And the promo badge will stay orange too.

2 - Change button color overfly

To change the button color Add to cart, during mouse hovering:

1. Go to the tab Appearance > Customize > Buttons > Style of the fly-over buttons. Define the text color on mouse overfly.
2. Now, the text on the flyover gets the desired color.
3. The promo badge is still orange. We'll see how to change it afterwards.

3 – Change WooCommerce promo badge color

There is no option to change the background color of the promo badge. You'll 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 customised!

/* change the color of the promo badge woocommerce */ .woocommerce span.onsale, .woocommerce-page span.onsale { background: #974df3 !important; }

Of course, you Change the color code to use yours.

4 - Use a different color from the theme d accent color

How to do if you want to use a different color for your WooCommerce store of the divi theme accent color?

It's quite possible. In this case you will have to customise your WooCommerce shop entirely with CSS.

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

/* customise WooCommerce with Divi */ .woocommerce a.button, .woocommerce a.button.alt, .woocommerce a.button.alt, .woocommerce a.button:hover, .woocommerce-page a.button.alt, .woocommerce-page a.button.alt, .woocommerce-page a.button.alt, .woocommerce-page a.button:hover, .woocommerce button.button, .woocommerce-page button.button, .woocommerce-page button.button, .woocommerce-page button.button.button.alt, .woocommerce button.button:hover, .woocommerce button.button.button:hover, .woocommerce-page button.button:hover, .woocommerce-page button.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 tutos!

You will also like :

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