Adding product images to the WooCommerce checkout page can enhance the user experience by providing a visual confirmation of the items customers are about to purchase. This can be particularly useful for stores with visually-driven products or where customers are likely to buy multiple items at once. This guide will show you how to implement this feature in your WooCommerce store.
Why Add Product Images to the Checkout Page?
- Visual Confirmation: Helps customers verify the cart contents at a glance without needing to navigate back to the cart or product pages.
- Enhanced User Experience: Improves the overall aesthetics of the checkout page, making the shopping experience more engaging.
- Reduced Cart Abandonment: By providing all details, including visual information, at the checkout stage, it potentially reduces the chances of cart abandonment.
Implementing Product Images in WooCommerce Checkout
Step 1: Enqueue Necessary Styles
First, you’ll want to add some basic CSS to ensure that the images do not disrupt the layout of the checkout page.
/*
* Snippet: How to Add Product Images to WooCommerce Checkout – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1230
* Tested with WooCommerce 10.7.0
* "Enqueue CSS for styling checkout images"
*/
function wcsuccess_enqueue_checkout_styles() {
wp_add_inline_style('woocommerce-layout', '
.checkout-product-image { width: 50px; height: auto; float: left; margin-right: 10px; }
.woocommerce-checkout-review-order-table .product-name { width: calc(100% - 60px); float: right; }
');
}
add_action('wp_enqueue_scripts', 'wcsuccess_enqueue_checkout_styles');
Step 2: Modify the Checkout Page to Include Images
The next step is to add a snippet that includes the product image next to each item in the review order table on the checkout page.
/*
* Snippet: How to Add Product Images to WooCommerce Checkout – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1230
* Tested with WooCommerce 10.7.0
* "Add product images to WooCommerce checkout"
*/
function wcsuccess_add_product_images_to_checkout($cart_item, $cart_item_key) {
$thumbnail = $cart_item['data']->get_image('woocommerce_thumbnail');
echo '<div class="checkout-product-image">' . $thumbnail . '</div>';
}
add_filter('woocommerce_cart_item_name', 'wcsuccess_add_product_images_to_checkout', 10, 2);
This code hooks into the woocommerce_cart_item_name filter, which is used to display the product name. It prepends the product thumbnail before the product name.
Step 3: Test the Functionality
- Visual Test: Navigate to your checkout page and add various products to your cart. Verify that each product’s image appears correctly next to the product name.
- Responsive Test: Check the display on various devices to ensure that the images do not interfere with the checkout process on smaller screens.
- Performance Test: Ensure that adding images does not significantly impact the loading time of the checkout page.
Conclusion
Adding product images to the checkout page is a simple yet effective way to improve user experience on your WooCommerce site. By visually confirming what is in their cart, customers can feel more secure about their purchase, potentially leading to higher conversion rates.
Further Customization
Consider adding options to adjust the image size directly from the WordPress customizer or implementing a lightbox feature for a larger view of the product image on click. These enhancements can provide a more dynamic and user-friendly checkout process.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
