Enhance the order confirmation experience for your customers by displaying product images alongside the order details. Adding product images to the order confirmation page provides a visual confirmation of the items purchased, improving customer satisfaction and reducing potential confusion. In this tutorial, we’ll guide you through adding product images to the order confirmation page in WooCommerce.
/**
* Snippet Name: Display Product Images on Order Confirmation Page
* Snippet Author: wpsnippets.dev
*/
//Display Product Images on Order Confirmation Page
function wps_display_product_image_on_order_confirmation( $item_id, $item, $order ) {
$product = $item->get_product(); // Get the product object
$product_image = $product->get_image( array( 100, 100 ) ); // Get the product image
echo '<div class="wps-order-item-product-image">' . $product_image . '</div>'; // Output the product image
}
add_action( 'woocommerce_order_item_meta_start', 'wps_display_product_image_on_order_confirmation', 10, 3 );
Code Explanation
- We use the woocommerce_order_item_meta_start hook to add content before the order item meta on the order confirmation page.
- Within the callback function, we retrieve the product object associated with the order item.
- We then get the product image using the get_image() method, specifying the desired image size.
- Finally, we output the product image HTML markup within a div container.