To give a custom WooCommerce order status its own colors, open it at WooCommerce > Order Status in Additional Custom Order Status for WooCommerce and set Text color and Background color in the Styling Options box. The colors appear in the orders list “Status” column and on the order preview. Styling is free.
Where to set the colors #
Statuses are created and edited at WooCommerce > Order Status, not in the plugin settings at WPFactory > Order Status. Each status has its own Styling Options box. The box description notes that these colors are used in the “Status” column and on the order preview page.
Step-by-step #
- Go to WooCommerce > Order Status.
- Click a status to edit it, or click Add New to create one.
- In the Styling Options box, pick a Text color and a Background color with the color pickers.
- Click Update (or Publish for a new status).
- Open WooCommerce > Orders and check the colored label in the Status column.
Styling options #
| Label | Option ID | Type | Default |
|---|---|---|---|
| Text color | text_color |
Color | #000000 |
| Background color | bg_color |
Color | #999999 |
If you leave the defaults, the status shows black text on a grey label. Custom Order Status applies your colors to the status label wherever WooCommerce shows it in the admin orders list and order preview.
Styling the action button too #
If you add the status as an order list action button, its icon has separate colors in the Action Buttons Options box of the same screen: Order list icon color (default #999999) and Order list icon background color (default #ffffff). See Add Custom Order Status Action Buttons in WooCommerce.
Choosing effective colors #
- Use color meaning: red reads as urgent, green as complete, amber as waiting.
- Keep it readable: make sure the text color contrasts well with the background color.
- Stay on brand: reuse your store’s palette so the admin feels consistent.
Why visual statuses help #
- Faster scanning of the orders list, since each stage has a distinct color.
- Quicker identification of orders that need attention, for example a red “Awaiting payment”.
- A clearer overview of where every order sits in your workflow.
If the colors do not show #
- The status is a draft: only published statuses are loaded, so publish it.
- You are looking at the storefront: the colors are added to admin pages only. Customers do not see them on the My Account page.
- Old colors remain: reload the orders page after clicking Update, and clear any admin page cache.
FAQ #
Is order status styling free? #
Yes. Colors, like every per-status option except emails, are in the free version. Sending emails on status change is the only Pro feature.
Can I change the colors of built-in statuses like Processing? #
Yes, by creating a status that overrides the default one. See How to Restyle a Default WooCommerce Order Status.
Can I target a status with my own CSS? #
Yes. The label uses the CSS selector mark.order-status.status- followed by the status slug shown in the Status Slug box, for example mark.order-status.status-awaiting-shipment. The plugin’s colors use !important, so your rule needs it too.
Related guides #
- Creating Custom Order Statuses in WooCommerce
- How to Restyle a Default WooCommerce Order Status
- Add Custom Order Status Action Buttons in WooCommerce
Get more control #
Styling is free for every status you create. Additional Custom Order Status for WooCommerce Pro adds automated emails on status change. See what Pro unlocks.
Need a hand? Our team answers every ticket on the Custom Order Status support forum.
