skip to Main Content

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.

enter image description here

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:

2

Answers


  1. 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:Result

    Tested on WordPress 6.5.2 – WooCommerce 8.8.3

    Login or Signup to reply.
  2. 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:

    enter image description here

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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search