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 a code snippet.
2. Using WooCommerce Settings.
3. Using the WordPress admin dashboard.

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

1. 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.

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

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:

Piece of cake, right?

2. Using WooCommerce Settings to change the Default Category Thumbnail

Default Category thumbnails can be changed using the WooCommerce option inside the WordPress dashboard too. Though, the feature provided here applies not just to categories but also to products with missing thumbnails or featured images.

1. The first step is to upload an image of your choice using the WordPress Media Library. Navigate to Media -> Add New on the WordPress dashboard and upload the image of your choice. Next, navigate to Media -> Library. You will be able to spot your newly uploaded image here:

Click on the image and view the address bar, the value assigned to “item” is the attachment id of this image. As per our example, it is 74.

2. Navigate to Woocommerce -> Settings and click on the Products tab.

In order to set an image as the default image for either Categories or Products (which do not have any featured image), you have to enter the attachment id of that image in the “Placeholder image” textbox. We will change this value from 5 to 74.

Now, if you navigate to Products -> Categories, you will see that the default image for the Categories has been changed:

However, as mentioned earlier, this also changes the default images of products which do not have any featured product image set:

3. Using the WordPress admin dashboard to change the Default Category Thumbnail

Default Category thumbnails can be changed from your WordPress Dashboard itself. 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.

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.

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

This will change the image for the category you selected.

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.

Note: There is also a 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.

Happy Selling!