Quick Summary#
- Add a recognizable icon to your custom status.
- Set Color and Text Background Color for a readable badge.
- Choose how it appears in lists with Status View (Name or Icon).
- Preview the result in WooCommerce → Orders.
Open the status editor#
Path: WooCommerce → Orders → Order Status → Edit (pick a status) or Add New (create one).
ALT: Status editor opened from WooCommerce → Orders → Order Status.
Caption: “Open the status editor from Orders → Order Status.”
Add an icon#
Click Add Icon and pick a simple, descriptive icon. Avoid overly detailed shapes; prefer clear silhouettes.
ALT: Icon picker open for the custom status.
Caption: “Choose a simple, easy-to-recognize icon.”
ALT: Selected icon applied to the status.
Caption: “Confirm the icon is assigned.”
Choose badge colors#
Use Color (text/icon) and Text Background Color (badge background) to ensure contrast and quick scanning.
ALT: Open color pickers for text/icon and badge background.
Caption: “Set text/icon color and the badge background.”
Contrast tips#
- Dark text on a light background or light text on a dark background.
- Avoid low-contrast pairs (e.g., mid-gray on light gray).
- Keep a consistent palette across your statuses.
ALT: Comparison of high-contrast vs. low-contrast status badges.
Caption: “Prefer high-contrast combinations for readability.”
Status View: Name vs Icon#
Control how the status renders in the orders table.
- Name: shows the text label (clearest for all users).
- Icon: replaces text with the icon (works if your team recognizes the symbols).
ALT: Status View dropdown open with Name and Icon options.
Caption: “Choose whether to show the name or only the icon.”
Preview in Orders#
Save the status and open WooCommerce → Orders to validate readability at a glance.
- Check the badge in the Status column.
- If using Icon view, make sure the icon is self-explanatory.
ALT: Orders view showing badges rendered as Name and as Icon.
Caption: “Verify readability and consistency in the orders list.”
Best practices#
- Reuse 2-4 core colors to group stages (e.g., blues = in progress, greens = completed, reds = blocked).
- Reserve red/yellow for alerts or states that require attention.
- Don’t rely on color alone: the text or icon must be clear.
Troubleshooting#
- Badge looks pale/hard to read: increase contrast (text vs background).
- Icon is confusing: switch to a simpler symbol or use Status View = Name.
- No changes in Orders: save the status and refresh; clear cache if you use a caching plugin.
Updated on April 20, 2026 · Need help? Open a support ticket