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.

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

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.