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 .

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

10 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!

Leave a Comment

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