hi, may i know the css code to force the product grid and single product gallery

hi, may i know the css code to force the product grid to 200×200; and single product image gallery to 1000×1000. i do now want know rescalp the image , just use the css code to force the block to be square . so the product grid image looks the same roll and nice

Hello,

Your product images vary significantly in size, which is why the layout appears inconsistent.

To achieve a clean and uniform grid view, the best solution is to upload product images that have the same dimensions and proportions.

Please refer to this guide for detailed instructions: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

If you still prefer to adjust the display using CSS, you can add the following code in Theme Settings > Custom CSS. Try to change the code as per your requirements.

.wd-product .product-element-top {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image {
    height: 1000px;
}

This forces the image containers to be square but may not look perfect unless all images are consistent in size.

Best Regards,

[Author]

Posts