• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

Wocommerce Product Image Size Problem

guguk

Well-known member
Trusted Seller
Trusted Uploader
Jul 19, 2019
1,592
1,279
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
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;
}
 
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,
) );
 
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.
 
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.
 
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.
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock