Woocommerce Place Order Box Colours

Activello
1

Hello

Previously you sent me css to change the colours of the woocommerce message boxes. I would like code for the Place Order box that comes up after checkout. Please see attached.

Thank you,
Lucy

2

Screenshot…

3

Hi there,
Thanks for writing back.
In relation to your question here, could you possibly try out the following CSS code under the Appearance>Customize>Additional CSS section:

button#place_order {
color: #fff !important;
background-color: #ff0000;
}

I hope this helps.
Best Regards,
Support.

4

Hi

Thank you but that changes just the box that says Place Order and not the whole box that includes that and other text. I want to change the colours of the entire thing…Does this make sense?

Thank you,
Lucy

5

If possible I would also like css to make all buttons white when pressed - some are white and some are black.

6

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

7

Yes the link is www.theloveplace.co.uk/shop

8

This box

9

Hello there,

Try this CSS:


#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: red;
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
    background-color: blue;
    color: #515151;
}

Best Regards,
Support

10

Thank you. This almost works but if you see in the screenshot above, the interior box has a triangle at the top left corner. When I use the code to change the colours, this triangle stays grey - see attached.

11

Hi Lucy

Use this code for triangle:

#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {
border: 1em solid #f14fbb;
}

12

Thank you but when I try that this happens - it becomes a block instead:

13

Hi

Its still triangle for me,
Its not possible to change shape of this rectangle by the CSS i gave in my last response

14

Hi Noda

I just changed the size of the block and it has worked:

#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {
border: 0.2em solid #f2f2f2;
}

Thank you,
Lucy

15

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