Display order items names in WooCommerce admin orders list

Question

I would like to display order_item of order in admin list like in this screenshot:

Changing /woocommerce/includes/admin/list-tables/class-wc-admin-list-table-orders.php file, I tried to add the following:

$product = wc_get_product( $product_id );
$ss = $product->get_name();


echo $ss
echo $product->get_name();
echo get_the_title($product_id); // this one display the order date

But it didn't work.

Answer 1

Never overwrite core files! for many reasons. Note that an order can have many items (products).

On orders admin list, the following will add item(s) (product(s)) names, to order status column:

add_action( 'manage_shop_order_posts_custom_column' , 'custom_orders_list_column_content', 20, 2 );
function custom_orders_list_column_content( $column, $post_id ) {
    global $the_order, $post;

    if ( 'order_status' === $column ) {
        $products_names = []; // Initializing

        // Loop through order items
        foreach ( $the_order->get_items() as $item ) {
            $product = $item->get_product(); // Get the WC_Product object
            $products_names[]  = $item->get_name(); // Store in an array
        }
        // Display
        echo '<ul style="list-style: none;"><li>' . implode('</li><li>', $products_names) . '</li></ul>';
    }
}

Code goes on functions.php file of your active child theme (or active theme). Tested and work.

Answer 2

Here is a solution based on @loictheaztec with CSS styling and quantity of each product displayed.

Add the following code to function.php :

// hook for order items preview
add_action( 'manage_shop_order_posts_custom_column' , 'custom_orders_list_column_content', 20, 2 );
function custom_orders_list_column_content( $column, $post_id ) {
    global $the_order, $post;

    if ( 'order_status' === $column ) {
                
        // Start list
        echo '<ul class="orders-list-items-preview">';
        
        // Loop through order items
        foreach ( $the_order->get_items() as $item ) {
            $product      = $item->get_product();
            $product_name = $item->get_name();
            $product_qty  = $item->get_quantity();
            echo "<li><label>$product_qty</label> $product_name</li>";
        }
        
        // End list
        echo '</ul>';

    }
}

// CSS for order items preview
add_action('admin_head', 'orders-list-preview-css');
function my_custom_fonts() {
  echo "<style>
    .orders-list-items-preview {
        background-color: #eee;
        padding: 8px 8px 0 5px;
        border-radius: 4px;
    }
    .orders-list-items-preview li {
        padding-left: 45px;
        position: relative;
        padding-bottom: 10px;
    }
    .orders-list-items-preview li label {
        border: 1px solid gray;
        width: 25px;
        display: block;
        text-align: center;
        border-radius: 4px;
        left: 5px;
        top: 0px;
        position: absolute;
    }
  </style>";
}

EDIT : Solution added with product image (and quantity moved on right)

add_action('manage_shop_order_posts_custom_column', 'orders_list_preview_items', 20, 2 );
function orders_list_preview_items($column, $post_id) {
    
    global $the_order, $post;
    
    if ('order_status' === $column) {
        
        // Start list
        echo '<ul class="orders-list-items-preview">';
        
        // Loop through order items
        foreach($the_order->get_items() as $item) {
            
            $product = $item->get_product();
            $img     = wp_get_attachment_url($product->get_image_id());
            
            $name    = $item->get_name();
            $qty     = $item->get_quantity();
            
            echo "<li>
                <img src=\"$img\" />
                <label>$qty</label> $name
            </li>";
        }
        
        // End list
        echo '</ul>';
    }
    
    
}


add_action('admin_head', 'orders_list_preview_css');
function orders_list_preview_css() {
  echo "<style>
    .orders-list-items-preview {
        background-color: #eee;
        padding: 8px 8px 0 5px;
        border-radius: 4px;
    }
    .orders-list-items-preview li {
        padding-left: 55px;
        position: relative;
        padding-bottom: 10px;
        padding-right: 40px;
        padding-top: 0;
        font-size: 10px;
        line-height: 11px;
        min-height: 30px;
    }
    .orders-list-items-preview li label {
        border: 1px solid gray;
        width: 25px;
        display: block;
        text-align: center;
        border-radius: 4px;
        right: 5px;
        top: 0px;
        position: absolute;
        font-size: 12px;
        font-weight: bold;
        padding: 5px 0;
    }
    .orders-list-items-preview img {
        margin: 1px 2px;
        position: absolute;
        left: 0;
        top: 0;
        height: 30px;
        max-height: 30px !important;
    }
  </style>";
}