Your Dedicated Partner for All Things WordPress

How to Change WooCommerce Gallery Thumbnail Size

Table of Contents

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.

How to get started?

Learn more

WooCommerce Maintenance

Save 33% with our Annual pricing plan.

Get Started

Looking for help? Chat with us.

Are you in need of assistance or guidance? Look no further! Our dedicated team is here and ready to help. Chat with us today and let’s work together to find the perfect solution for your needs.

Our support team will get you:

I believe every website owner deserves a reliable professional support always by their side.

Alexey Seryapin
Founder of WPServices

Having Troubles With WordPress?

Claim Your Free WordPress Maintenance

In today’s fast-paced digital landscape, every website deserves the care and expertise of a professional maintenance team, ensuring optimal performance, enhanced security, and seamless user experiences, so you can focus on growing your business with peace of mind.

Alexey Seryapin
Founder of WPServices

Coupon Code Applied!

Take your time and continue browsing our services.

Alexey Seryapin
Founder of WPServices