Change background color in WooCommerce admin orders list based on user role

Question

I want the field for user roles (customer, foretag_1) to have different background colors to make them more easily distinguishable. See the image attached.

Here's the PHP code used to add field for user role in WooCommerce admin order list :

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;
        }
    }
}

I haven't tried anything yet due to insufficient knowledge of how to achieve background colors based on user roles.

I have read the following threads but lack the know-how to adjust and implement the solutions for my specific needs:

• Highlight WooCommerce admin orders list based on order payment method
• Highlight Woocommerce admin orders list when order contains a regular product
• Change background color link based on payment method in Woocommerce admin orders list

Answer 1

There are some mistakes and missing things in your code.

The following code will handle Legacy Orders and High-Performance Order Storage (HPOS), displaying a custom column with your user roles colored just as order status do:

// Utility function: get user role display name
function get_role_display_name( $role ) {
    global $wp_roles;
    return isset($wp_roles->roles[$role]['name']) ? $wp_roles->roles[$role]['name'] : '';
}

// Add "User Roles" columns to admin orders list
add_filter( 'manage_woocommerce_page_wc-orders_columns', 'add_custom_columns_to_admin_orders', 20); // HPOS
add_filter( 'manage_edit-shop_order_columns', 'add_custom_columns_to_admin_orders', 20);
function add_custom_columns_to_admin_orders( $columns ) {
    return array_slice($columns, 0, 2, true) +
    array("user_role" => "User Role") +
    array_slice($columns, 2, count($columns) - 1, true);
}

// User roles column displayed content
add_action('manage_woocommerce_page_wc-orders_custom_column', 'custom_columns_content_in_admin_orders', 10, 2); // HPOS
add_action( 'manage_shop_order_posts_custom_column', 'custom_columns_content_in_admin_orders', 10, 2);
function custom_columns_content_in_admin_orders( $column, $order ) {
    if( ! is_a($order, 'WC_order') && $order > 0 ) {
        $order = wc_get_order( $order );
    }

    if ( 'user_role' === $column ) {
        $user  = $order->get_user();
        foreach($user->roles as $user_role){
            printf('<span class="order-user-role %s">%s</span> ',
            $user_role, get_role_display_name( $user_role ) );
        }
    } 
}

// CSS styles for "User roles" column displayed content
add_action('admin_head', 'custom_orders_list_column_user_roles_css');
function custom_orders_list_column_user_roles_css() {
    global $pagenow, $typenow; 

    if ( ( $pagenow === 'edit.php' && $typenow === 'shop_order' ) 
    || ( $pagenow === 'admin.php' && $_GET['page'] === 'wc-orders' ) ) :
    ?>
    <style>
    .order-user-role {
        display: inline-block;
        line-height: 2.5em;
        color: #777;
        background: #e5e5e5;
        border-radius: 4px;
        border-bottom: 1px solid rgba(0, 0, 0, .05);
        margin: 0;
        padding: 0 1em;
        cursor: inherit !important;
        white-space: nowrap;
        max-width: 100%;
    }
    .order-user-role.customer {
        background: #c8d7e1;
        color: #2e4453;
    }
    .order-user-role.foretag_1 {
        background: #c6e1c6;
        color: #5b841b;
    }
    </style>
    <?php
    endif;
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

You will get something like:

You can easily adjust the desired background color for each user role.