Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Add Product Images to WooCommerce Checkout Page?

Adding product images to the WooCommerce checkout page orders helps to enhance the customer experience by providing visual confirmation of the products they are about to purchase.

add_filter( 'woocommerce_cart_item_name', 'ts_product_image_review_order_checkout', 9999, 3 );
 
function ts_product_image_review_order_checkout( $name, $cart_item, $cart_item_key ) {
    if ( ! is_checkout() ) return $name;
    $product = $cart_item['data'];
    $thumbnail = $product->get_image( array( '50', '50' ), array( 'class' => 'alignleft' ) );
    return $thumbnail . $name;
}

Output

The following output displays product thumbnails beside the respective cart item names in the order review section on the checkout page.

How to Add Product Images to WooCommerce Checkout Page? - Tyche Softwares

The default checkout page doesn’t display product images as shown below.

How to Add Product Images to WooCommerce Checkout Page? - Tyche Softwares

Similar to the above customization, you can also display the product image in WooCommerce email notifications. Also, a product link that will act as a call to action is included in the product name.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Newest
Oldest
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible.

Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

By using our site, you acknowledge that you have read and understood our Privacy Policy and Terms & Conditions.