How to Set WooCommerce Storefront Thumbnail Sizes

Set WooCommerce Storefront Thumbnail SizesIf you are running a WooCommerce store, then you know that images are one of the most important parts of your online store. However, WooCommerce uses so many different product image-size types. This makes it hard to figure out where you can change them to suit your specific needs.

Set WooCommerce Storefront Thumbnail Sizes

This means that WooCommerce image customization can get a little complicated. This is why I have put together this guide to go over each aspect of WooCommerce images, so you can skip ahead to the part that suits you. Additionally, I am going to use the Storefront theme.

What are the Benefits of Setting Your Product Image Sizes?

Before we go into the ‘how’, you may be wondering about the why? Here are some of the benefits:

  • It prevents image blurriness. Images with the wrong size can appear blurred, which will give a bad first impression to your buyers.
  • It optimizes the speed. When an image is large, it takes longer to load. This will slow down your site and this will result in less revenue and unhappy users.

Steps to Resize a Product Thumbnail Image

By default, WooCommerce allows you to resize product images. All you need to do is follow these simple steps:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Customize.
  3. Click on WooCommerce > Product Images.Thumbnail cropping
  4. In the thumbnail cropping field, you can set the height of the images.
  5. Click on Publish if you are satisfied with the changes.

Ultimate Guide to Height of Shop Product Images

In the thumbnail field, you are offered 3 different options to set the height of the shop or Catalog images:

  • 1:1: If you choose 1:1, your images will be cropped into 360px width and 360px Height. This will work, assuming you have set the image width 360px in the Thumbnail Width field.
  • Custom: Here you can select the aspect ratio of the image. These are some of the popular aspect ratios (1:1, 5:4, 4:3, 3:2, 16:9, and 3:1).
  • Uncropped: in this option, the height of the image will be untouched. Images on your store will display using the aspect ratio in which they were uploaded.

Frequently Asked Questions

  • How can I change the image size if the Theme Developer sets it?

There is a simple solution to this, by removing or changing the image width settings from your themes functions.php file. In the Storefront theme, there are no settings for the main image or the thumbnail fields. This is because they are declared that beforehand in storefront/inc/class-storefront.php

// Declare WooCommerce support.

 add_theme_support( 'woocommerce', apply_filters( 'storefront_woocommerce_args', array(

 'single_image_width'    => 416,

 'thumbnail_image_width' => 324,

 'product_grid'          => array(

 'default_columns' => 3,

 'default_rows'    => 4,

 'min_columns'     => 1,

 'max_columns'     => 6,

 'min_rows'        => 1

 )

) ) );

The single product image size has been set to 416px wide and thumbnail to 324px wide. This means that you can either remove these two lines or change the width number to your desired width. However, you need to make sure that you change after creating a child theme. This is because it will revert to previous settings if you update the theme.

  • How can I set catalog image sizes?

For the shop product images and catalog or category images, they are resized based on the settings from Appearance > Customize > WooCommerce > Product Images > Thumbnail Width field.

  • Why are my WooCommerce product images blurry?

If this is the case in your WooCommerce store, you can check a few things:

  1. Check the quality of the image. Check whether the quality is good and if it is a low quality when added to your WooCommerce store, it will not look as crisp and clear, as you would like.
  2. Thumbnail settings. Check the settings and if the settings are looking for a 500px image for your product page and a 160px image on your catalog page, but you only upload a 160px image, then WooCommerce will automatically enlarge your image, causing it to look blurry.
  • What is the best image size?

The best image size of your online store depends on the theme you are using for your store. An image size of 800 – 1000px wide is suitable if you are selling a simple product like a shirt.

However, if you have a detailed or complicated, uploading a larger image will allow potential customers to zoom in and see those details up close. The recommended size is 2000px wide, which will work better

It is also worth mentioning that you should never upload a large image. An oversized image will slow your site down and as a result, will likely affect sales.

Conclusion

In this brief tutorial, you have learned how you can set WooCommerce Storefront thumbnail sizes with just a few clicks. Additionally, I have explained how you can change product and gallery image sizes, and an ultimate guide to the thumbnail settings.

Moreover, you have learned the benefits of setting your WooCommerce product image sizes. Oversized images will slow your site down and as a result, will likely affect sales. Additionally, I have added a frequently asked questions section that includes some common problems you may come across.

Images are very important when it comes to making sales in your online store. Make sure that you follow the guidelines provided in this tutorial and if you are not sure of the changes, consider using a plugin like the WooThumbs for WooCommerce. It will allow you to change your WooCommerce product image sizes without the hassle and improve your WooCommerce product gallery.

Similar Articles

Comments are closed.