If you are here then I take it you are already somewhat familiar with WordPress’ trusted open source e-commerce plugin, WooCommerce. This plugin is great as it can virtually be scaled to any size whether you have 1 product or 1000 products, though I personally like to use WordPress mainly when designing small to medium eCommerce stores.

With that being said you might be new to the plugin all together or maybe you are just running into the same thumbnail error, no matter the reason this article will be able to help you properly configure your product thumbnails.

configuring woocommerce settings

Start your WordPress eCommerce store off by configuring the WooCommerce settings prior to creating your products with images, WooCommerce > Settings. It is important to remember to do this prior to creating your products otherwise you will need to force regenerate your thumbnails.

If you create your products pages with images before configuring the WooCommerce thumbnail settings or you have changed your theme, you may need to install and run the plugin Regenerate Thumbnails. This will hopefully resolve any issues; though if you are in the business of doing things right the first time, the following information reviews how to properly configure the thumbnail settings within WooCommerce.

Setting up product thumbnails in WooCommerce

In configuring WooCommerce’s settings you may have noticed a section labeled, “Product Image Sizes.” This is the section that we will need to setup properly in order to avoid any product thumbnail issues. If you are having trouble finding these settings, they are located in WooCommerce > Settings > Products > Product Options, then scroll toward the bottom.

In the product image section you will see a checkbox labeled “Hard Crop” as well as three subsections; catalog images, single product image and product thumbnails. Each one controls a photo from a different part of the eCommerce store.

  • Catalog Images are the medium sized thumbnail that controls the product images found in areas such the /shop and product category pages.
  • Single Product Image is the largest sized thumbnail that controls the product images that are found on their individual pages; they usually pull from the featured image section.
  • Product Thumbnails are the smallest thumbnail that will be pulled to single product pages from the product galleries section as well as from the cart and any product widgets you create.

woocommerce-adjusting-thumbnail-sizes

Did you wonder what the Hard Crop checkbox does?

By default your photo is going to be set to hard crop, meaning that the thumbnail will be made to the size chosen but the edges of the image are going to be cut off. To have the image resize to the select thumbnail size just uncheck the box thus setting your thumbnails to soft crop. This means that in most cases it’s going to be up to you to uncheck the Hard Crop checkbox.

hard-crop-example-wordpress

Example of a Hard Crop

soft-crop-example_wordpress

Example of a Soft Crop

What are the final thoughts?

To put it simply if you want to make sure that you do not have any thumbnail cropping errors with your product images then just uncheck the hard crop box so that your images are scaled rather than cut off. Thank you for reading this simple help guide on WordPress thumbnails and the WooCommerce plugin; if you found these tips useful then please let others know by sharing. 🙂

Antonino Bologna

Antonino Bologna

Owner / SEO Consultant at Antonino Bologna LLC
Antonino Bologna, owner of Antonino Bologna LLC, is a SEO analyst that lives in South Florida with a background in Network Security.
Antonino Bologna
Antonino Bologna