bigger gallery image ?

Hi there!

Thanks for your message.

Could you please send us a screenshot describing what you want to achieve? You could use a free tool like https://snipboard.io to share the screenshot/s.

Also, could you please share the URL of the product in question?

Thanks ??

Hi thanks, please see this link here of the screenshot, the first image is the default size, the second image is the bigger one which I want. please advise, thank you.

• This reply was modified 2 years, 7 months ago by freelylw.

Hello @freelylw ,

Thanks for the screenshot. I understand you want to increase the size of the gallery image and reduce the summary width.

You can do that by changing their width with custom CSS. You can add this code in your Appearance > Customize > Additional CSS field:

@media (min-width: 768px) {

    .single-product div.product .woocommerce-product-gallery {
        width: 57%;
    }

    .single-product div.product .summary {
        width: 37%;
    }
    
}

If the image doesn’t look when the gallery area is bigger, try to increase the image size in Appearance > Customize > WooCommerce > Product Images

Link to image: https://d.pr/i/1lQUhw

Thank you ??

Hi thanks, why my product image setting page doesn’t has field to input the size , please see here is my version doesn’t support this ?

Hey @freelylw,

I’m checking with @rur165 about the version. I’ll revert to you.

If you are using the latest version of the theme, here is the important part to note:

The thumbnail image size can be adjusted depending on usage. The WooCommerce thumbnail size is set to a default of 600 pixels in width, and cropping aspect ratios can be customized by the store owner.

I hope this helps!

Hi, thanks but I don’t get this, where can I adjust the image size “depending on usage” ? I have checked my product image is about “400px” width. please advise. thanks

Hello @freelylw ,

It looks like my Storefront was a bit customized so I had those options. By default, Storefront doesn’t allow you to change the image size as it is coded directly on the theme files. If you are interested, you can check the FAQ section (at the last) of this article: WooCommerce: How To Change Product Image Size

So, you do not get those settings to change the image size. If you need to update the default image sizes created by Storefront, you will need to add custom code to your theme’s functions.php file that overrides the default value. An example code would be:

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

You will need to Regenerate the thumbnails after you add new image sizes to the theme.

If you aren’t familiar with codes I recommend getting in touch with a developer for suggestions.

I hope this clarifies the confusion.

Thank you ??

Hey @freelylw,

Hope the image sizes have now been changed! We haven’t heard back from you for a while, so I’m going to mark this post as resolved.

If you need any further help here, please let us know. Or, if you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

Thank you!