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

Silverbear
April 30, 2024
163 views
0 votes
2 Answers

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:

Answers

As you do, this hook adds a new column:

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

Adds an HTML div element to the inserted custom cell:

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

Example HTML output of a cell:

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

PHP code that adds CSS styling to the WooCommerce order listing page only:

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

Here, the padding value of the td element, which is 1em, is set to 0. We apply 1em padding to the div element we added manually. This way the background color covers the entire cell. Add any other user role values you want to the CSS rules.

Result:

Tested on WordPress 6.5.2 – WooCommerce 8.8.3

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.

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers