Search the site:

Home Blog How to Change Default Category Thumbnail on WooCommerce Shop Page

How to Change Default Category Thumbnail on WooCommerce Shop Page

WooCommerce product categories are similar to WordPress blog post categories. Product categories are created to organise products. And management of WooCommerce categories is similar to labels and product attributes.

As per Bob Phibbs, we must focus on the visual looks of a store to increase sales. This is because our brain absorbs visual things more quickly – the major reason why we remember everything learned from infographics as opposed to learning from listening. You may have noticed that on e-commerce sites of big businesses such as Amazon, Aliexpress etc. or even on sites of medium-scale businesses, product categories are displayed by making use of attractive icons or images.

In this post, we are going to learn how to change the default category thumbnail on the WooCommerce shop page by following some easy steps to make our WooCommerce store appealing.

You can change the product category thumbnail in three different ways in WooCommerce:

  1. Using code snippets
  2. Using plugins
  3. Using the WordPress admin dashboard.

Before delving into the steps, let’s see how our category thumbnails look like in their default state:

Change Default Category Thumbnail on WooCommerce Shop Page - Default category thumbnails

Using a code snippet to change the Default Category Thumbnail

Let’s start with using code snippets to change the default category thumbnail in your WooCommerce store. For this, you need to make sure that you are editing the functions.php file of your child theme.

First, create your thumbnail image and upload it to your media library. You may use any size, but we recommend using images with dimensions 512 x 512 px. Thumbnails are square in size so the width and height of the image should be equal.

Change Default Category Thumbnail on WooCommerce Shop Page - Adding thumbnail to Media Library

Once your image has been uploaded, click on the open to copy the image URL.

Change Default Category Thumbnail on WooCommerce Shop Page - Copying the URL of the added thumbnail

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

// Add filter

add_filter( 'woocommerce_placeholder_img_src', 'ts_custom_woocommerce_placeholder', 10 );

// Function to return new Thumbnail image URL.

function ts_custom_woocommerce_placeholder( $image_url ) {
$image_url = 'https://www.tychesoftwares.com/wp-content/uploads/2019/05/ts_cart-1.jpg'; // change this to the URL to your custom thumbnail image url
return $image_url;
}

After saving your functions.php file, you will see that the categories now display the default thumbnail that you assigned:

Change Default Category Thumbnail on WooCommerce Shop Page - Default category thumbnail changed

 

Piece of cake, right?

Using plugins to change the Default Category Thumbnail

If you aren’t comfortable with making changes to your functions.php file, you can use plugins to do so.

WooCommerce Customizer is a free plugin developed by SkyVerge that lets you customise various elements in your WooCommerce store.

Once you download, install and activate this plugin, go to your installed plugins and click on the Configure option for this plugin, to change your Default Category Thumbnail image. On this page, click on the Misc option:

Change Default Category Thumbnail on WooCommerce Shop Page - WooCommerce Customizer Configure Page

Under the Misc option, against the Placeholder Image Source field, paste your thumbnail image URL and click on Save Changes.

Change Default Category Thumbnail on WooCommerce Shop Page - WooCommerce Customizer Misc Options

 

That’s it! You’re done!

This will change all the default thumbnails across the site.

There is another plugin known as WooCommerce Auto Category Thumbnails available in the WordPress official plugin directory to change the default category thumbnail image, but what it does is it automatically replaces the thumbnail image with a product image from that category of products. It means that you don’t need to do anything to change the default category thumbnail.

Using the WordPress admin dashboard to change the Default Category Thumbnail

Default Category thumbnails can be changed from your WordPress Dashboard itself, this is the easiest way to do so. However, you will need to choose an image for each category.

1. From your WordPress admin panel, navigate to Products -> Categories and look for your category of choice.

Change Default Category Thumbnail on WooCommerce Shop Page - The Products->Categories list

2. Click the Edit button under the category name, the thumbnail of which you wish to change. Scroll down to find the Thumbnail field and upload an image of your choice. As mentioned before, the image should be square in shape.

Change Default Category Thumbnail on WooCommerce Shop Page - Editing a particular product category

 

Once an image is added, click on the Update button.

Change Default Category Thumbnail on WooCommerce Shop Page - Custom category thumbnail added

This will change the image for the category you selected.

Change Default Category Thumbnail on WooCommerce Shop Page - Custom category thumbnail changed

 

You can do the same for all categories. Using a custom thumbnail image is often preferable over using a generic one. The more appealing the image, the more likely that the customer will click on it, potentially increasing your sales.

Happy Selling!

Browse more in: How Tos, Tutorials, WooCommerce How Tos

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
from purchased

Subscribe Now