I was trying to display product thumbnails in 230px (as per recommendations by GTmetrix).

Since, I am using storefront the default value is declared in storefront/inc/class-storefront.php

The code is as follows:

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

) ) ) );

I tried assigning single_image_width with the value of 230 and it made no difference. So, I marked out the line and added the following code in my functions.php file:

add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 230
) );

This doesn't seem to make a difference either. What am I doing wrong?

For reference this is the images I am trying to resize. I used woocommerce shortcodes to display it in the site. enter image description here

I would really appreciate the help.

Thank you, - KG.


I can't take credit for this one, but I found the answer at themebynumbers.com

In my storefront-child folder I have added this to my functions.php file:

add_filter( 'woocommerce_get_image_size_thumbnail', function( $size ) {
  return array(
    'width'  => 150,
    'height' => 150,
    'crop'   => 1,
  • Of course you will need to change the width and height to whatever settings you find appropriate/ – Eggs Nov 11 '18 at 19:23
  • Can you please mark my research as the the accepted answer. Thanks. – Eggs Nov 16 '18 at 1:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.