Skip to content

Instantly share code, notes, and snippets.

@dr5hn
Created October 15, 2017 09:50
Show Gist options
  • Save dr5hn/10b241076ac3c8ac1e4d84f7ec48866e to your computer and use it in GitHub Desktop.
Save dr5hn/10b241076ac3c8ac1e4d84f7ec48866e to your computer and use it in GitHub Desktop.
How to show product image on checkout page. Woocommerce
<?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;
}
}
}
?>
@dr5hn
Copy link
Author

dr5hn commented Jul 23, 2019

@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;

@aramhk
Copy link

aramhk commented Feb 11, 2020

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.

@farinspace
Copy link

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

@dr5hn
Copy link
Author

dr5hn commented Mar 14, 2020

@farinspace Thanks for the update.

@anand555k
Copy link

anand555k commented Mar 16, 2020

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

@oga23
Copy link

oga23 commented Apr 19, 2020

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

@hrushikeshth
Copy link

@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?

@webbexgraphics
Copy link

webbexgraphics commented Aug 21, 2020

@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.
Screenshot_2020-08-22 Checkout – fastaan(2)

@regedy1
Copy link

regedy1 commented Oct 12, 2020

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

@veneet11
Copy link

veneet11 commented Feb 3, 2021

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?

@hamed9797
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment