如何根据用户角色为WooCommerce后台订单列表设置背景色

你可以通过以下两步实现需求：

1. 修改列内容输出，添加角色标识类 #

调整你现有的add_column_data函数，在输出用户角色时用<span>标签包裹，并添加对应角色的CSS类，为后续样式设置做准备：

add_action('manage_posts_custom_column', 'add_column_data', 20, 2);
function add_column_data($column_key, $order_id) {
    // 非目标列直接返回
    if ('customer_role' != $column_key) {
        return;
    }
    $order = wc_get_order($order_id); // 用WooCommerce推荐的方式实例化订单
    if ($order->get_user_id()) {
        $user = new WP_User($order->get_user_id());
        if (!empty($user->roles) && is_array($user->roles)) {
            foreach ($user->roles as $role) {
                // 添加带前缀的角色类名，避免样式冲突
                echo '<span class="order-role-badge role-' . esc_attr($role) . '">' . esc_html($role) . '</span>';
            }
        }
    } else {
        // 处理无用户ID的访客订单
        echo '<span class="order-role-badge role-guest">Guest</span>';
    }
}

2. 添加后台自定义CSS样式 #

通过admin_head钩子注入样式，给不同角色的标签设置差异化背景色：

add_action('admin_head', 'add_order_role_column_styles');
function add_order_role_column_styles() {
    // 仅在订单列表页面加载样式，避免影响其他后台页面
    $screen = get_current_screen();
    if ($screen->id !== 'edit-shop_order') return;
    ?>
    <style>
        .order-role-badge {
            padding: 2px 8px;
            border-radius: 4px;
            color: #fff;
            font-size: 12px;
            display: inline-block;
        }
        .role-customer {
            background-color: #2d72d9; /* 普通客户用蓝色 */
        }
        .role-foretag_1 {
            background-color: #229954; /* foretag_1角色用绿色 */
        }
        .role-guest {
            background-color: #95a5a6; /* 访客用灰色 */
        }
    </style>
    <?php
}

补充说明 #

• 替换了原代码中new WC_Order()的写法，改用wc_get_order()，这是WooCommerce官方推荐的订单实例化方式，兼容性更强。
• 新增访客订单的处理逻辑，避免无用户ID时列内容空白。
• 你可以根据需求修改background-color的色值，调整成符合你视觉需求的颜色。

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