Return to previous page

Thumbnail Sizes - by macamrstudios - on WordPress WooCommerce support

This topic has 4 replies, 3 voices, and was last updated 6 years, 8 months ago ago by Olga Barlow

macamrstudios

Participant

March 12, 2018 at 21:47

Hi

I am trying to modify the default size for the Products carousel to show the whole image rather than a cropped version of it. Can you point me to the correct file (CSS div/style tag) I would need to need to modify in order to achieve this?

#187974 Copied Theme version: Version: 4.21 WooCommerce version: Version 3.3.3

3 Answers

Rose Tyler

Support staff

March 13, 2018 at 14:55

Hello,

I hope you are well today and thank you for the topic.
In woocommerce 3.3.3 version, the plugin authors removed image settings at all even from customizer. But we keep the previous version of their settings http://prntscr.com/ik093w, so image size you can change via Customizer > woocommerce > product images (do not forget to regenerate thumbnails using Regenerate thumbnails plugin to apply changes). But 8theme product widgets use WP thumbnails size (Settings > Media) to avoid too big image in that area. So, if you don’t want to crop these images disable it in WP settings and regenerate thumbnails.
Feel free to ask if you have any other questions.

Regards

#188080 Copied

macamrstudios

Participant

March 13, 2018 at 15:58

Thanks – that solved one issue, but presents a new one… of course. Can I modify the CSS so that the product names are all aligned in a row and the thumbnails are center aligned (vertical) with each other? Right now everything is top aligned.

#188090 Copied Theme version: Version: 4.21 WooCommerce version: Version 3.3.3
Olga Barlow

Support staff

March 13, 2018 at 17:25
Hello,

If you sell pictures and don’t want to crop images we would recommend preparing images using any graphical editor before uploading to your media library and make them one size for example http://prntscr.com/iqokkg
If you can’t change the images then you may add the fixed min/max width for all the grid images using the code below but it would be better to use the correct images from start
```
.content-product .product-content-image img {    
    min-width: 1px;
    width: auto;
    max-height: 360px;
}
.content-product .product-image-wrapper {
    min-height: 360px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
```
Regards
#188108 Copied
Viewing 4 results - 1 through 4 (of 4 total)