This is How to Change Product Thumbnails on Cart, My Account, and Order Review Pages in WooCommerce
As an ecommerce store owner using WooCommerce, one of the most common requests we get is how to change the product thumbnails that appear on the cart, my account, and order review pages.
By default, WooCommerce uses the product's featured image as the thumbnail, but this doesn't always align with the design and branding of your store. Maybe you want to use a different image size, add a badge or logo, or display a variation-specific thumbnail.
Unfortunately, there isn't a simple, out-of-the-box solution for customizing these product thumbnails in WooCommerce. But don't worry – with a little bit of code, you can easily make the changes you need.
In this step-by-step guide, we'll walk you through exactly how to customize the product thumbnails across your cart, my account, and order review pages. By the end, you'll have a fully branded and consistent product thumbnail experience for your customers.
Why Customize Product Thumbnails in WooCommerce?
Before we dive into the technical details, let's quickly explore why you might want to customize your product thumbnails in the first place.
Branding and Consistency
Your product thumbnails are a key visual element that contribute to the overall branding and design of your ecommerce store. By using custom thumbnails, you can ensure a cohesive and professional look across all pages.
Showcase Variations
If you sell products with variations (like size, color, etc.), you may want to display a thumbnail that's specific to the selected variant. This provides a better user experience and helps customers quickly identify the product they've added to their cart.
Optimize for Mobile
Mobile shoppers make up a large portion of ecommerce traffic these days. Ensuring your product thumbnails are optimized for smaller screens can improve the overall mobile experience.
Highlight Key Information
Rather than just showing the standard product image, you may want to overlay additional information like badges, logos, or pricing. This can help draw attention to important details.
How to Change Product Thumbnails in WooCommerce
Now that we understand the benefits, let's walk through the step-by-step process for customizing your product thumbnails.
1. Create a Child Theme
To make changes to the default WooCommerce template files, we'll need to create a child theme. This ensures your customizations won't be overwritten when you update the parent theme or WooCommerce.
If you haven't created a child theme before, you can follow this handy guide from WordPress. The key steps are:
- Create a new directory for your child theme in the
/wp-content/themes/
folder.
- Create a
style.css
file that defines your child theme and references the parent theme.
- Optionally, you can also create a
functions.php
file to handle any additional functionality.
Once your child theme is set up, you're ready to start customizing the product thumbnails.
2. Override the WooCommerce Template Files
WooCommerce uses a series of template files to control the structure and layout of various pages throughout your store. To customize the product thumbnails, we need to override these default templates.
The specific templates we'll need to modify are:
cart/cart-item.php
: Controls the product thumbnail on the cart page
myaccount/view-order.php
: Controls the product thumbnail on the order review page
order/order-details-item.php
: Controls the product thumbnail on the my account page
To override these templates, create the following directory structure in your child theme:
your-child-theme/
woocommerce/
cart/
cart-item.php
myaccount/
view-order.php
order/
order-details-item.php
Now, copy the contents of the corresponding template files from the WooCommerce plugin directory into your child theme's directories. You can find the original WooCommerce template files in the woocommerce/templates/
directory of the plugin.
3. Customize the Product Thumbnail
With the template files in place, you can now start modifying the product thumbnail code. Open up the cart-item.php
, view-order.php
, and order-details-item.php
files in your child theme and look for the section of code that displays the product thumbnail.
Typically, you'll see something like this:
<?php
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
echo '<div class="product-thumbnail">' . $thumbnail . '</div>';
?>
This code retrieves the product's featured image and displays it as the thumbnail. To customize this, you can modify the $thumbnail
variable to use a different image size, add overlays, or display a variation-specific thumbnail.
Here's an example of how you might customize the thumbnail to display a 100×100 pixel image with a badge overlay:
<?php
$product_id = $cart_item['product_id'];
$product = wc_get_product( $product_id );
// Get the product thumbnail
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $product_id ), array( 100, 100 ) );
// Add a badge overlay
$badge_html = '<div class="product-thumbnail-badge">Sale</div>';
$thumbnail_html = '<div class="product-thumbnail">' . $badge_html . '<img src="' . $thumbnail[0] . '" width="' . $thumbnail[1] . '" height="' . $thumbnail[2] . '"></div>';
echo apply_filters( 'woocommerce_cart_item_thumbnail', $thumbnail_html, $cart_item, $cart_item_key );
?>
This code first retrieves the product ID from the cart item data. It then uses the wp_get_attachment_image_src()
function to get the product's featured image at a specific size (100×100 pixels in this example).
Finally, we create an HTML snippet that includes the image and a "Sale" badge overlay, and then pass that through the woocommerce_cart_item_thumbnail
filter to display it on the page.
You can adapt this code to fit your specific needs, such as displaying a variation-specific thumbnail or using a different image size.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
4. Test and Iterate
After making your changes, be sure to test the customized product thumbnails across the cart, my account, and order review pages. Ensure they're displaying correctly and that the overall layout and design is consistent with your store's branding.
If you need to make any further adjustments, simply update the code in your child theme's template files and refresh the page to see the changes.
Conclusion
Customizing the product thumbnails in your WooCommerce store is a great way to improve the overall user experience and reinforce your brand. By following the steps outlined in this guide, you can easily override the default WooCommerce templates and create a unique, cohesive thumbnail design across your cart, my account, and order review pages.
Remember, the key is to create a child theme so your customizations don't get overwritten during updates. And don't be afraid to experiment – you can always iterate on the design and layout until you find the perfect solution for your store.
If you're looking for an even more powerful way to analyze and optimize your WooCommerce store, be sure to check out Flowpoint.ai. Our AI-powered analytics and recommendation engine can help you identify technical, UX, and content improvements to boost your conversion rates