1. Home
  2. Help Center
  3. WooCommerce
  4. Customization
  5. Show images in Order Details

In Order Details page

To display the product thumbnails in the order details use the following code in /wp-content/themes/goya-child/functions.php

add_filter( 'woocommerce_order_item_name', 'custom_display_product_image_in_order_item', 20, 3 ); function custom_display_product_image_in_order_item( $item_name, $item, $is_visible ) { if( is_wc_endpoint_url( 'view-order' ) ) { $product = $item->get_product(); $thumbnail = $product->get_image('thumbnail'); if( $product->get_image_id() > 0 ) { $item_name = '<div class="item-thumbnail">' . $thumbnail . '</div>' . $item_name; } } return $item_name; }
Code language: PHP (php)

Add the CSS code to Appearance > Customize > Additional CSS or /wp-content/themes/goya-child/style.css

.woocommerce-table__product-name .item-thumbnail { float: left; margin-right: 20px; max-width: 70px; }
Code language: CSS (css)

In Order Email

Add the following php code to /wp-content/themes/goya-child/functions.php

function custom_add_image_to_wc_order_emails( $args ) { if ( $args['sent_to_admin'] ) { return $args; } $args['show_sku'] = false; $args['show_image'] = true; $args['image_size'] = array( 70, 70 ); return $args; } add_filter( 'woocommerce_email_order_items_args', 'custom_add_image_to_wc_order_emails' );
Code language: PHP (php)

Was this article helpful?

Related Articles