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/PDF, role-based column visibility, and auto-refresh. Every table embeds on any page. Auto-refresh tables reduce page reload frequency by 89% in live-data dashboard deployments (Kinsta performance benchmarks, 2024).

What You Need Before You Start?

This feature sits firmly in TableCrafter's Pro tier. Make sure you have the following in place before diving into the builder:

• TableCrafter Pro activated and licensed on your site
• 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.

This step completes the connection between your data source and the TableCrafter table engine. Once saved, the plugin caches the connection credentials in the WordPress options table and uses them on every subsequent page load. If you update the source configuration later — for example, rotating an API key or changing a sheet URL — return to this step, enter the new value, and save again. The table updates immediately on next load without any shortcode changes.

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, choose a Background Color and Text Color, and optionally write a Display Label (for example, display Processing instead of the raw processing slug).

A sensible starting color scheme that matches WooCommerce conventions:

pending     → background #f0ad4e (amber)  | text #fff
processing  → background #5b9bd5 (blue)   | text #fff
on-hold     → background #f0ad4e (amber)  | text #fff
completed   → background #5cb85c (green)  | text #fff
cancelled   → background #d9534f (red)    | text #fff
refunded    → background #9b59b6 (purple) | text #fff
failed      → background #d9534f (red)    | text #fff

Click Save Table again once all badge rules are defined. TableCrafter stores the badge configuration alongside the column metadata, nothing is written to the WooCommerce database. 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, and no per-row limits on the free tier. 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/PDF, role-based column visibility, and auto-refresh. Every table embeds on any page with a [tablecrafter] shortcode or the native Gutenberg block.

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 Display Label you configured, not the raw slug.

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.