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.
1 2 3 4 5 6 7 8 9 10 11 12 | /*** Snippet Name: Display Product Images on Order Confirmation Page* Snippet Author: wpsnippets.dev*///Display Product Images on Order Confirmation Pagefunction 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.