Return to previous page

Square images - by zurli - on WordPress WooCommerce support

This topic has 6 replies, 2 voices, and was last updated 8 years, 5 months ago ago by Jack Richardson

zurli

Participant

May 27, 2016 at 16:04
Hi Guys,

I need to have square images all around the web site so, in:
- home page: http://fabioschenone.it/teasoul/en/ (latest products and sets) still 4 per row but squared
- listing pages: http://fabioschenone.it/teasoul/en/blooming-tea/ still 3 per row + sidebar but squared
- product page: http://fabioschenone.it/teasoul/en/shop/happy-rising-tea/ big one and thumbs
- and quick view of course
there is some CSS that can do that (along with woocommerce image resizing options) or a child theme feature ?

Appreciate your help

Thanks !
#127404 Copied Theme version: 2.8 WooCommerce version: 2.5.5
5 Answers

Jack Richardson

Support staff

May 27, 2016 at 16:57

Hello,

You can change images sizes in Woocommerce > Settings > Products > Display. Then regenerate thumbnails http://wordpress.org/plugins/regenerate-thumbnails/ .

Best regards,
Jack Richardson.

#127408 Copied

zurli

Participant

June 8, 2016 at 09:50

Hi Jack,

I tried but that didn’t worked.

Can you help with the CSS ?

#128836 Copied
Jack Richardson

Support staff

June 8, 2016 at 11:40
Hello,

Try to use this code in Theme Options > Custom CSS > Custom CSS for desktop:
```
.product-content-image img {
   height: 260px;
}
.sxy-zoom-container img, .product-images-slider, .owl-carousel .owl-item {
    height: 400px !important;
}
```
Best regards,
Jack Richardson.
#128866 Copied
zurli

Participant

June 8, 2016 at 14:06

Hi Jack !
Super … it was excatly what I needed.

Can you also help me with the mobile portrait CSS rules ?

Thanks again !

Fabio

#128894 Copied
Jack Richardson

Support staff

June 8, 2016 at 16:09
Hello,

Please use this code in Custom CSS for mobile section:
```
.product-content-image img {
   height: 300px;
}
.owl-carousel .owl-wrapper-outer, .product-images-slider {
    height: 400px !important;
}
#product-pager {
  height: 120px;
}
```
Best regards,
Jack Richardson.
#128900 Copied
Viewing 6 results - 1 through 6 (of 6 total)