Home Forums WoodMart support forum Product images not cropped to square (1:1) on Shop page

Product images not cropped to square (1:1) on Shop page

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #692873

    mahmoodalnajjar.ma
    Participant

    Hello WoodMart support team,

    I’m facing an issue with product images on my Shop page.
    Some product images are tall (portrait orientation) and appear stretched, which ruins the layout consistency.

    I already went to:
    Appearance → Customize → WooCommerce → Product Images
    and set the cropping ratio to 1:1 (square), but it didn’t work.
    The images are still displayed with different heights.

    I also tried adding custom CSS (aspect-ratio: 1/1 and object-fit: cover) but it didn’t have any effect — one version even caused images to disappear.

    Could you please advise how to properly crop or force all product images to appear in a square shape on the Shop and Category pages without manually editing each image?

    Attachments:
    You must be logged in to view attached files.
    #692968

    Hello,

    Your images differ in size considerably. Please check this manual and upload the same size of the product images: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

    The only way to make the view awesome is to upload images of the same size and proportion.
    WooCommerce allows some settings that you can find under Appearance >> Customize >> WooCommerce >> Product Images.

    You can define the “height” of the shop thumbnails by setting up the width : height aspect ratio in the “Thumbnail cropping” section:

    Custom: In Custom, you can select the aspect ratio of the image.

    Here are some of the popular aspect ratios (1:1, 5:4, 4:3, 3:2, 16:9 and 3:1).

    Uncropped: The height of the image will be untouched. Images will be displayed using the aspect ratio in which they were uploaded: https://ibb.co/6mR6DbD

    For the Product Archive page, please navigate to Theme Settings > Product archives -> Product styles, here you can enable the Even product grid for desktop option to align products if they have different height components: https://prnt.sc/ASt5z0mmasuz

    Best Regards,

Viewing 2 posts - 1 through 2 (of 2 total)