# Colour-Coded Order Statuses in the Orders List

> Gives each order status its own clear colour in the admin orders list, so processing, on-hold and failed orders stand out at a glance.

- Type: CSS
- Runs: Admin head
- Category: [WooCommerce](https://wpide.com/library/category/woocommerce/)
- Requires: WooCommerce
- Tags: woocommerce, admin, orders, styling
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/woo-order-status-colours/

## Code

```css
.order-status.status-processing { background: #c6e1c6; color: #2c4700; }
.order-status.status-on-hold { background: #f8dda7; color: #573b00; }
.order-status.status-pending { background: #e5e5e5; color: #454545; }
.order-status.status-completed { background: #c8d7e1; color: #003d66; }
.order-status.status-cancelled { background: #eee; color: #777; text-decoration: line-through; }
.order-status.status-refunded { background: #e5d4f2; color: #4b1f6f; }
.order-status.status-failed { background: #eba3a3; color: #761919; font-weight: 600; }
.order-status.status-checkout-draft { background: #f0f0f1; color: #50575e; font-style: italic; }
.order-status.status-awaiting-shipment,
.order-status.status-ready-pickup { background: #b3e5f5; color: #0b4f63; }
```

## Notes

Works on the HPOS and legacy order screens; add rules for custom statuses by slug, such as .status-awaiting-shipment.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Colour-Coded Order Statuses in the Orders List" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/