change woocommerce messages color

freeflyvr · December 2016

Hi,

how can i change the color of the woocommerce messages?

Also i want a little bit space between the header of the page and the woocommerce messages.

Would be really nice if you can help!

Best,

Mustafa

Albert · December 2016

Hi,

please send us link to page/s where you would like to do above changes first so we can have a look on it and give you best possible solution.

Thanks!

freeflyvr · December 2016

Hi,

It's the woocommerce product and checkout page.

I have several products in my shop, which means also several product pages and checkout pages.

One of the several product pages - https://www.freeflyvr.com/product/freefly-beyond-crossfire-eu/

one of the several checkout pages - https://www.freeflyvr.com/checkout/

want to change the color of these messages to #FF9933 --> https://www.freeflyvr.com/wp-content/uploads/2016/12/woocommerce-messages.png

Thanks!

Albert · December 2016

To change color of those messages, you need to use custom css:

.alert_info { background: #000 !important; color: #FFF !important; }
.alert_info a { color: #E2E2E2 !important; }
.alert_info .alert_icon { background: #FFF !important; color: #000 !important; }

.alert_error { background: #000 !important; color: #FFF !important; }
.alert_error a { color: #E2E2E2 !important; }
.alert_error .alert_icon  { background: #FFF !important; color: #000 !important; }

freeflyvr · December 2016

hi,

Awesome, that works great!

is there a way to create some space betweend the first message and the header? Right now there's no space.

https://www.freeflyvr.com/wp-content/uploads/2016/12/woocommerce-messages.png

Thanks!

Albert · December 2016

Yes, to add the space, please turn off Content Padding option under Theme options > Global > Advanced section.

freeflyvr · January 2017

Hi,

1. The alert icon message is still blue on my checkout page. I changed all the colors to orange and black but the alert icon didn't change.

see here --> https://www.freeflyvr.com/wp-content/uploads/2017/01/woocommerce-messages-alert-icon.png

2. On the individual product pages, the woocommerce messages still have the standard color. How can i change this?

see here --> https://www.freeflyvr.com/wp-content/uploads/2017/01/woocommerce-product-page-message.png

3. An empty cart gives me also different woocommerce message colors. How can i change this?

se here --> https://www.freeflyvr.com/wp-content/uploads/2017/01/woocommerce-cart-messages-and-button.png

Thank you in advance!

Albert · January 2017

Looks like you need more css's then we gave you above. Custom CSS for all available alerts, you can find in different topic http://forum.muffingroup.com/betheme/discussion/comment/86333/#Comment_86333

freeflyvr · January 2017

Thank you for your quick comment.

I've applied the custom css code. But i still seem to have the same color. The warning icon did not change the color.

see here --> https://www.freeflyvr.com/wp-content/uploads/2017/01/woocommerce-messages-alert-icon-1.png

and the same goes for the empty cart message in woocommerce.

can you help me with that.

thanks!

Albert · January 2017

Ok, we are sorry. We finally found what's wrong. In above css, we forgot about ! before important declaration. We already did modification in above css so please copy it once again and paste.

change woocommerce messages color

Comments