Resumo Rápido#

• 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.”

Práticas recomendadas#

• 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.

Solucionando problemas#

• 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.