How to Add Status Badges to a WooCommerce Orders Table

Updated July 2026 • 7 min read • By Fahad Murtaza • By Fahad Murtaza

Order status is the heartbeat of any WooCommerce store, but the default WooCommerce orders screen is only visible to admins. TableCrafter lets you surface a real-time orders table anywhere on your site, with color-coded status badges that make pending, processing, completed, and refunded orders instantly scannable at a glance. In this guide you will build a WooCommerce orders table from scratch and configure status badges so every row communicates its state without anyone needing to read a word. WordPress powers 43% of all websites globally (W3Techs, July 2026), and TableCrafter bridges the gap between the data you collect and the tables your users need to see, no custom PHP, no dashboard access required for viewers. The free version on WordPress.org supports CSV, JSON, Google Sheets, and Excel. Pro adds Gravity Forms, Airtable, Notion, WooCommerce, REST APIs, inline cell editing, export to CSV and Excel, role-based column visibility, and auto-refresh. Every table embeds on any page with a [tablecrafter] shortcode or the native Gutenberg block.

What You Need Before You Start?

The WooCommerce data source is a Pro-only feature. Status badges, however, work on all plans including the free version. For this guide you need both, so a Pro license is required for the WooCommerce source. Make sure you have the following in place before diving into the builder:

• TableCrafter Pro activated and licensed on your site (required for the WooCommerce data source)
• WooCommerce installed and at least a handful of orders in your database
• A page or post where you want to embed the table

If you are still evaluating, the free plugin is available on WordPress.org and you can upgrade to Pro from the TableCrafter settings screen without reinstalling anything. Your table configurations are preserved through the upgrade.

Step 1: How Do I Create a New Table with the WooCommerce Data Source?

Navigate to TableCrafter → Tables → Add New in your WordPress admin. The table builder opens with a data source selector at the top.

1. Under Data Source, choose WooCommerce. TableCrafter will query your WooCommerce orders directly, no Gravity Forms entry needed.
2. Give the table a clear internal name, such as WooCommerce Orders. This name is only visible to admins in the table list.
3. Under Columns, click Add Column and select the fields you want to display. Typical choices for an orders table include: Order Number, Customer Name, Order Date, Order Total, Payment Method, and Order Status.
4. Drag the columns into the order that makes sense for your use case, Order Status is usually most useful near the front so visitors can filter by it quickly.

Click Save Table before moving to badge configuration. TableCrafter assigns the table an integer ID, you will use this ID in the shortcode later.

Step 2: How Do I Configure Status Badges on the Order Status Column?

Status badges are TableCrafter's text-to-color mapping system. For each distinct value a column can hold, you define a label and a background/text color pair. TableCrafter then replaces the raw cell text with a styled pill badge at render time.

To configure badges on your Order Status column:

1. In the column list, click the gear icon next to your Order Status column to open column settings.
2. Scroll to the Status Badges section and toggle it on.
3. Click Add Badge Rule for each WooCommerce order status you want to style. WooCommerce ships with the following statuses out of the box:
   • pending, awaiting payment
   • processing, payment received, order being fulfilled
   • on-hold, awaiting manual action
   • completed, fulfilled and closed
   • cancelled, cancelled by admin or customer
   • refunded, payment returned
   • failed, payment failed
4. For each rule, enter the exact status string in the Value field and choose a Background Color hex and a Text Color hex. Both hex fields are required; if either is missing or not a valid hex color, the rule is dropped. The badge displays the raw cell value as its text, there is no separate display label field.

A sensible starting color scheme that matches WooCommerce conventions. Note that WooCommerce stores the status without the wc- prefix for most statuses; verify the exact stored string in your WooCommerce orders admin before defining rules:

pending     → bg: #f0ad4e  text: #fff
processing  → bg: #5b9bd5  text: #fff
on-hold     → bg: #f0ad4e  text: #fff
completed   → bg: #5cb85c  text: #fff
cancelled   → bg: #d9534f  text: #fff
refunded    → bg: #9b59b6  text: #fff
failed      → bg: #d9534f  text: #fff

Click Save Table once all badge rules are defined. TableCrafter stores the badge configuration alongside the column metadata; nothing is written to the WooCommerce database.

Step 3: How Do I Set Role-Based Permissions?

A WooCommerce orders table often needs different audiences: shop managers should see every order, while customers might only see their own. TableCrafter Pro handles both levels with its role-based permission system.

In the table builder, open the Permissions tab:

• Table-level access: Choose which WordPress roles can view this table at all. For an internal admin orders table, restrict to administrator and shop_manager. For a customer-facing order history page, include customer.
• Column-level visibility: Sensitive columns like Payment Method or Customer Email can be hidden from lower-privilege roles while remaining visible to admins. Toggle the eye icon on each column to set per-role visibility.

Save your permissions settings before embedding the table.

Step 4: How Do I Embed the Table with the Shortcode?

TableCrafter registers three shortcode aliases that all resolve to the same handler. Use whichever fits your workflow:

[tablecrafter id="X"]
[tablecrafter id="X"]
[tablecrafter id="X"]

Replace X with the table ID shown in TableCrafter → Tables. Paste the shortcode into any page, post, or widget. If you are using the block editor, drop in a Shortcode block. Elementor users can use a Shortcode widget.

For a minimal orders status page you might use:

[tablecrafter id="12"]

TableCrafter will render the table with full pagination, search, and column sorting enabled by default. The Order Status column will display your configured badges instead of raw status strings.

Step 5: How Do I Fine-Tune and Test?

With the table embedded, load the page in a browser and verify the following before calling the setup complete:

• Badge rendering: Each status cell should display a colored pill. If a cell shows the raw slug instead of a badge, open the column settings and confirm the Value field exactly matches what WooCommerce stores, WooCommerce sometimes prefixes statuses with wc- in the database (e.g., wc-processing). Add a second badge rule with the prefixed form if needed.
• Role access: Log in as a customer role account and confirm the table either shows only permitted columns or is entirely hidden if you restricted access to admins only.
• Search and filter: Use the search box to filter by a customer name, or use column filters to narrow by status. Pro tables support advanced filter types including multi-select dropdowns, particularly useful for status filtering when users want to see all Processing and On Hold orders simultaneously.
• Mobile layout: TableCrafter tables are responsive by default. On narrow viewports, less-critical columns collapse and a row-expand control lets users see the full record. Verify the Order Status badge is among the always-visible columns on mobile, you can drag it to the leftmost position in the column list to prioritize it.
• Export: If shop managers need to download the filtered view, confirm the CSV or Excel export button appears and includes the correct rows. Status values in exports use the raw cell value, the same string the badge matched, not a display label (status badges have no display label feature).

Once everything checks out, your WooCommerce orders table with status badges is production-ready. Any new orders WooCommerce creates will appear in the table automatically on the next data refresh, there is no manual sync step.