Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How To Change WooCommerce Order Status Colors?

As an online store owner, if you are loooking for ways to change the built-in order status colors provided by WooCommerce, then it is possible with just a few lines of code. This customization makes easier for administrators to quickly identify the status of an order at a glance.

Solution: Change WooCommerce Order Status Colors

The code snippet below helps you set your preferred unique color for each default order statuses of WooCommerce.

function ts_change_order_processing_row_color(){?>

<style type="text/css">
.order-status.status-processing {
    background-color: #ADD8E6; /*  Blue */
    border-color: #ADD8E6; /* Blue border color */
    border-radius: 5px !important;
    padding: 10px;
    color: black;
}
.order-status.status-completed {
    background-color: #D8BFD8; /* Thistle */
    border-color: #D8BFD8; /* Thistle border color */
    border-radius: 5px !important;
    padding: 10px;
    color: black;
}
.order-status.status-on-hold {
    background-color: #90EE90; /* Green */
    border-color: #90EE90; /* Green border color */
    border-radius: 5px !important;
    padding: 10px;
    color: black;
}

<?php }

add_action('admin_head','ts_change_order_processing_row_color');

Output

As we have defined 3 different colors in the code for the order statuses such as processing, on-hold, and completed these colors are set to the associated statuses. The below image represents the different colors set to each order status which has overridden the default color of WooCommerce order statuses.

How To Change WooCommerce Order Status Colors? - Tyche Softwares

Before we applied the code, let’s check out how the default colors for order statuses look on the WooCommerce Orders table.

How To Change WooCommerce Order Status Colors? - Tyche Softwares

Similarly, you can also do some customizations that will change the text of processing order statuses viewed by customers on the Thank you Page. Refer to this post to change the processing order status text on the order received page in WooCommerce.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
2 Comments
Newest
Oldest
Inline Feedbacks
View all comments
Kalman H.
9 days ago

Hey, thank you for the article.
Could you help me where to put this snippet, since my functions.php drops an error if I put it to the end of the code.
thanks

2
0
Would love your thoughts, please comment.x
()
x