Wocommerce Product Image Size Problem

guguk

Well-known member
Jul 19, 2019
1,149
827
113
Ottoman Empire
Hello there,
I want to use Elessi or Zella theme for my client's project but before the prepare draft to them i tried on localhost both of them. My client's products not too big and they dont want big images too. So i've changed product image's width on customizer and i used regenerate thumbnails plugin too but no luck. Still product image's size same as theme default.

I attached an image for references (Customizer setting width: 400px, image sizes: 600x900px)
 

Attachments

  • ref.png
    ref.png
    228.8 KB · Views: 17

videva

Member
Aug 25, 2020
75
53
18
Hello there,
I want to use Elessi or Zella theme for my client's project but before the prepare draft to them i tried on localhost both of them. My client's products not too big and they dont want big images too. So i've changed product image's width on customizer and i used regenerate thumbnails plugin too but no luck. Still product image's size same as theme default.

I attached an image for references (Customizer setting width: 400px, image sizes: 600x900px)
are you want to change the size of product image to 400px ?
just add css like this, i tested on demo page zella theme
CSS:
.nasa-product-details-page .product-gallery.nasa-gallery-full .nasa-single-product-main-image .slick-slide img {
    display: block;
    margin: 0 auto;       
    max-width: 400px;
}
 

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
Strange that changing it in the customizer doesn't work, because when the theme declares the image sizes that option in customizer is usually disabled. Anyway, you can easily override that in your child's functions.php file or in a custom scripts plugin with this:
PHP:
add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 200,
'gallery_thumbnail_image_width' => 100,
'single_image_width' => 400,
) );
 

guguk

Well-known member
Jul 19, 2019
1,149
827
113
Ottoman Empire
are you want to change the size of product image to 400px ?
just add css like this, i tested on demo page zella theme
CSS:
.nasa-product-details-page .product-gallery.nasa-gallery-full .nasa-single-product-main-image .slick-slide img {
    display: block;
    margin: 0 auto;      
    max-width: 400px;
}
I want to use big image sizes ( eg: 800x1200px for zoom feature) but single product image canvas size should be 400x600 or more little may be 300x500 (or 300x400). Product images are vertical so i dont want to square or horizontal and cropped version.

I have already played CSS but i check on other screen (1440 and 1200) it's not good look. Also wishlist icon's location not correct.

I tried your CSS code same issues happened.
 

guguk

Well-known member
Jul 19, 2019
1,149
827
113
Ottoman Empire
Strange that changing it in the customizer doesn't work, because when the theme declares the image sizes that option in customizer is usually disabled. Anyway, you can easily override that in your child's functions.php file or in a custom scripts plugin with this:
PHP:
add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 200,
'gallery_thumbnail_image_width' => 100,
'single_image_width' => 400,
) );
I thought same before and i added above code my child theme and regenerate images but still same no change.
 

guguk

Well-known member
Jul 19, 2019
1,149
827
113
Ottoman Empire
Have you searched for that in the theme files (or maybe some plug-in), whether it is present or not? E.g. 'single_image_width'?
And if it is, what is the full code?
yes i have searched before "single_image_width in theme files but there has not any declared size just few lines i dont remember what is like that for now.
 

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu