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