WooCommerce如何为前后台订单状态添加自定义HTML/CSS样式

原方案问题说明 #

• 直接通过wc_order_statuses过滤器向订单状态文本插入HTML标签的写法存在兼容性问题：该过滤器的返回值会被后台订单下拉选择、订单编辑页、前端页面、系统接口等多个场景调用，插入HTML标签会导致后台页面渲染异常、特殊字符转义等问题。
• 参考后台方案编写的代码不生效核心原因有两个：
  • admin_head是仅后台页面触发的钩子，前端页面不会执行该钩子下的逻辑
  • 代码中针对$pagenow、$post的判断逻辑是专门为后台订单列表页写的，完全不适用于前端我的账户页面

正确实现步骤 #

1. 先删除之前挂载在wc_order_statuses过滤器上、给状态文本加HTML标签的代码，避免后台显示异常。如果需要修改状态显示名称，直接在该过滤器中返回纯文本即可，不要加任何HTML标签。
2. 将下面的代码添加到当前主题的functions.php文件，或者自定义代码片段插件中：

// 前端我的账户页加载订单状态自定义样式
add_action('wp_head', 'custom_my_account_order_status_style');
function custom_my_account_order_status_style() {
    // 仅在WooCommerce我的账户页输出样式，避免污染其他页面
    if ( ! function_exists('is_account_page') || ! is_account_page() ) {
        return;
    }
    ?>
    <style>
        .woocommerce-MyAccount-orders .order-status {
            padding: 0.3em 0.8em;
            border-radius: 4px;
            font-size: 0.9em;
            line-height: 1;
        }
        /* 已完成状态样式 */
        .woocommerce-MyAccount-orders .order-status.status-completed {
            background: #d7f8a7;
            color: #0c942b;
        }
        /* 处理中状态样式，可自行修改色值 */
        .woocommerce-MyAccount-orders .order-status.status-processing {
            background: #c8e3ff;
            color: #1859b8;
        }
        /* 待确认/暂挂状态样式 */
        .woocommerce-MyAccount-orders .order-status.status-on-hold {
            background: #fff3c9;
            color: #b78418;
        }
        /* 待付款状态样式 */
        .woocommerce-MyAccount-orders .order-status.status-pending {
            background: #ffd8d8;
            color: #b71818;
        }
        /* 有其他自定义订单状态时，按照上面的格式追加.status-状态slug的样式规则即可 */
    </style>
    <?php
}

补充说明 #

• 前端我的账户订单列表的状态标签类名规则和后台完全一致，都是.order-status.status-状态slug的格式，可以直接复用后台写过的样式色值，保持前后台视觉统一。
• 代码中通用的.order-status样式是为了优化标签的圆角、内边距显示效果，可以根据自己主题的设计风格调整对应参数。

内容的提问来源于stack exchange，提问作者Snorlax