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/
64 thoughts on “WooCommerce: Show Product Image @ Checkout Page”
Nice trick !
Thanks for sharing that with us 🙂
Thanks for appreciation. I am glad that you like it.
OMG! Thank you so much! It worked perfectly for desktop version. But, how can I add Product image on the Checkout mobile?
Ideally, It should work on mobile as well. It is working for mobile at my end.
I’m impressed it works perfectly thanks
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!
That’s strange. I need to look into this. Do you have more details and screenshot?
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!
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 ?
I got a similar error why is this happening
Wow! It worked perfectly.
However for products that have the long name, it doesn’t look very good.
Here is a screenshot of my checkout: https://mega.nz/#!jskyEAaY!OFnyfPC84GH8KQCePFsJreaUVy4mYa_DtuAy-0lM-tM
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.
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!
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 . ”;
}
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.
Can you share me a screenshot? So I can take a look.
Hi, may i know where to add this code? Thanks in advance!
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.
clear and would work with the rebhub theme
Hi,
Where do i add this code?
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.
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.
Thank you for your comment.
It worked like a charm.
Just did it on a clients website.
Thank you for sharing.
That’s great. Thanks for the comment.
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
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.
Thank you for the fast reply! This works great.
This wont work for ShopKeeper theme will it?
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.
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?
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.
Working like a charm. Thank you so much.
Thank you for the comment.
Do you have any function how to show unit price also with each product on checkout and order pay page?
It is definitely possible, but it is custom work for me. You can contact me for a quote from here. https://www.techiesandesh.com/contact/
Thanks
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
Also works with “is_wc_endpoint_url(‘order-received’)” to display product image @ thank you page 😉
Nice man.
You rock man thanks!
Thank you, man.
Worked perfectly!!
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
Yes, It is possible. But you will need to tweak a code little.
Hello,
Thanks for sharing this snippet. I would like to know if there is a way to customize the order-pay page itself? I mean this page – http://example.com/checkout/order-pay. I want to remove the menu, include a page header that matches the one on checkout, centralize the content and add more spacing to the buttons.
Thanks
Ideally, the order-pay and checkout page is the same. Content is changing from the shortcode. It should not affect your header or footer.
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.
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.
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 🙂
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.
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!
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,
Thank you so much bro!
I am glad that it works for you.
Thank you perfect!
how can we show image in my account->orders. It’s only showing order,date
i wanna show image and price also
Hi Sendesh,
It seems exactly what I am looking for but it isn’t working. I have used the codes snippets plugin.
I am using Divi theme in WP. My url is https://lifestaal.nl
thank you so much for this tutorial. Also, if you could help with tutorials for product carousel and testimonial carousel in woocommerce. TIA.
thank you. so good.
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.
That;s great. Thanks for CSS suggestion.
Works great! Thank you from Belarus❤️
Hello,
thank you for your contribution!
I found a problem: when you put the code, it works, but the toggle “apply a coupon” disappears.
You can delete my previous comment, the coupons disappeared for another reason, it was not your code.
Great job!