Sandesh

August 13, 2020

WooCommerce: Show Product Image @ Thankyou Page

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.

show-product-image-thankyou-page-woocommerce

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/

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

6 thoughts on “WooCommerce: Show Product Image @ Thankyou Page”

  1. 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.

    1. 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.

  2. 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.

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