Sandesh

June 18, 2019

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.

Code 1 – WooCommerce Show Product Image @ Checkout Page

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

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

You may want to show images on the order-pay page also. The filter is different for the order-pay page. I have added it too.

Code 2- WooCommerce Show Product Image @ Order-Pay Page

/**
 * @snippet       WooCommerce Show Product Image @ Order-Pay Page
 * @author        Sandesh Jangam
 * @donate $9     https://www.paypal.me/SandeshJangam/9
 */
add_filter( 'woocommerce_order_item_name', 'ts_product_image_on_order_pay', 10, 3 );
 
function ts_product_image_on_order_pay( $name, $item, $extra ) {
     
    /* Return if not checkout page */
    if ( ! is_checkout() ) {
        return $name;
    }
     
    $product_id = $item->get_product_id();
    /* Get product object */
    $_product = wc_get_product( $product_id );
 
    /* 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;
}

You may want to show images on the thankyou / order-received page also. Here is a another snippet for you –

How to show product image on thankyou page – https://www.techiesandesh.com/woocommerce-show-product-image-thankyou-page/

Where to add custom PHP code?

Add the above PHP code at the end of to your child theme’s functions.php. There are many ways to add custom PHP code ( custom functionality ) to WordPress / WooCommerce website. Read this article for more information

Why this code is not working?

If you face any issue with the above code, then please let me know in the comment. I will be happy to review the code, and If it is working for you, then show me some love in the comment section.

Thank you in advance…!

Sharing is Caring!
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp

About the Author

Sandesh Jangam is Developer, WooCommerce Expert, and Podcaster. He is working as a WordPress developer since 2014 and helping people with this blog. He loves to travel ancient temples, chilling at the beach and reading books

Join 1,000+ Subscribers

Get exclusive access to WordPress, WooCommerce tips, articles, tutorials right in your inbox.​

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp

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

      2. Dear Sandesh
        First, Thank you for all your free tips,
        On order-pay page its showing the same image on different variations (it should show the variations matched image), on Checkout Page its working correctly – what might cause this ?

    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!

        1. If your product name is long and text doesn’t look good then simply use this code. It is working fine on my Flatsome theme. Check screenshot- https://drive.google.com/file/d/11EkrNQoNkA9K_G2M8p3fZ7Vu_i6h5Waw/view?usp=sharing

          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 = ” . get_the_post_thumbnail( $cart_item[‘product_id’], array( 60, 60 ) ) . ”;
          return $thumbnail . ” . $name . ”;
          }

  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.

  3. This worked great…I’d been looking at various plugins to do this and so grateful to have come across your solution! Also very much like how easy to change the image dimensions.

  4. Do you know if there is a way to add product images to the order-pay (AKA “Pay for Order”) page? This works for the standard checkout, but how can this be applied for checkout pages for orders? An example can be seen here: https://paste.pics/8PVML

    1. Hi, Thanks for your comment. The image on the order-pay page is definitely possible. You just need to use a different filter for the order-pay page. I have added the code in this post. Add “Code 2” to show the image on the order-pay page.

    1. It looks like, your theme has heavily modified the WooCommerce templates. Please contact the theme and show them this article. Either they will provide you different filter, or they will replace their code as per the WooCommerce template.

  5. Hello,
    Thanking you so much for sharing. I would appreciateyour feedback, got error message

    The snippet has been deactivated due to an error on line 9:
    Cannot redeclare function ts_product_image_on_checkout

    when i tired the Code 2- WooCommerce Show Product Image @ Order-Pay Page.
    Also am i suppose to just use either code 1 or 2, or both?

    1. If you want to show an image on order-pay, then and then only you need to add Code-2. I have changed the function name of Code-2. It will not throw error anymore.

  6. Do you have any function how to show unit price also with each product on checkout and order pay page?

  7. Hello Sandesh,

    Thank you for sharing.

    Here is another example based on your snippets to display product image on order view page:

    /* Show Product Image @ My Account Order View Page */
    add_filter( ‘woocommerce_order_item_name’, ‘add_product_image_on_order_view_page’, 20, 3 );
    function add_product_image_on_order_view_page( $name, $item, $is_visible ) {
    if( ! is_wc_endpoint_url( ‘view-order’ ) ) {
    return $name;
    }
    /* Get product object */
    $_product = $item->get_product();
    /* Get product thumbnail */
    $thumbnail = $_product->get_image();
    /* Add wrapper to image and add some css */
    $image = ” . $thumbnail . ”;
    /* Prepend image to name and return it */
    return $image . $name;
    }

    Best Regards,
    Sylvain

    1. Also works with “is_wc_endpoint_url(‘order-received’)” to display product image @ thank you page 😉

  8. Hi there, Thank you for this snippet 🙂
    Is there a way to display the main product image on selected product id’s instead of the variation image?
    Thanks again

    1. Ideally, the order-pay and checkout page is the same. Content is changing from the shortcode. It should not affect your header or footer.

  9. Hello!

    Thank you very much for the code, it works perfectly on my checkout page. There would be possible to do the same, for the “thankyou” page?

    Thanks in advance.

    1. I am glad that it works for you.

      The product image on the thank you page is also possible. But you need to do little tweaks with different filters.

      I will write a snippet for it in the future.

  10. Hi,
    thanks so much was nice and easy!
    i just have a issue now of the text is slightly over laying over the image. i have tried changing this in CSS but cant seem to define just the title element to move. (this is on mobile and desktop) see image https://imgur.com/a/iCQtDRK
    much appreciated 🙂

    1. It’s a css issue. Seems like the padding issue with the image. We used the padding in the snippet to increase space between image and title. Try increasing padding.

  11. Hi! Thanks for the trick. Im just having an issue because this snippet of code adds me (only in the checkout page) a second imagen un the cart menu. I mean. I add a product into the cart. I go to the dropdow menu of the cart and I have the name of the product and his image. But when I go to checkout page, all is working perfect but if i go to the dropdown menu i have now 2 images.

    https://thebluebox.fish/checkout

    How can I solved it?

    THANKS!

    1. I am not able to open your website. Based on assumptions, the cart dropdown is using the same filter. Hence it is an appending image in the dropdown also.
      Need to figure out a way to exclude it for dropdown.

      But it is custom work for me. You can contact me for a quote.

      Thanks,

  12. thank you so much for this tutorial. Also, if you could help with tutorials for product carousel and testimonial carousel in woocommerce. TIA.

  13. Hey thanks so much for sharing this code 🙂
    I copy/pasted it in my functions.php and it works perfectly!
    I just added “float:left” to the style of the image which helps long product titles wrap nicely.

  14. Hello,
    thank you for your contribution!

    I found a problem: when you put the code, it works, but the toggle “apply a coupon” disappears.

  15. You can delete my previous comment, the coupons disappeared for another reason, it was not your code.

    Great job!

Leave a Comment

Your email address will not be published.

Become a WooCommerce Customization Expert and Earn More​

Get an early access notification right in your inbox.

Learn More or Register Now >>>