skip to Main Content

I am trying to display product thumbnails on WooCommerce My account > Orders list, beside the order number.

Below is the screenshot of the order
enter image description here

What hook I have to use to display the image?

I tried Add the product image to Woocommerce my account order view answer code, but it displays the image on single view orders.

2

Answers


  1. Updated

    You can use the following to add product thumbnails on WooCommerce My account > Orders list, beside the order number:

    add_action( 'woocommerce_my_account_my_orders_column_order-number', 'my_account_orders_product_thumbnails', 20, 1 );
    function my_account_orders_product_thumbnails( $order ) {
        echo '<a href="'. wc_get_endpoint_url('view-order') . $order->get_id()  . '/' . '">' . '#' . $order->get_order_number() . '</a>';
    
        // Loop through order items
        foreach( $order->get_items() as $item ) {
            $product   = $item->get_product(); // Get the WC_Product object (from order item)
            $thumbnail = $product->get_image(array( 36, 36)); // Get the product thumbnail (from product object)
            if( $product->get_image_id() > 0 ) {
                echo '&nbsp;' . $thumbnail;
            }
        }
    }
    

    Or you can add a new column with the product thumbnails after the order number like:

    add_filter( 'woocommerce_my_account_my_orders_columns', 'filter_woocommerce_my_account_my_orders_columns', 10, 1 );
    function filter_woocommerce_my_account_my_orders_columns( $columns ) {
        $new_column = array( 'order-number' => $columns['order-number']);
        unset($columns['order-number']);
    
        $new_column['order-thumbnails'] = '';
    
        return array_merge($new_column, $columns);
    }
    
    
    add_action( 'woocommerce_my_account_my_orders_column_order-thumbnails', 'filter_woocommerce_my_account_my_orders_column_order', 10, 1 );
    function filter_woocommerce_my_account_my_orders_column_order( $order ) {
        // Loop through order items
        foreach( $order->get_items() as $item ) {
            $product   = $item->get_product(); // Get the WC_Product object (from order item)
            $thumbnail = $product->get_image(array( 36, 36)); // Get the product thumbnail (from product object)
            if( $product->get_image_id() > 0 ) {
                echo $thumbnail . '&nbsp;' ;
            }
        }
    }
    

    Code goes in functions.php file of the active child theme (or active theme). Tested and works.

    Login or Signup to reply.
  2. This is working fine for me. Unfortunately, the function is not working on Woocommerce Pre-Order plugin and in mobile the graphics are so small.

    add_action( 'woocommerce_my_account_my_orders_column_order-number', 'my_account_orders_product_thumbnails', 20, 1 );
    function my_account_orders_product_thumbnails( $order ) {
        echo '<a href="'. wc_get_endpoint_url('view-order') . $order->get_id()  . '/' . '">' . '#' . $order->get_order_number() . '</a>'; 
        
        // Loop through order items
        foreach( $order->get_items() as $item ) {
            $product   = $item->get_product(); // Get the WC_Product object (from order item)
            $thumbnail = $product->get_image(array( 36, 36)); // Get the product thumbnail (from product object)
            if( $product->get_image_id() > 0 ) {
                echo '&nbsp;' . $thumbnail;
            }
        }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search