Show product images in checkout page in WooCommerce

In WooCommerce, the order summary on the checkout page displays the product name, quantity, and price but does not include images by default. Adding images improves the user experience and provides a quick visual reference for selected products.

In this article, you’ll learn how to insert product images into the order summary on the checkout page using a code snippet in your theme or custom plugin.

Adding Product Images to the Order Summary.

To achieve this, we will use the woocommerce_cart_item_namefilter to modify the product name display and include the image before the text.

Add the following snippet to your theme’s functions.phpfile or in a custom plugin:

<?php
function addProductImageToCheckout( $productName, $cartItem, $cartItemKey ) {
    $product = $cartItem['data'];  
    $thumbnail = $product->get_image( array( 50, 50 ) ); // Size 50x50 pixels  

    return $thumbnail . ' ' . $productName;
}
add_filter( 'woocommerce_cart_item_name', 'addProductImageToCheckout', 10, 3 );

1. Get the product object from the $cartItem['data'] array.
2. Generate the product image using $product->get_image(), specifying a 50×50 pixel size.
3. Concatenate the image with the product name and return the result.
4. Apply the woocommerce_cart_item_name filter to modify the content displayed in the order summary.

After adding this code, products in the checkout order summary will be displayed with their images, enhancing the visual presentation.

Tip: If you want to change the image size, you can modify the values in get_image( array( width, height ) ).