How to Change WooCommerce Gallery Thumbnail Size

As an online store owner, having visually appealing images of your products is crucial in attracting potential customers. WooCommerce, the popular e-commerce platform, provides a built-in image gallery feature to showcase your product images. However, the default gallery thumbnail size may not always fit your website’s design and layout. In this article, we’ll guide you on how to change your WooCommerce gallery thumbnail size to make it more suitable for your website.

Step 1: Accessing Your Theme’s Functions.php file

To change your WooCommerce gallery thumbnail size, the first step is to access your theme’s functions.php file. You can do this by logging into your WordPress dashboard and navigating to Appearance > Theme Editor. Select the functions.php file from the list on the right-hand side of the screen.

Step 2: Adding a New Image Size

To add a new image size for your WooCommerce gallery thumbnail, you can use the add_image_size() function in your theme’s functions.php file. Here’s an example code snippet to add a new thumbnail image size:

add_image_size( ‘woocommerce-thumbnail-new’, 200, 200, true );

In this example, we’ve named the new image size “woocommerce-thumbnail-new” and set the dimensions to 200 by 200 pixels. The last parameter “true” means that the image will be cropped to fit the dimensions exactly.

Step 3: Regenerating Thumbnails

After adding the new image size, you’ll need to regenerate your image thumbnails so that they are resized to match the new dimensions. You can use a plugin such as Regenerate Thumbnails or Thumbnail Regeneration to do this.

Step 4: Updating Your Theme’s CSS

Once you’ve regenerated your image thumbnails, you’ll need to update your theme’s CSS to display the new thumbnail size properly. You can do this by adding the following CSS code to your theme’s style.css file:

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
width: 200px!important;
height: 200px!important;
}

In this example, we’ve set the width and height to match the new image size we created earlier. The “important” declaration ensures that the CSS properties are applied even if there are other stylesheet rules that conflict with them.

Step 5: Testing Your New Thumbnail Size

Finally, you can test the new thumbnail size by navigating to one of your product pages with multiple images and checking that the thumbnail images are now displayed at the correct size.

Conclusion

Changing your WooCommerce gallery thumbnail size can make a big difference in how your product images are displayed on your website. By following the steps outlined in this article, you can easily create a new image size for your thumbnails, regenerate your thumbnails, update your theme’s CSS, and test your new thumbnail size. With a little bit of CSS knowledge and some simple code changes, you’ll be on your way to showcasing your products in the best possible way.