Product Grid Images are cut off/cropped.

Hello @Safe Desires,

Please clarify the result you would like to achieve with your products, as we did not fully understand your request. If you would like to make your product images square, you can use the following custom CSS in your Archive Products Builder → Archive Products (widget) → Advanced tab → Custom CSS:

.selector .etheme-product-grid .etheme-product-grid-image img {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
}

Frontend result: https://gyazo.com/2f19583ff3299889b3a88a529ee40c01

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Safe Desires,

Your code is not functioning correctly because the customizations were implemented improperly:

1. In this example (https://gyazo.com/5e2c41c264cda8ea2057815e264a14cf), you added custom CSS but did not include the “selector” prefix. As a result, all product widgets on the current page inherit this style.
2. In your global theme custom CSS, you added a style that disrupted the structure of the products in the product grid widget (https://gyazo.com/0fb322939d81835260e4e82e28d11fa7).

In simple terms, you are attempting to fix the issue, but the main problem lies in the previous custom CSS, which should be applied locally to specific elements only. This would prevent further issues across all widgets in the product grid or carousel.

In your Product Grid Elementor widget, the “Equal Height” option is enabled (https://gyazo.com/16425ec39f9f71ae32864350743de052). Therefore, the custom CSS you added has no effect and only disrupts the layout.

If you remove (or comment out) the custom CSS in both your widget and the Theme Options, the products will display correctly (https://gyazo.com/704c702cdd4e7f2e2f65a55555fe4390).

Best regards,
Jack Richardson
The 8Theme’s Team