Whatsapp: +65 9008 2564 | Email: adaleow@runaway.com.sg | WeChat ID: adaleow

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. 🙂

More To Explore

Elementor Pro 3.3.1 Plugin Missing

If you are using Elementor Pro 3.3.1 for your WordPress website, you may notice your elements in Pro all locked, and a note at the


Leave a Reply

Your email address will not be published.



Click one of our representatives below to chat on WhatsApp or send us an email to adaleow@runaway.com.sg

× How can I help you?