Add the product image to Woocommerce my account or

Question

I would like to add image on my account view order pages in Woocommerce.some one I am able to get the image but the size is too large and I don't know where I need to add this code:

<?php 
    // Get a list of all items that belong to the order
    $products = $order->get_items();

    // Loop through the items and get the product image
    foreach( $products as $product ) {                  

        $product_obj = new WC_Product( $product["product_id"] );

        echo $product_obj->get_image();

    }
?>   

Any help will be appreciated

Here is the location on the View order pages, wher I would like to add the product image:

Answer 1

Instead of getting the main image, you just need to fetch the thumbnail via get_the_post_thumbnail():

<?php 
    // Get a list of all items that belong to the order
    $products = $order->get_items();

    // Loop through the items and get the product image
    foreach( $products as $product ) {                  

        $product_obj = new WC_Product( $product["product_id"] );

        echo get_the_post_thumbnail();

    }
?>   

Answer 2

Write it on woocommerce/template/order/ordr-details-item.php

echo '<div class="product-imgae">'.$product->get_image(array( 80, 80)).'</div>';

this will give you a 80x80 size image change it according to your neesd.

Answer 3

The following hooked function will do the job (You may need to add some CSS style rules):

// Display the product thumbnail in order view pages
add_filter( 'woocommerce_order_item_name', 'display_product_image_in_order_item', 20, 3 );
function display_product_image_in_order_item( $item_name, $item, $is_visible ) {
    // Targeting view order pages only
    if( is_wc_endpoint_url( 'view-order' ) ) {
        $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 )
            $item_name = '<div class="item-thumbnail">' . $thumbnail . '</div>' . $item_name;
    }
    return $item_name;
}

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

Note the WC_Product method get_image() uses Wordpress get_the_post_thumbnail() internally.

---

Update: added if( $product->get_image_id() > 0 ) to the code, to display the product image, only when it exist.