Free Digital Courses 1 min a Day

Designed for learners of all ages. Easy to understand. Deaf-friendly.

Start upgrading your skills today!

[WooCommerce Store] How to change the color for WooCommerce Checkout Purple button

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

The default color for WooCommerce buttons are purple. To change the colors of the buttons, you will need to go to Appearance > Customize > Additional CSS to input some code.

To change the color of the purple “Proceed to Checkout” button at cart page, use the code below:

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
background-color: #88C965;
color: #FFFFFF;
}

Add this for hover color change:

.woocommerce-cart .wc-proceed-to-checkout a:hover.checkout-button{
background-color: #88C965;
color: #FFFFFF;
}

The background color is the color of the button and the color below is color of the text.

In order to write such a code for each part, you need to use the right selector.

You may refer here for html color codes: https://www.computerhope.com/htmcolor.htm#:~:text=HTML%20color%20codes%20are%20hexadecimal,tables%20on%20a%20web%20page.

Simply copy and paste the color you like to both the background and text color code in the CSS code.

This is the selector for the Cart Page “Proceed to Checkout” button: woocommerce-cart .wc-proceed-to-checkout a.checkout-button

To get to know how to write each selector, refer to this post: https://runaway.com.sg/en/2021/03/25/where-to-find-woocommerce-css-reference-codes/

Feel free to comment below if you have any questions. 🙂

Author

Leave a Reply

Your email address will not be published.

More To Explore

ZapConnect 2021

Thursday October 21, 2021 9:00am – 1:30pm PT Activate the unlimited potential of easy automation—whether you’re a first-time user or a seasoned pro. Join us

TWILIO SIGNAL Customer & Developer Conference

APAC – OCTOBER 21-22, 2021 Explore the intersection of technology, innovation, and communications. This year we’ll bring together 50,000 developers, product leaders, and visionaries to

The Billion Dollar Singles Day Virtual Summit

Thu, Oct 21, 2021 · 10:00 AM Singapore (GMT 8:00)  ASIA’S PREMIUM RETAIL CONFERENCE FOR RETAIL LEADERS. NOW VIRTUAL. The Billion Dollar Singles Day Virtual Summit

×

Hello!

Click one of our representatives below to chat on WhatsApp or send us an email to [email protected]

× How can I help you?