设置与产品尺寸不同的 Woocommerce 产品类别缩略图尺寸

Question

I need help changing some settings in my WordPress default image sizes. I've been looking for an answer everywhere but could not find any good answers.

Let me first define what I am talking about: -Product photo: the regular product photo in catalog view. -Product category photo: this is the photo for a certain product category (see photo 1 below) (say hairloss treatments), which once clicked would take you to a page with multiple products under that category (say hairloss products).

Right now it looks like the size for the product images (in catalog view) are equal to my product category thumbnail sizes. This does not look good because product photos are ok to be square and small but category photos should be more of a rectangular shape. I tried to change the category thumbnail sizes by going to CSS and changing the width like this:

 .categories-style-default .cat-design-default .category-content .product-category-thumbnail img { width: 350px !important }

The image block for the category changed to 350px and the image just stretched but still used a resized image default size of (230px width, which is that of the product image default).

Can you help me figure this out? I am not an expert in coding but if you give me steps I can do it!

Here's what my category thumbnail looks like now:

Here's how it should look like:

Here's the code for the category image:

Here's the default sizing for products in WooCommerce:

Thanks!!

Answer 1

Use object-fit. The CSS object-fit property is used to specify how an should be resized to fit its container.

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}