The default WooCommerce checkout page only displays the product name and quantity, without showing images. This can appear plain and unattractive. To improve this, a short code snippet can be added to the functions.php file of the theme being used. This code snippet will display product images on the WooCommerce checkout page, enhancing the visual appearance. The code snippet includes a filter function that adds the product image before the product name on the checkout page. This customization results in a more visually appealing checkout experience for customers.
When it comes to showcasing products on your WooCommerce checkout page, having a visually appealing setup can make a big difference. By default, the checkout page only displays the product name and quantity, lacking the visual impact that could enhance the user experience.
Today, I’m here to share a short piece of code that you can easily insert into your theme’s functions.php file. This code snippet will help you integrate product images into the checkout page of your WooCommerce store. Once added, your checkout page will look more engaging and professional.
Here’s the code snippet:
add_filter( 'woocommerce_cart_item_name', 'sgd_product_image_review_order_checkout', 9999, 3 );
function sgd_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;
}This code essentially hooks into the WooCommerce cart item name display function and checks if the current page is the checkout page. If it is, the function retrieves the product image and appends it to the product name, creating a more visually appealing checkout experience for your customers.
So, give this code a try and elevate the presentation of your products on the checkout page. It’s a small tweak that can make a big difference in enhancing the overall aesthetics of your online store.
