WooCommerce: Show Product Image @ Checkout Page

WooCommerce’s default checkout page is not that much optimized. I agree with it. It needs a lot of customization to make it more conversion friendly. I will provide you small tips, which will help you to increase the conversion of the checkout page.

Well, In this code snippet I will show you How to add Product image on the Checkout page without overriding templates. I found a lot of solutions that will tell you to override the template. Sometimes, it can create conflict with a theme. You can show product thumbnail on the checkout page, using just a single filter.

/**
 * @snippet       WooCommerce Show Product Image @ Checkout Page
 * @author        Sandesh Jangam
 * @donate $7     https://www.paypal.me/SandeshJangam/7
 */

add_filter( 'woocommerce_cart_item_name', 'ts_product_image_on_checkout', 10, 3 );

function ts_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {
	
	/* Return if not checkout page */
	if ( ! is_checkout() ) {
		return $name;
	}
	
	/* Get product object */
	$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );

	/* Get product thumbnail */
	$thumbnail = $_product->get_image();

	/* Add wrapper to image and add some css */
	$image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
				. $thumbnail .
			'</div>'; 

	/* Prepend image to name and return it */ 
	return $image . $name;
}

16 thoughts on “WooCommerce: Show Product Image @ Checkout Page”

  1. There is just one problem with this code: After going to the checkout page if you view the shopping cart, it’s showing the item twice. It would be great if you could add a bit of code to eliminate this issue. Thanks for all your freebie tips. They’re great!

      1. Sandesh, don’t worry about it. All is well now after the latest WordPress upgrade. It’s showing perfectly. Thanks for sharing your tips and tricks!

    1. Thank you.

      The long text will wrap automatically due to space limitations. We don’t have much control over that text. I will look into this.

      1. Hello! Thanks for answering.

        If I understand that the text adjusts automatically.

        However, it would be great if I did it well, with all that space that it does in the example of my checkout.

        If you find a solution it will be amazing.

        Thank you!

  2. Hello
    Thanks for sharing the code.
    I have a question and I would appreciate it if you could help me.
    How can I always show product details on the checkout page?
    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.

    1. Hii, you need to add this code in your theme’s function.php or use a plugin code-snippet to insert this code. I will soon write an article with screenshot.

    1. Hii, you need to add this code in your theme’s function.php or use a plugin code-snippet to insert this code. I will soon write an article with screenshot.

Leave a Comment

Your email address will not be published. Required fields are marked *