Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

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.

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

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.

• woocommerce-offtopic

• is it possible to add an thumbnail image of the product as well? – G-MAN Commented Jul 18, 2020 at 14:13
• @G-MAN I added a solution with image product for you ;-) below – Meloman Commented Oct 16, 2020 at 9:37

2 Answers 2

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.

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