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

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

Leave a Comment

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