4

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

enter image description here

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.

2
  • is it possible to add an thumbnail image of the product as well? – G-MAN Jul 18 '20 at 14:13
  • @G-MAN I added a solution with image product for you ;-) below – Meloman Oct 16 '20 at 9:37
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.

2
  • It is placed before the old content !! It is possible to place after? Please... – webmastx Jan 16 '20 at 6:00
  • @webmastx do you think about a new column between "status" and "billing" ? In this case, it will be difficult because you will get a different number of "<td>" (columns) compared to "<th>" (headers). This could help you add a new column : skyverge.com/blog/add-woocommerce-orders-list-column – Meloman Oct 16 '20 at 9:50
0

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

product items preview in wp woo order list

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)

enter image description here

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.