Woocomerce Colours

Activello
1

Hello

Do you have CSS to change the colours at the top of the text boxes for ‘View Basket’ and ‘Apply Coupon Code’ in Woocommerce?

Thank you,
Lucy

2

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect the elements you are referring to?

Best Regards,
Support

3

Thank you, on this page - https://www.theloveplace.co.uk/shop/discover/ -when you add the product to the basket, it then refreshes and at the top shows:

“DISCOVER” has been added to your basket

in a grey box with a green border at the top and a green tick. I want to change the colour of the box and border and tick.

On this page - https://www.theloveplace.co.uk/checkout/ - when there are items in the basket, it shows at the top:

Have a coupon? Click here to enter your code

in a grey box with a purple border at the top and purple symbol and again I would like to change the colours of all.

Images attached.

4

Hi there

You can use this code:

.woocommerce-message {
border-top-color: #f0e2d2;
}
.woocommerce-message::before {
color: #e5d0b9;
}
.woocommerce-error {
border-top-color: #b81c23;
}
.woocommerce-error::before {
color: #b81c23;
}

5

Hi Noda

Thank you. Nothing changed when I added that.

Lucy

6

Hello there,

Please add the CSS by going to Appearance > Customize > Additional CSS and pasting it there.
Let me know if that worked.

Best Regards,
Support

7

Yes, that’s where I added it and nothing changed.

Thank you,
Lucy

8

Codes are not added lucydm :slight_smile:

Can you show me a screenshot?

9

I removed them because they don’t work for both issues. I have added them back in but the Checkout page still shows the coupon message as before.

Thank you,
Lucy

10

Hello there,

Try this CSS:


.woocommerce-message {
    border-top-color: #000000;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    background-color: red;
}

.woocommerce-message::before {
    color: red;
}

Best Regards,
Support

11

Hi Noda

It’s made the background red for the coupon code section but it still has a purple border and purple background.

I like the colours of the first code you added - how can I apply that code to the coupon code section too? Attached.

I would like to know how to change the box colour and colour of the View Basket box which becomes black when I hover over it.

Thank you,
Lucy

12

hi there

“It’s made the background red for the coupon code section” - css code give by my colleagues i example of the code, you have to change color codes in the css :slight_smile:
please verify your website and come back with the page URLs and screenshots of the remaining problems

13

Hi Noda

So, the first code created the last attachment which I like.

I want to apply that code to this attachment. When I use the second code, the purple remains and everything else goes red.

Thank you,
Lucy

14

Hi,

This CSS should work for that aspect:


.woocommerce .woocommerce-info {
    border-top-color: red;
}

.woocommerce .woocommerce-info:before {
    color: red;
}

Take care.

15

Thank you!

16

Hi, there

I will close this case now, Feel free to contact us again if you have other questions Thanks!