shop: how to change image dimensions on archive

Hi

I need my shop pages (only some categories to be specific) like https://demo.xtemos.com/basel/shop/?shophover1 to not show the original product image, but a zoomed in version (= only part of the image, a different aspect ratio as well).
How can I achieve that?

It would be ok if I can set a certain image to be used on the shop pages instead of the product image. The additional images should then not be visible in the product gallery on the product detail page.

Thx
Dorian

Hello,

It is not possible to configure one size on one category and another on other. In order to set the size, navigate to Appearance – > Customize -> WooCommerce -> Product Image and find the size option for product page image as well as images in a grid:

Main image width – Image size used for the main image on single product pages. These images will remain uncropped. Image width used in demo sites are: 600px;
Thumbnail width – Image width used for products in the catalog, Image width for the catalog is 350px;
Thumbnail cropping checkboxes:

1:1 – Images will be cropped into a square;
Custom – Images will be cropped to a custom aspect ratio, for example, 4:3 or there is the option to insert the aspect ratio
Uncropped – Images will display using the aspect ratio in which they were uploaded

Note: there is no required or recommended image size for product or other purposes. Image should be big enough to have a nice view. Just for information we provide images sizes applied in our demo:

Product main image: width: 800px; height: 1200px;
Blog post: width: 1024px; height: 720px;
Page title background: 1200px; height: 400px;

Best Regards

That doesn’t really work.

My settings are:
Thumbnail width: 600
Thumbnail cropping Custom: 3:4

The result is a image of 500×800 px.

Please explain and advise.
Thx
Dorian

additional question:
where can I find the code to edit the .product-grid-item ?

Hello,

The result is an image of 500×800 px.

Please advise what result you expect and provide your site admin access I will check the images initial size and settings.

where can I find the code to edit the .product-grid-item ?

Check this file basel\woocommerce\content-product.php The file title correspond to the hover effect which you set in the Theme Settings.

Best Regards

Hi Elise,

with
Thumbnail width: 600
Thumbnail cropping Custom: 3:4

I would expect an image of 600×800 pixel.

Thx
Dorian

Hello,

The thumbnail width depends on the number of product items in the row. Thumbnail cropping Custom: 3:4 is the ratio of image cropping. You need to test bigger images with different sizes to find the best size.

Best Regards

[Author]

Posts