styling on woo checkout page

add this to your cart and you'll get to the ckeckout page: http://kungfuadvertising.com/rm/product/the-redemption-retreat-2/

What css can I use to change the color of the bar asking for a coupon and the place order button (just add a random color for the hex). ALso, what css would make the apply coupon button correct height and how could I change it's color as well

  • Jorge
    • Site Builder, Child of Zeus

    Hello,

    In your custom css you are adding background to
    #place_order
    and
    .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message
    but you are forgetting the # in your color.
    and you have input {max-height:25px !important}. This is why the button have this height.

    Thank you!
    Note: Im not an official supporter

  • Ken Kimbrell
    • The Crimson Coder

    Hello Jonathan-

    I see you were successful in changing the background color of those elements. Thanks to the fine work of one of our community members. You're Awesome Jorge! :stuck_out_tongue_closed_eyes:

    If there is anything else I can help you with, let me know!

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support

  • Ken Kimbrell
    • The Crimson Coder

    Hello Jonathan-

    If you look how close the response time from yours is to mine, it is easy to see that I was most likely in the middle of writing that and did not see your response. I do apologize for any reiteration or inconvenience that may have caused you.

    So, your desired result is to change the text color of the check out buttons and you are searching for the correct CSS to achieve that?

    I was able to replicate that result with this CSS code:

    #place_order {
    
        color: #000 !important;
    
    }

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support

  • Ken Kimbrell
    • The Crimson Coder

    Hello Jonathan-

    As Jorge demonstrated if that is the desired result your are trying to achieve you will need to apply this CSS style:

    .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
    
        background: #000 !important;
    
    }

    I recommend using the Simple CSS plugin or applying this style in your child-theme's style.css. As the current style is set to !important which takes precedence over other cascading styles. I also see that you applied:

    color: black !important

    the property "color" is to style the text of an element.
    the property "background", or "background-color" is used to style the color of the background of an element.

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.