When operating an ecommerce website, the size and quality of your product images play a significant role in user experience. High-resolution images may look fantastic, but they can significantly hamper your website’s loading speed, causing potential customers to leave before they’ve even seen your products. To balance this, you might consider changing the thumbnail size in your WooCommerce shop page. This guide will walk you through the process, using a handy code snippet.

First, let’s understand the code snippet we’re using:

add_filter( 'single_product_archive_thumbnail_size', function( $size ) {
  return 'woocommerce_gallery_thumbnail';
});

This code modifies the size of the thumbnail images on your WooCommerce shop and archive pages. The function add_filter() is a WordPress function that allows you to alter certain core functionality. Here, we are changing the single_product_archive_thumbnail_size – the size of the thumbnails on the single product archive pages in your WooCommerce store.

The return value, woocommerce_gallery_thumbnail, is the new size for the thumbnails. This will change the thumbnails to a smaller size, which will significantly improve your page loading speed.

Now, let’s add the code snippet to your website. The recommended way to add this code is to include it in your theme’s functions.php file. But it is preferred to use a child theme or a custom plugin. If you add it directly to your theme’s functions.php file, you risk losing all your modifications when you update the theme. A child theme or a custom plugin would preserve your changes.

To add the snippet to a child theme:

  • Navigate to your WordPress dashboard.
  • Go to Appearance > Theme Editor.
  • Select the functions.php file of your child theme from the right-hand side.
  • Paste the code snippet at the end of the file.
  • Click Update File.

However, if you want to avoid diving into code and prefer a more straightforward, user-friendly solution, consider using the Image Size Controller. This powerful plugin not only lets you create custom image sizes but also allows you to disable any image size from being created for newly uploaded images, fix broken sizes, and create missing sizes. It also offers a bulk generate and delete function for image subsizes, making image size management in WooCommerce a breeze. You can focus more on your business, knowing that your site’s speed and performance are well-optimized.

Posted in :