Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Display product thumbnails on WooCommerce My account orders list

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.

Tags:

2

Answers


  1. 0

    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. 0

    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