How to add Product Images to WooCommerce Checkout ?

In this tutorial, We’ll learn how to add product images to woocommerce checkout pages. Initially your checkout page will look something like this:

woocommerceHere you’ll notice that only product names are listed but not their corresponding images.

Our team at Themelocation is comprised of WordPress developers of high expertise

  • We can maintain, support and manage your single, or all your clients, website with dedication
  • Our skills are at your disposal.

Book a Call

To add images as well you need to follow these steps:

  1. Copy the review-order.php template (located in plugins/woocommerce/templates/checkout/)
  1. Paste the file in your-theme/woocommerce/checkout (these two steps are required so we don’t override the core template files).

If you don’t have these directories in your theme than create them.

  1. Add the following code into the review-order.php file wherever you prefer the product image for a product to show:
<?php $thumbnail = apply_filters( 'woocommerce_in_cart_product_thumbnail', $_product->get_image(), $values, $cart_item_key ); echo $thumbnail; ?>

Note: In most cases you would probably like to add the image right before the product title, so you can search for the following line of code and add code after that:

<?php echo apply_filters( 'woocommerce_cart_item_name', $_product->get_title(), $cart_item, $cart_item_key ); ?>

Save the file and refresh the page. You’ll see the product images being displayed as well.



I hope you enjoy reading this blog post. If you want my team to do WooCommerce Maintenance for you, click here.

Leave a Comment

Your email address will not be published. Required fields are marked *