Home » WooCommerce: Show Product Images @ Checkout Page

WooCommerce: Show Product Images @ Checkout Page

by Tutor Aspire

The Order Review section of the WooCommerce Checkout Page shows the product name, quantity and subtotal. No sign of the product image, which can be very useful to identify/differentiate between similar products or product variations.

This simple snippet will help you display just that: the featured image beside the product name inside the order review table. Easy peasy. Enjoy!

By adding the PHP snippet below, you can quickly display product featured images beside the product name in the Checkout page

PHP Snippet: Add Product Featured Image @ WooCommerce Checkout Page Order Review Table

Please note the snippet below will generate a thumbnail with size 50*50 pixels (feel free to change that size inside the array()) and will align it to the left (remove the array containing the class to avoid that in case).

/**
 * @snippet       Product Images @ Woo Checkout
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 5
 * @donate $9     https://www.tutoraspire.com
 */
 
add_filter( 'woocommerce_cart_item_name', 'tutoraspire_product_image_review_order_checkout', 9999, 3 );
 
function tutoraspire_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;
}

You may also like