Return to previous page

Reply 170084 to: How to center the products' images?

Avatar: Olga Barlow
Olga Barlow
Support staff
August 15, 2017 at 10:39

Hello,

If you want to have a nice grid and all the images with the same size then we would recommend editing the featured image before uploading to your WP, for example instead of landscape photo https://shop.asenappy.com/wp-content/uploads/2017/08/xM1101.jpg.pagespeed.ic.PIhMQ4bZiG.webp use squared http://prntscr.com/g8o2am Then your grid will look much better. Or you can use hard crop option in WC setting (WooCommerce > Settings > Products > Display > Image sizes) but then part of the image will be cropped that sometimes is not very good. Product block and product images do not have fixed height.

To align product thumbnails you can enabled hard crop in WC settings and regenerate thumbnails to apply changes or try to add the following code (Theme Options > Styling > Custom CSS)

.single-product .swiper-control-bottom .thumbnails-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

In your case, the hard crop for thumbnails will be the better solution than custom.

Regards

#170084
Go To The Whole Conversation In Topic

Useful links WooCommerce & WordPress

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.