How to show product image on checkout page. Woocommerce

functions.php

<?php

/*
* Showing Product Image on Checkout Page -- By Darshan Gada
*/

add_action('woocommerce_before_checkout_form', 'displays_cart_products_feature_image');
function displays_cart_products_feature_image() {
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $item = $cart_item['data'];
        //print_r($item);
        if(!empty($item)){
            $product = new WC_product($item->id);
            // $image = wp_get_attachment_image_src( get_post_thumbnail_id( $product->ID ), 'single-post-thumbnail' );
            echo $product->get_image();
            echo $product->name;
			      echo  $product->price;
            // to display only the first product image uncomment the line bellow
            // break;
        }
    }
}

?>

This is cool, but it shows up at the bottom of the checkout page (after everything). Is there a way to make it display right next to the product name, in the section "Your Order"?

How can I make the image shows smaller?

Great, but this code is adding product image at top for me, and its too big?

EDIT: this code works perfectly for me.

function isa_woo_cart_attributes($cart_item, $cart_item_key) {
    global $product; 
    if (is_cart()){ 
        echo "<style>#checkout_thumbnail{display:none;}</style>"; 
    } 
    $item_data = $cart_item_key['data']; 
    $post = get_post($item_data->id); 
    $thumb = get_the_post_thumbnail($item_data->id, array( 32, 50)); 
    echo '<div id="checkout_thumbnail" style="float: left; padding-right: 8px">' . $thumb . '</div> '; 
} 
add_filter('woocommerce_cart_item_name', isa_woo_cart_attributes, 10, 2);

@DrMTR Thanks for sharing code.

@10by and @antonkaplenko
I've just shared a basic code to fetch product details on checkout page. You can style/modify them up by enclosing divs and classes as per your requirements.

Let me know if you have any issues.

Hi, @dr5hn!

You might want to see that isa_woo_cart_attributes in your filter has single quotes

Cheers!

Great, but this code is adding product image at top for me, and its too big?

EDIT: this code works perfectly for me.

function isa_woo_cart_attributes($cart_item, $cart_item_key) {
    global $product; 
    if (is_cart()){ 
        echo "<style>#checkout_thumbnail{display:none;}</style>"; 
    } 
    $item_data = $cart_item_key['data']; 
    $post = get_post($item_data->id); 
    $thumb = get_the_post_thumbnail($item_data->id, array( 32, 50)); 
    echo '<div id="checkout_thumbnail" style="float: left; padding-right: 8px">' . $thumb . '</div> '; 
} 
add_filter('woocommerce_cart_item_name', isa_woo_cart_attributes, 10, 2);

This works well but a slight issue. It stops showing product name on the cart page. How can we solve that?

@mrrajsoni You need to do this in order to get more product details

$product = new WC_product($item_data->id);
echo $product->name;
echo $product->price;

Hello
How can I always show product details on the checkout page? Woocommerce
Right now it is necessary to click on show/hide details link and then product details will be shown. I just want to remove this link and always show the product details on the checkout page.

As of woocommerce 3.9.3

/**
 * Show product thumbnail on checkout page.
 *
 * @see {templates|woocommerce}/checkout/review-order.php
 */
add_filter( 'woocommerce_cart_item_name', 'jfs_checkout_show_product_thumbnail', 10, 2 );
function jfs_checkout_show_product_thumbnail( $name, $cart_item ) {
    if ( ! is_checkout() ) return $name;
    $thumbnail = '<span class="product-name__thumbnail" style="float: left; padding-right: 15px">' . get_the_post_thumbnail( $cart_item['product_id'], array( 60, 120 ) ) . '</span>';
    return $thumbnail . '<span class="product-name__text">' . $name . '</span>';
}

@farinspace Thanks for the update.

Thank you so much guyz.....`

`<?php

/*

• Showing Product Image on Checkout Page -- By Darshan Gada
  */

add_filter( 'woocommerce_order_item_name', 'cw_edit_order_item_name' );

function isa_woo_cart_attributes($cart_item, $cart_item_key) {
global $product;
if (is_cart()){
echo "<style>#checkout_thumbnail{display:none;}</style>";
}
$item_data = $cart_item_key['data'];
$post = get_post($item_data->id);
$thumb = get_the_post_thumbnail($item_data->id, array( 120, 140));
echo '

' . $thumb . '

';
$product = new WC_product($item_data->id);
echo $product->name;
echo $product->price;

}
add_filter('woocommerce_cart_item_name', isa_woo_cart_attributes, 10, 2);

?>`

Screenshot is here https://prnt.sc/rhdzj6

@farinspace thank you!
If someone wants the thumbnail to be above the product name, replace style="float: left; padding-right: 15px;” with style=“display: block; clear: both; max-width:64px;“. Change size as you please.

@mrrajsoni You need to do this in order to get more product details

$product = new WC_product($item_data->id);
echo $product->name;
echo $product->price;

Can you tell me how can I add the number of product selection box?

@farinspace
hi, actually my problem is something strange. My website already shows the product thumbnails on a checkout page but only in mobile view but on a desktop view nothing showing. So i try to to copy paste your code in my php using code snippet plugin it starts working perfectly on desktop view but doubled the thumbnails in a mobile view(means show images twice) because in mobile view product thumbnail already shown. kindly solve the issue for me.

@farinspace
same here, I see double thumbnails on mobile. any way to fix it?

As of woocommerce 3.9.3

/**
 * Show product thumbnail on checkout page.
 *
 * @see {templates|woocommerce}/checkout/review-order.php
 */
add_filter( 'woocommerce_cart_item_name', 'jfs_checkout_show_product_thumbnail', 10, 2 );
function jfs_checkout_show_product_thumbnail( $name, $cart_item ) {
    if ( ! is_checkout() ) return $name;
    $thumbnail = '<span class="product-name__thumbnail" style="float: left; padding-right: 15px">' . get_the_post_thumbnail( $cart_item['product_id'], array( 60, 120 ) ) . '</span>';
    return $thumbnail . '<span class="product-name__text">' . $name . '</span>';
}

This is perfect for my flatsome theme. Screenshot- https://drive.google.com/file/d/11EkrNQoNkA9K_G2M8p3fZ7Vu_i6h5Waw/view?usp=sharing
Do you have a code for showing image on /checkout/order-received/ page?

Thank you very much for your help
I was able to display the product image in the checkout section
Can you help me how can I add a product attribute to this section?
Help us if you can