WooCommerce 的订单列表有一个快速预览弹窗：点击任意一行的眼睛图标，就会弹出窗口，显示账单信息、配送信息和订单商品。它确实很有用，但默认是只读的：要修改状态或查看订单备注，仍然得离开弹窗，打开完整的订单编辑页面。
用正确的方式扩展核心
我们没有覆盖 WooCommerce 的弹窗模板（那样在下次 WooCommerce 更新时就会出问题），而是使用了它本身就提供的两个官方扩展点：woocommerce_admin_order_preview_get_order_details 过滤器，可以向弹窗接收的数据中注入额外内容；以及 woocommerce_admin_order_preview_end，一个在弹窗 Underscore.js 模板末尾触发的动作，可以追加能访问同一份数据的标记。
结合这两个钩子，我们加入了：
- 一个带保存按钮的状态下拉框，连接到一个小型 AJAX 处理程序，它会更新订单，而且关键的是，也会更新列表中对应的行，而不只是弹窗，这样关闭弹窗后列表就不会显示过时的状态。
- 一个可滚动的订单内部备注列表，通过
wc_get_order_notes()获取，按最新在前显示，与完整订单页面上的顺序完全一致。 - 另一篇文章中介绍的 WhatsApp 快递转发按钮，也放在同一个弹窗里。
让它看起来像原生功能
最难的不是功能本身，而是足够贴近 WooCommerce 自身的视觉节奏，让新增内容看起来不像是硬贴上去的。我们沿用了 WooCommerce 在“Billing details”面板中已经使用的内边距、标题样式和间距，而不是为这一个弹窗另起一套视觉语言。结果看起来就像弹窗本身的延伸，而不是某个插件作者钉在下面的附加物。
要点总结
- WooCommerce 为这个弹窗提供官方钩子，正是为了让你不必覆盖它的模板；使用这些钩子能让定制在更新后依然安全。
- 后台的 AJAX 更新需要同步所有显示该数据的位置，而不只是用户操作的那个控件，否则界面会在不知不觉中变得过时。
- 与平台自身组件保持视觉一致，是真正的设计决策，而不是锦上添花；正是它让定制功能显得可信。
相关阅读：控制手机上显示哪些列、下单后更换商品规格。
在您自己的 WooCommerce 或 WordPress 后台遇到类似限制？和我们聊聊：ArtinTech Solution 正是打造这类定制店铺工具的团队。