How can I colour match my WooCommerce shop with Divi?

You've just added an online shop 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 your shop to match your graphic design...

Here is the programme:

1. Changing the theme accent colour
2. Change the colour of the hover buttons
3. Change the colour of the WooCommerce promo badge
4. Use a different colour from the theme's accent colour

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - Change the theme accent colour

As you can see in the screenshot above, this is what a product listing looks like in an online shop 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 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 basket will also be blue.

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

Here is how to change the colour of most WooCommerce buttons/notifiers in one click:

1. Go to the tab Appearance > Customise > General settings > Layout settings. Set the accent colour of your theme. This means that many elements of your site will have the same colour. This helps to keep the design of your site consistent and will also work for your shop.
2. This way, the WooCommerce notification will take on the accent colour of your theme.
3. The price of the product too.
4. However, the add to cart button will remain blue for the time being, on mouse-over.
5. And the promo badge will also remain orange.

2 - Change the colour of the hover buttons

To change the colour of the button Add to basketbutton, when the mouse hovers over it:

1. Go to the tab Appearance > Customise > Buttons > Hover Button Style. Set the colour of the mouse-over text.
2. Now the hover text gets the desired colour.
3. The promo badge is always orange. We will see how to change it next.

3 - Change the colour of the WooCommerce promo badge

There is no option to change the background colour of the promo badge. You will have to do it in CSS :

1. Go to the tab Appearance > Customise > Additional CSS.
2. Enter the code below.
3. The colour of the promo badge is customised!

/* changer la couleur du badge promo woocommerce */

 .woocommerce span.onsale, .woocommerce-page span.onsale {
     background: #974df3 !important;
 }

Of course, you will change the colour code to use your own.

4 - Use a different colour from the theme's accent colour

What if you want to use a different colour for your WooCommerce shop than the Divi theme accent colour?

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

The following code should be pasted into the tab Appearance > Customise > 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 should consider changing the colour code to 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 colour on each page of your Divi site
• Get a background that changes colour automatically