WooCommerce’s default thank you page is not that much attractive. I agree with it. Product images on thank you page will make it quite a user friendly and attractive. So this snippet is must have a snippet for every store. Let’s rock.
Well, In this code snippet, I will show you how to add the product image on the order-received endpoint. Thank you page is nothing but a checkout page with a different endpoint. 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 thank you page by using just a single filter.
Code – WooCommerce Show Product Image @ Thankyou Page
/**
* @snippet WooCommerce Show Product Image @ Thankyou Page
* @author Sandesh Jangam
* @donate $9 https://www.paypal.me/SandeshJangam/9
*/
add_filter( 'woocommerce_order_item_name', 'ts_product_image_on_thankyou', 10, 3 );
function ts_product_image_on_thankyou( $name, $item, $visible ) {
/* Return if not thankyou/order-received page */
if ( ! is_order_received_page() ) {
return $name;
}
/* Get product id */
$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 checkout or order-pay page also. Here is a another snippet for you –
How to show product images on the checkout page or order-pay page – https://www.techiesandesh.com/woocommerce-show-product-image-checkout-page/
6 thoughts on “WooCommerce: Show Product Image @ Thankyou Page”
Hi, I was wondering if you can show us how to make this snap code into a shortcode so we can display the purchase product thumbnail where we want. at the moment not much of freedom here, beside I test it the code didn’t work for me.
A product-specific shortcode is definitely possible, but unfortunately, it is custom work for me. Your theme is maybe heavily modified the WooCommerce, please contact the theme author and show them this code. I hope they will give you the right hook.
Hi there, the product thumbnail showing wrong picture in thank you page. I have a variant product.
Hi,
How can I format the top of the Order Table like you did in your image? (Where Order Number, Date, Email etc is)
Hello,
thank you for this great code, good job.
It work fine in my website.
But i have products that have variations, and so each variation have its own images.
Is it possible to show the image corresponding to the variation ?
Have a fine day.
Hello Sandesh Jangam,
I am mobile developer. I am using woo commerce plugin to build my app using REST API. Now I want to get product image in get order API. Here I am using this : https://woocommerce.github.io/woocommerce-rest-api-docs/?shell#retrieve-an-order. It is not returning product image in line_items. Please help to solve this problem.