Show Product Images in WooCommerce Orders List

Adding product Images to your WooCommerce orders list is a great way to visually identify products directly from the order screen, making order management more efficient. In this article, I’ll walk you through the steps to add product image thumbnails to the WooCommerce orders page using a small piece of code. Let’s get started!

Why Add Product Image to Orders List

If you’re managing multiple orders daily, adding product image to the WooCommerce orders list can help you quickly identify the products that customers have purchased. This visual enhancement can streamline your order processing workflow and save time by eliminating the need to open individual orders for details.

Pre-requisite: Use a Child Theme

Before we make any changes to your WordPress theme’s functions.php file, it’s crucial to use a child theme. Modifying the main theme’s files directly can result in your changes being overwritten when the theme gets updated.
If you haven’t created a child theme yet, I have a detailed article that guides you through the process. Check out the article here.

Once your child theme is set up and active, follow the steps below.

Step 1: Access the functions.php File

1. In your WordPress dashboard, go to Appearance > Theme Editor.
2. On the right side, you’ll see the list of theme files. Scroll down to find functions.php and click on it.

• Ensure that you are editing the functions.php file of your child theme, not the main theme.

Step 2: Add the Code to functions.php

Now, let’s add the code that will insert product image thumbnails into the WooCommerce orders list.

Copy and paste the following code at the bottom of your child theme’s functions.php file:

// Add product image column to the orders list table (By WPAMIT)
function wpamit_custom_orders_list_columns($columns) {
    $new_columns = array();

    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'order_number') { 
            $new_columns['product_thumbnail'] = 'Product Image';
        }
    }
    return $new_columns;
}
add_filter('manage_edit-shop_order_columns', 'wpamit_custom_orders_list_columns', 20);

// Populate custom column with product thumbnail and "+1 more" inline
function wpamit_custom_orders_list_column_content($column) {
    if ($column === 'product_thumbnail') {
        $order = wc_get_order(get_the_ID());
        $items = $order->get_items();
        $item_count = count($items);
        $displayed = 0;

        echo '<div style="display: flex; align-items: center;">';

        foreach ($items as $item) {
            $product = $item->get_product();
            if ($product) {
                if ($product->is_type('variation')) {
                    $image_id = $product->get_image_id();
                } else {
                    $image_id = $product->get_image_id();
                }

                if ($image_id && $displayed === 0) {
                    echo wp_get_attachment_image($image_id, [80, 80], false, ['style' => 'margin-right: 10px;']);
                    $displayed++;
                }
            }
            break;
        }

        if ($item_count > 1) {
            echo '<span>+ ' . ($item_count - 1) . ' more</span>';
        }
        echo '</div>';
    }
}
add_action('manage_shop_order_posts_custom_column', 'wpamit_custom_orders_list_column_content', 20);

This code will:

• Add a new column called Product Image to the WooCommerce orders list, positioned just after the Order column.
• Display the first product’s image for each order, even if there are multiple products in the order.
• Show product variation images if the ordered product is a variation; otherwise, it shows the parent product’s image.
• Display the product image and “+1 more” text inline when there are multiple items in an order, with the text indicating the number of additional items (e.g., “+2 more”).
• Customize the size of the product image by adjusting the [80, 80] size in the code.
• Align the image and text horizontally for a cleaner and more compact display in the WooCommerce orders list.

Step 3: Customize the Image Size

By default, the product image size is set to 80×80 pixels in the code. However, you can customize the width and height based on your preference.

In the following line of code (Line 35):

echo wp_get_attachment_image($image_id, [80, 80], false, ['style' => 'margin-right: 10px;']);

You can modify the values in [80, 80] to your desired width and height. For example, to make the image thumbnails larger, change it to [100, 100] for an 100×100 pixel image size.

Step 4: Verify the Image on the Orders Page

Once you’ve added and saved the code, it’s time to verify that the images are showing up correctly.

1. Go to WooCommerce > Orders from your WordPress dashboard.
2. Refresh the page, and you should now see a new Product Image column, displaying the thumbnail of the first product in each order.

VIDEO TUTORIAL

Final Thoughts

That’s it! You’ve successfully added product images to your WooCommerce orders list. This customization not only makes your orders page look better but also helps you manage orders more efficiently by providing a quick visual reference.

If you encounter any issues or have further questions, feel free to leave a comment below or watch the accompanying video tutorial for a detailed walkthrough. For more WooCommerce tips and tricks, don’t forget to subscribe to my channel and check out other related articles on the blog.

Happy WooCommerce customizing!