[Resolved] Image sizes on category page

[ustar]

Hi, there!

1. Today, all day I try to tidy up the display of product cards on category pages. The problem is that the photos on the cards are displayed with an additional white field on the right side.
Screenshot:
https://postimg.cc/T5cdtG1F

To display the available sizes, I use the plugin STWooSwatches and it works with the theme in some way. The plugin forms an additional block when you mouse over the product card. Its width is set to 100% of the width of the product card.
I noticed that the size block size is always larger than the product card block size by 20 pixels. Even when scaling the screen. And this, I think, causes an extra white field on the product card.

2. I would like the photo to occupy 100% of the width of the product card.
Screenshot:
https://postimg.cc/t1hcfGLN

I don’t know exactly who to contact with my question. To you, or to the developer of the size plugin, I just wrote you first.
You have access to the site for addresses: XXX.X.XX.196 and XX.XXX.XX.27

I am using the niche template.
Lazy loading of images is disabled.

[David]

Hi there,

can you clear and disable autoptimize so i can take a closer look.

[ustar]

Hi, David!

Autoptimize cache cleared, Autoptimize disabled.

Regards, Sergey.

[David]

Looks like that resolved the issue – check by clearing your browser cache. If thats correct can you re-enable autoptimize now

[ustar]

Are you speaking about 1st or 2nd question?

I cleared browser caches and checked in 3 different browsers.
The issue still here. Both.
No changes.

Could you please send me a screenshot?

Regards, Sergey.

[David]

Hmmm… try adding this CSS:

.st-swatch-plugin ul.products li.type-product .st-swatch-in-loop,
.st-swatch-plugin ul.products li.type-product:before {
    box-sizing: border-box;
}

.inside-wc-product-image {
    margin-left: -13px;
    margin-right: -10px;
}

[ustar]

Hi, David!

Yes, much better! Cool!
But there is still a small white border on the cards.
https://postimg.cc/3dvTvM0C

Regards, Sergey.

[David]

Thats because the images have a max width of 275px and the columns on larger screens are 282px.

[ustar]

Aha, understood.

Is it possible to make them 275px or 282px or 300px both? To remove this white border.

Or 275px is the wide sated by theme and it’s not possible to change?
In this case, is it possible to change column wide to 275?

I have set Thumbnail width to 282px in Customizing/Woocommerce/Product images, but nothing changed.
I do not quite understand how this setting works and what it affects.

[David]

The image size is controlled by Woocommerce. The Customizer > Woocommerce > Product Images — > Thumbnail width is what defines them. Currently it still set to 275px in the markup.
Try disabling autoptimize and re-apply the image sizes.

[ustar]

I cleared the Autoprimize caches, disabled the plugin, and cleared the browser caches.
Then, I reset the thumbnail size to 282px here: The Customizer> Woocommerce> Product Images -> Thumbnail width.
The white border is still displayed.

The interesting thing is:
When I reduce the screen size and product cards are also reduced, the width of the image becomes equal to the width of the product card and remains the same with further reduction.
In other words, as soon as the product’s card size becomes 275 pixels or less, the border disappears.

In addition: when the mouse coverse the image, the next image from the product gallery is displayed. But, it looks a little blurry. For comparison, I downloaded this thumbnail from the server and compared. The image from the server is clearer. It seems that WC does not use the finished image 275×275, but converts some other. Or i don’t know why image from server is clearer then on frontend.

[David]

I am not seeing the border anymore and the IMG HTML width is now showing as 282px. Maybe try clearing the browser cache.

[ustar]

hi, David!

Yes, it works! Thank you very much!
The last – the border on the top of image.
It’s seeing not on the all products, but it is there.

Regards, Sergey.

[David]

That would probably be related to a different aspect ratio.
The link you originally provided no longer takes me to the site we were helping with.

[ustar]

Thanks, David!

Regards, Sergey.

[Author]

Posts