根据用户角色更改 WooCommerce 管理订单列表中的背景颜色

Question

我希望用户角色（客户、foretag_1）的字段具有不同的背景颜色，以便更容易区分。请参阅附图。

这是用于在 Woocommerce 管理订单列表中添加用户角色字段的 PHP 代码：

add_filter('manage_edit-shop_order_columns', 'add_column_heading', 20, 1);
function add_column_heading($array) {
    $res = array_slice($array, 0, 2, true) +
            array("customer_role" => "Customer Role") +
            array_slice($array, 2, count($array) - 1, true);
    return $res;
}
add_action('manage_posts_custom_column', 'add_column_data', 20, 2);
function add_column_data($column_key, $order_id) {
    // exit early if this is not the column we want
    if ('customer_role' != $column_key) {
        return;
    }
    $customer = new WC_Order( $order_id );
    if($customer->user_id != ''){
            $user = new WP_User( $customer->user_id );
             if ( !empty( $user->roles ) && is_array( $user->roles ) ) {
            foreach ( $user->roles as $role )
               echo $role;
        }
    }
}

由于对如何根据用户角色实现背景颜色了解不够，我还没有尝试过任何东西。

我已阅读以下主题，但缺乏根据我的特定需求调整和实施解决方案的知识。

根据订单付款方式突出显示 WooCommerce 管理订单列表 当订单包含常规产品时，突出显示 Woocommerce 管理订单列表 根据 Woocommerce 管理订单列表中的付款方式更改背景颜色链接

Answer 1

正如您所做的那样，此挂钩会添加一个新列：

add_filter( 'manage_woocommerce_page_wc-orders_columns', 'add_wc_order_list_custom_column_by_atakanau' );
function add_wc_order_list_custom_column_by_atakanau($array) {
    $res = array_slice($array, 0, 2, true) +
            array("customer_role" => "Customer Role") +
            array_slice($array, 2, count($array) - 1, true);
    return $res;
}

将 HTML div 元素添加到插入的自定义单元格中：

add_action('manage_woocommerce_page_wc-orders_custom_column', 'display_wc_order_list_custom_column_content_by_atakanau', 10, 2);
function display_wc_order_list_custom_column_content_by_atakanau( $column, $order_row ) {
    if ( $column == 'customer_role' ) {
        $customer_role_class = 'guest';
        $customer_role_title = 'Guest';
        $order = wc_get_order( $order_row->get_id() );
        $customer_id = $order->get_customer_id();
        if ( $customer_id ) {
            $customer = get_user_by( 'id', $customer_id );
            if ( $customer ) {
                $roles = $customer->roles;
                $role = array_shift( $roles );
                $customer_role_class = $role;
                $customer_role_title = ucfirst( $role );
                
            }
        }
        echo '<div class="'.$customer_role_class.'">'.$customer_role_title.'</div>';
    }
}

单元格的 HTML 输出示例：

<td class="customer_role column-customer_role" data-colname="Customer Role">
    <div class="guest">Guest</div>
</td>

仅将 CSS 样式添加到 WordPress WooCommerce 订单列表页面的 PHP 代码：

add_action( 'admin_head', function() {
    $current_screen = get_current_screen();
    if ( $current_screen->id != 'woocommerce_page_wc-orders' ) {
        return;
    }
    echo '<style>
        .post-type-shop_order .wp-list-table tbody td.customer_role.column-customer_role {
          padding: 0;
        }
        .post-type-shop_order .wp-list-table tbody td.customer_role.column-customer_role div {
          padding: 1em;
        }
        .post-type-shop_order .wp-list-table tbody td.customer_role.column-customer_role div.guest {
          background-color:lime;
          color:black;
        }
        .post-type-shop_order .wp-list-table tbody td.customer_role.column-customer_role div.administrator {
          background-color:turquoise;
          color:black;
        }
        .post-type-shop_order .wp-list-table tbody td.customer_role.column-customer_role div.customer {
          background-color:yellow;
          color:black;
        }
    </style>';
} );

这里，

padding

元素的

td

值，即

1em

，被设置为

0

。我们将

1em

padding

应用于手动添加的

div

元素。这样背景颜色就覆盖了整个单元格。将您想要的任何其他用户角色值添加到 CSS 规则中。

结果：

在 WordPress 6.5.2 - WooCommerce 上测试