Return to previous page

How to center the products' images?

This topic has 2 replies, 2 voices, and was last updated 7 years, 4 months ago ago by Olga Barlow

xseven121

Participant

August 12, 2017 at 08:30

Because of irregular images,the bottons ‘add to cart’ are not aligned, not pretty. How to change the style of that? and the images should in the center of the wrapper.
In addition, I found the gallery images not in the center of swiper container in single product page, ’cause of irregular images, too.

#169931 Copied Theme version: 4.1

1 Answer
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 Copied
Tagged: best selling, centering products, images, themes, woocommerce
Viewing 2 results - 1 through 2 (of 2 total)