WooCommerce’s orders list has a quick-preview popup — click the eye icon on any row and a modal opens showing billing details, shipping details, and the order’s line items. It’s genuinely useful, and it’s entirely read-only by default: changing a status, or checking what’s in the order notes, still means abandoning the popup and opening the full order-edit screen.
Extending core the right way
Rather than overriding WooCommerce’s popup template — which breaks on the next WooCommerce update — we used the two official extension points it already ships: the woocommerce_admin_order_preview_get_order_details filter, which lets you inject additional data into what the popup receives, and woocommerce_admin_order_preview_end, an action that fires at the end of the popup’s Underscore.js template, letting you append markup that has access to that same data.
Using those two hooks together, we added:
- A live status dropdown with a Save button, wired to a small AJAX handler that updates the order and, critically, updates the underlying list row too — not just the popup — so the list is never left showing a stale status after you close it.
- A scrollable feed of the order’s internal notes, pulled via
wc_get_order_notes(), shown newest-first exactly as they appear on the full order screen. - The WhatsApp courier-handoff button described in a separate write-up, which lives in this same popup.
Making it look native
The trickiest part wasn’t the functionality — it was matching WooCommerce’s own visual rhythm closely enough that the additions don’t read as bolted on. We matched the padding, heading style, and spacing WooCommerce already uses for its “Billing details” panel, rather than inventing a new visual language for just this one popup. The result reads as an extension of the popup, not a plugin author’s add-on stapled underneath it.
Key takeaways
- WooCommerce’s official hook points for this popup exist precisely so you don’t have to override its template — using them keeps the customization update-safe.
- An admin-side AJAX update needs to touch every place the changed data is displayed, not just the control the user interacted with, or the UI silently goes stale.
- Visual consistency with the platform’s own components is a real design decision, not a nice-to-have — it’s what makes a custom addition feel trustworthy.
Running into a similar limitation in your own WooCommerce or WordPress admin? Let’s Talk — Artintech Solution builds exactly this kind of custom store tooling.