How to change product thumbnail size in storefront theme

Question

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.

I would really appreciate the help.

Thank you, - KG.

Answer 1

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,
  );
});

Answer 2

Despite this is an old question I'll try to provide more in depth answer (in case someone is struggling).

1. First of all you shouldn't modify storefront/inc/class-storefront.php Use a child theme instead.

2. Secondly, use proper filter in your child theme. (this should work):

add_filter( 'storefront_woocommerce_args', 'storefront_args_override', 10, 1 ); 
function storefront_args_override( $args ) {
    $args['thumbnail_image_width'] = 230;
    return $args;
}

3. And finally - REGENERATE THUMBNAILS

when you add new image sizes to wp, all already uploaded images wont regenerate automatically. You need to upload images again or simply regenerate thumbnails.