Woocommerce Checkout background for place order area

[ROBIN]

I have looked in the inspect area for a while now and I can’t find out where to change the background color of the area where the Purple Place Order button is.

At first I just wanted to change the text color but that text area is the same as the content area.  When I change the text in the box it changes all the content, that won’t work.  Then I thought Ok, I will change the color of the background so the words show up that are now almost hidden because they are white.  I can’t find that selector in the inspect area anywhere.

Would you mind seeing if you can find out how I can change the background into a color that will show the words?

Here is the link:  Checkout – Front Street Gallery

Thanks for any help you can provide.

[hkp]

@Robin

For background try  – pale yellow:

.woocommerce-error .woocommerce-info .woocommerce-message {background-color: #fff4c8;}

For top border color try   – pale yellow:

.woocommerce-info {border-top-color: #fff4c8;}

The color of the words in the box seems to be color: #515151

Regards!

 

[scrambler]

Below is the Woocommerce rule that defines the style.

I Would think there are options in Woocommerce that let you change that.

But if there really is not, if you inspect the box in your browser, the developer tool shows you the rule involved in the styling (below).

So to change it, add that rule to the theme Global Custom CSS Rule box with different values

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
background-color: #a46497;
color: #fff;
-webkit-font-smoothing: antialiased
}

[ROBIN]

I didn’t know the following when I asked.  You have to have something in the cart to see the area I am talking about.

When I adjust this in the inspect area it is what needs changed, BUT it doesn’t do it on the site.

#add_payment_method #payment,.woocommerce-cart #payment,.woocommerce-checkout #payment {
background: #ebe9eb;
border-radius: 5px
}

I didn’t realize you had to click the css button that is to the right of the following to get the Css.

#add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li {

I hope that will help

 

[scrambler]

I don’t follow what you are doing.

I gave you the rule that woocomerce is using , and you tell me you put a different one in ?

Have you tried to do what I said?

Also, if when trying the rule I gave you it does not work, try adding !important

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
background-color: #ebe9e !important;
border-radius: 5px !important;
}

[ROBIN]

This reply has been accepted as the best answer.

Thanks for your help

In the end this is what I needed

#add_payment_method #payment,.woocommerce-cart #payment,.woocommerce-checkout #payment {
background: #cecece;
border-radius: 5px
}

Like I said I hadn’t realized I needed to click the + sign to find the CSS I was trying to change

As always I appreciate your help, sometimes you get me on the right track, without even knowing it.

Have a great day.

[Author]

Posts