As a shop manager you may want to see the WooCommerce order status in different colors on the orders page.
This is how to change the text or background colors of the Order Failed Status in WooCommerce > Orders. You need to either add the following snippet to your (child) theme's functions.php file or in a system plugin in /mu-plugins/ folder. Create the folder if it doesn't exist yet and create a php file in that folder and paste the code. It will be loaded automatically and won't need any special activation.
It is important to use !important after defining the styles because WooCommerce styles would take precedence otherwise.
The example below allows you to change the font color and the background color of the failed order status. If you want just one or the other you can either put the line in a multi line comments /* */ or just delete it.
<?php
add_action('admin_head', 'orbisius_tutorial_7479_render_styles');
/**
* This will override text color and background color of Refunded Order Status in WooCommerce - Orders
* @return void
* @see https://orbisius.com/7479
*/
function orbisius_tutorial_7479_render_styles() {
?>
<style>
.order-status.status-failed {
color: #fff !important;
background: red !important;
}
</style>
<?php
}
WooCommerce has these default Order Statuses
- Completed (wc-completed)
- On Hold (wc-on-hold)
- Pending (wc-pending)
- Processing (wc-processing)
- Cancelled (wc-cancelled)
- Refunded (wc-refunded)
- Failed (wc-failed)
- Checkout Draft (wc-checkout-draft)
