How To Show Image In Woocommerce Recent Orders

How to Display Product Images in WooCommerce Recent Orders: A Step-by-Step Guide

Introduction:

WooCommerce’s default recent orders table is a helpful feature for store administrators. It provides a quick overview of the latest purchases. However, the standard display is quite basic, usually only showing order ID, date, status, total, and customer name. Often, store owners want more visual information at a glance, particularly the product images associated with each order. Adding product images to the recent orders table drastically improves its usability, making it easier to quickly identify orders and understand the purchased items without having to click through to each individual order. This article will guide you through the process of displaying product images in your WooCommerce recent orders table, enhancing your order management workflow.

Why Add Product Images to Recent Orders?

Before diving into the how-to, let’s briefly recap why this enhancement is so valuable:

• Visual Identification: Images allow you to instantly recognize the products ordered.
• Faster Processing: Quickly scanning images makes order processing more efficient.
• Reduced Errors: Visual confirmation helps prevent misidentification of orders.
• Improved User Experience: A more visually rich backend makes order management more engaging.

Main Part: Implementing Image Display

There are several ways to add product images to the WooCommerce recent orders table. We’ll focus on a code-based approach using a custom function in your theme’s `functions.php` file (or a custom plugin) to achieve this. This method is flexible and allows for precise control over the image display.

Step 1: Accessing Your Theme’s `functions.php` File

Navigate to your WordPress dashboard and go to: `Appearance` -> `Theme Editor`. Locate the `functions.php` file (usually in the right sidebar). Before making any changes, it’s highly recommended to create a child theme. Modifying the parent theme’s `functions.php` directly can lead to data loss when the theme is updated.

Step 2: Adding the Custom Function

Paste the following PHP code snippet into your `functions.php` file:

<?php

/

* Adds product thumbnail to WooCommerce admin orders list.

*/

add_filter( ‘manage_edit-shop_order_columns’, ‘add_product_thumbnail_column’, 20 );

function add_product_thumbnail_column( $columns ) {

$new_columns = array();

foreach ( $columns as $column_key => $column_label ) {

$new_columns[ $column_key ] = $column_label;

if ( ‘order_number’ === $column_key ) {

$new_columns[‘product_thumbnail’] = __( ‘Product Image’, ‘woocommerce’ );

}

}

return $new_columns;

}

add_action( ‘manage_shop_order_posts_custom_column’, ‘add_product_thumbnail_column_content’ );

function add_product_thumbnail_column_content( $column ) {

global $post;

if ( ‘product_thumbnail’ === $column ) {

$order = wc_get_order( $post->ID );

if ( $order ) {

$items = $order->get_items();

if ( ! empty( $items ) ) {

$item = reset( $items ); // Get the first item

$product_id = $item->get_product_id();

$thumbnail = get_the_post_thumbnail( $product_id, array(50, 50) ); // Adjust the array for thumbnail size

if ( $thumbnail ) {

echo $thumbnail;

} else {

echo ‘–’; // Display a dash if no thumbnail is available

}

} else {

echo ‘–’; // Display a dash if no products in order

}

}

}

}

?>

Step 3: Understanding the Code

Let’s break down what this code does:

• `add_filter( ‘manage_edit-shop_order_columns’, ‘add_product_thumbnail_column’, 20 );`: This line hooks into the filter that modifies the columns displayed in the WooCommerce admin orders list.
• `add_product_thumbnail_column( $columns )`: This function adds a new column labeled “Product Image” after the “Order Number” column.
• `add_action( ‘manage_shop_order_posts_custom_column’, ‘add_product_thumbnail_column_content’ );`: This line hooks into the action that populates the content of custom columns in the WooCommerce admin orders list.
• `add_product_thumbnail_column_content( $column )`: This function retrieves the order details, extracts the product ID from the first item in the order, gets the product thumbnail using `get_the_post_thumbnail()`, and displays it in the “Product Image” column. The `array(50, 50)` specifies the dimensions of the thumbnail (50×50 pixels). Adjust this to your preferred size. It also includes a fallback “-” display if there is no product in order or the product doesn’t have a thumbnail.

Step 4: Save Changes and Test

After adding the code, click the “Update File” button in the Theme Editor. Then, navigate to `WooCommerce` -> `Orders` in your WordPress dashboard. You should now see the “Product Image” column displaying the thumbnails of the products associated with each order.

Important Considerations:

• Thumbnail Size: Adjust the `array(50, 50)` in the `get_the_post_thumbnail()` function to control the size of the displayed thumbnails. Experiment with different sizes to find what works best for your layout.
• Error Handling: The code includes basic error handling to display a dash (“–”) if a product doesn’t have a thumbnail or if the order is empty. You can customize this to display a different placeholder image if desired.
• Performance: If you have a very large number of orders, fetching and displaying thumbnails for each order might slightly impact the performance of your admin area. Consider using a caching plugin or optimizing your database if you notice any performance issues.
• Child Theme: Always use a child theme when modifying your theme’s files to avoid losing your customizations when the parent theme is updated.
• Alternative Methods: Consider using a plugin that offers this functionality. Some plugins are specifically designed for WooCommerce admin customizations and may offer a more user-friendly interface. However, the code-based approach provides more flexibility and control.