Display Product image at checkout page in woocommerce

Displaying the product image at the checkout page in WooCommerce can enhance the user experience and make it easier for customers to review their purchase before they complete the checkout process. However, many plugins that offer this feature can slow down your website or cause compatibility issues. In this article, we will show you how to display the product image at checkout page in WooCommerce without using a plugin by using code in your functions.php file.

Why is it Important to Have Product Image at Checkout Page in WooCommerce?

• Enhancing the User Experience: Displaying the product image at the checkout page can enhance the user experience by making it easier for customers to review their purchase before they complete the checkout process. It also allows customers to confirm that they have selected the correct product and that it is the product that they want to purchase. This can help to reduce the number of abandoned carts and increase sales.
• Improving Product Recognition: Having the product image at the checkout page can help to improve product recognition. This is particularly important for customers who may have multiple items in their cart and need to confirm that they have selected the correct product. When the product image is displayed alongside the product name, it becomes much easier for customers to identify the correct product.
• Building Trust: Displaying the product image at the checkout page can help to build trust with customers. When customers can see the product they are purchasing, they are more likely to trust the website and be more confident in their purchase. This can lead to repeat customers and positive reviews.
• Reducing Cart Abandonment: One of the main reasons why customers abandon their carts is because they are unsure of what they are purchasing. By displaying the product image at the checkout page, you can reduce the number of abandoned carts and increase sales. Customers are more likely to complete their purchase when they can see the product and confirm that it is the one they want.

More Articles:
Display Reviews Count next to Star Rating in Woocommerce.
Move Woocommerce Reviews Tab before Description.
Add Buy Now Button in WooCommerce Without Plugin.

Video Tutorial [Hindi Language]

Steps to display product image at checkout page.

Before start, It’s important to having child theme. If you don’t have a child theme, you can create one by following this tutorial.

Follow below steps.

1) Locate the functions.php file.

Go to Appearance > Theme File Editor > functions.php. Below is the image for your reference.

2) Add the code

Copy below code and paste it at the end of functions.php file.

// Product Images @ Woo Checkout Page
add_filter( 'woocommerce_cart_item_name', 'wpamit_product_image_at_checkout', 9999, 3 );
  
function wpamit_product_image_at_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;
}

Here you can define the image width and height by changing the value in above code. For example, here i have defined width 50 and height 50 in the line

$thumbnail = $product->get_image( array( '50', '50' ), array( 'class' => 'alignleft' ) );

You can change the value as per your requirements.

After making neccessary changes, click on Update File.

It’s done! I hope you have learned how to show product image at checkout page in woocommerce without using any plugin.