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.
Opens WPIDE on
Code
.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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.