Display Product Images on WooCommerce Order Confirmation Page

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.

Leave a Comment

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

Scroll to Top