Return to previous page

Proceed to checkout button colour - by queenb123

This topic has 6 replies, 3 voices, and was last updated 6 years, 10 months ago ago by Amzy Leel

  • Avatar: queenb123
    queenb123
    Participant
    June 24, 2017 at 19:27

    Hi,

    How do i change the Proceed to checkout button colour button and the hover colour please?

    sssss

    #166331 Copied
    5 Answers
    Avatar: amzy
    Amzy Leel
    Participant
    June 25, 2017 at 07:18 
    .wc-proceed-to-checkout .checkout-button { background-color: #d64444; }

    put the above code in,

    8theme options >> styling >> custom css >> global custom css

    and change the color code to the color you want.

    #166342 Copied
    Avatar: queenb123
    queenb123
    Participant
    June 26, 2017 at 13:21

    thanks but what about the hover colour?

    #166427 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 26, 2017 at 15:12

    Hello,

    Please change previous code to:

    .wc-proceed-to-checkout .checkout-button {
    background-color: #d64444;
    border-color: red;
} 
.wc-proceed-to-checkout .checkout-button:hover {
    opacity: 0.5;
    background-color: blue;
    border-color: blue;
}

    Regards

    #166439 Copied
    Avatar: queenb123
    queenb123
    Participant
    June 26, 2017 at 20:23

    Thank you!

    #166465 Copied
    Avatar: amzy
    Amzy Leel
    Participant
    June 27, 2017 at 05:41

    You are welcome.
    Do not hesitate to ask if you have any other question (ask in new topic/post)

    #166474 Copied
  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Organic Store – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Finances – WordPress WooCommerce Theme
lazy-placeholder
Typography – WordPress WooCommerce Theme
lazy-placeholder
Gaming – WooCommerce Theme
lazy-placeholder
Interior – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
Designers – WordPress WooCommerce Theme
lazy-placeholder
Games Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.