How to Show WooCommerce Order Thumbnails in My Account: A Beginner’s Guide
Want to visually enhance your customer’s experience in their “My Account” Discover insights on How To Add Microdata Tags To Woocommerce section of your WooCommerce store? Adding product thumbnails to Read more about How To Display Woocommerce Products By Category In WordPress their order history can be a simple yet effective way to do just that. Instead of just seeing order details, they get a visual reminder of what they purchased. This article will guide you through adding thumbnails to your WooCommerce order list in the “My Account” page, even if you’re a complete beginner.
Imagine you order a cool new t-shirt and a pair of shoes from your favorite online store. When you check your order history, instead of just seeing “Order #1234 – T-shirt, Shoes,” you see *actual pictures* of the items you ordered! Wouldn’t that be more helpful and user-friendly? That’s what we’re aiming for.
Why Add Thumbnails to WooCommerce Orders?
- Improved User Experience: Visuals are easier to process than text. Thumbnails provide a quick and easy way for customers to identify their past purchases.
- Reduced Support Queries: Customers might remember products better with visuals, reducing the chance of them contacting you with “What was in order #5678 again?”
- Increased Engagement: Seeing the products again can spark interest and potentially lead to repeat purchases. “Oh yeah, I loved that hat! Maybe I should buy another one…”
- Professional Look: A visually appealing “My Account” page reinforces a sense of professionalism and attention to detail.
- WooCommerce My Account Page Editor: Many plugins like this one (and its variations in the plugin repository) include thumbnail capabilities.
- Advanced WooCommerce My Account Page Customization Plugins: These often have a wide range of customization options, including thumbnail display.
The Easiest (and Recommended) Way: Using a Plugin
While you *can* manually code the thumbnail addition, the easiest and safest approach, especially for beginners, is to use a dedicated plugin. Several plugins can achieve this, often as part of a larger “My Account” customization package.
*Reasoning:* Plugins handle the complexities of interacting with WooCommerce’s core code, preventing you from accidentally breaking your website. They also typically come with updates and support, ensuring compatibility with future WooCommerce versions.
Some popular options include:
How to use a plugin (Example):
While the exact steps vary depending on the plugin, the general process is:
1. Install and Activate the Plugin: Go to “Plugins” -> “Add New” in your WordPress dashboard, search for your chosen plugin, install, and activate it.
2. Configure the Plugin: Look for the plugin’s settings page (often under “WooCommerce” or a dedicated “My Account” menu).
3. Enable Thumbnails: Within the plugin’s settings, there should be an option to enable thumbnails in the order list. You might also Check out this post: How To Add Best Seller Product In Woocommerce have options for thumbnail size and placement.
4. Save Changes: Save your settings, and then check your “My Account” order history to see the thumbnails!
The Manual (Code-Based) Method (For Advanced Users)
If you’re comfortable with PHP and want more control, you can add the thumbnail functionality manually. Important: Back up your website *before* making any code changes. This method involves editing your theme’s `functions.php` file or using a code snippet plugin. Incorrect code can break your site.
Here’s how you can approach it:
1. Find the Order History Template: The template responsible for displaying the order history is usually located in `woocommerce/myaccount/orders.php` within your WooCommerce plugin folder. Don’t directly edit this file! Instead, we’ll create an override in your theme.
2. Override the Template: Create a folder named `woocommerce` in your theme’s directory (e.g., `wp-content/themes/your-theme/woocommerce`). Inside that folder, create another folder named `myaccount`. Copy the `orders.php` file from the WooCommerce plugin folder (`woocommerce/templates/myaccount/orders.php`) into your theme’s `woocommerce/myaccount` folder. This creates an override.
3. Edit the `orders.php` File: Now, you can safely edit the `orders.php` file in your theme’s directory. Look for the loop that iterates through the orders and displays their information. This is usually a `foreach` loop.
4. Add the Thumbnail Code: Within the loop, you’ll need to add code to display the thumbnail for each item in the order. Here’s an example of how you might do it:
orders as $customer_order ) { $order = wc_get_order( $customer_order ); $item_count = $order->get_item_count() - $order->get_item_count_refunded(); ?> <tr class="woocommerce-orders-table__row woocommerce-orders-table__row--status-get_status() ); ?> order"> <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-number" data-title=""> <a href="get_view_order_url() ); ?>"> get_order_number() ); ?>
<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-date" data-title="”>
<time datetime="get_date_created()->date( ‘c’ ) ); ?>”>get_date_created() ) ); ?>
<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-status" data-title="”>
get_status() ) ); ?>
<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-total" data-title="”>
<?php
/* ADD THUMBNAILS HERE */
foreach( $order->get_items() as $item_id => $item ) {
$product = $item->get_product();
if ( $product ) {
$thumbnail = $product->get_image( ‘thumbnail’ ); // ‘thumbnail’, ‘medium’, ‘large’, ‘full’
echo $thumbnail;
}
}
?>
get_formatted_order_total(), $item_count ) ); ?>
<?php
$actions = wc_get_account_orders_actions( $order );
if ( ! empty( $actions ) ) {
foreach ( $actions as $key => $action ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
echo ‘‘ . esc_html( $action[‘name’] ) . ‘‘;
}
}
?>
<?php
}
?>
Explanation of the Code:
- `$order->get_items()`: Gets all the items in the order.
- `$product = $item->get_product()`: Retrieves the product object from the order item.
- `$product->get_image( ‘thumbnail’ )`: Gets the product’s featured image as a thumbnail. You can change `’thumbnail’` to `’medium’`, `’large’`, or `’full’` to adjust the image size.
- `echo $thumbnail;`: Displays the image HTML.
5. Adjust Thumbnail Size and Styling (CSS): The default thumbnail size might not be ideal. Use CSS Read more about Woocommerce How To Send Someone A Product For Free to adjust the size, spacing, and alignment of the thumbnails. Add your CSS rules to your theme’s `style.css` file or a custom CSS plugin.
For example:
.woocommerce-orders-table__cell-order-total img {
width: 50px; /* Adjust as needed */
height: auto;
margin-right: 5px;
vertical-align: middle;
}
Important Considerations:
- Theme Updates: If your theme gets updated, you might need to re-apply these changes to the overridden `orders.php` file if the template is updated.
- Plugin Conflicts: Manual code changes can sometimes conflict with other plugins.
- Alternative Image Sources: If your products use custom fields to store images, you’ll need to adjust the code to retrieve the image from that custom field instead of using `get_image()`.
Conclusion
Adding thumbnails to your WooCommerce order history can significantly improve the user experience on your website. While the manual code-based method provides more control, using a plugin is generally the easiest and safest approach for beginners. Choose the method that best suits your technical skills and enjoy a more visually engaging “My Account” section! Remember to test thoroughly after implementing any changes.
