Show order items details in WooCommerce orders list page with HPOS

Question

How can I display order items details in WooCommerce Admin Orders list, when High Performance Orders Storage (HPOS) is enabled? The classic legacy method code no longer works.

Here is the code I was using in legacy mode:

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

I haven't found yet how to make the required changes to make it work with HPOS enabled.

Answer 1

To make it work on newly enabled High Performance Orders Storage (and in legacy mode too), use the following revised and optimized code:

add_action('manage_shop_order_posts_custom_column', 'custom_orders_list_column_content', 20, 2);
add_action('manage_woocommerce_page_wc-orders_custom_column', 'custom_orders_list_column_content', 20, 2);
function custom_orders_list_column_content( $column, $order = null ){
    if ( 'order_status' === $column ) {
        if ( ! is_a($order, 'WC_Order') ) {
            global $the_order; $order = $the_order;
        }

        echo '<ul  class="order-items-list">';

        // Loop through order items
        foreach ( $order->get_items() as $item ) {
            $product = $item->get_product(); // Get the WC_Product object
            
            printf('<li>%s <label>%d</label> %s</li>',
            $product->get_image( array(30, 30) ),
            $item->get_quantity(), $item->get_name() );
        }
        echo '</ul>';
    }
}

add_action('admin_head', 'custom_orders_list_column_css');
function custom_orders_list_column_css() {
    global $pagenow, $typenow; 

    if ( ( $pagenow === 'edit.php' && $typenow === 'shop_order' ) 
    || ( $pagenow === 'admin.php' && $_GET['page'] === 'wc-orders' ) ) :
    ?>
    <style>
    .order-items-list {
        background-color: #eee;
        padding: 8px 8px 0 5px;
        border-radius: 4px;
    }
    .order-items-list li {
        padding-left: 55px;
        position: relative;
        padding-bottom: 10px;
        padding-right: 40px;
        padding-top: 0;
        font-size: 10px;
        line-height: 11px;
        min-height: 30px;
    }
    .order-items-list 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;
    }
    .order-items-list img {
        margin: 1px 2px;
        position: absolute;
        left: 0;
        top: 0;
        height: 30px;
        max-height: 30px !important;
    }
    </style>
    <?php
    endif;
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

To display other order items details, see:

• Get Order items and WC_Order_Item_Product in WooCommerce 3