Product Images Blurry on Shop and Category Pages

The only way i’ve been able to get the images to appear unblurred, is to set the thumbnail to 600px. but that also sets the cart image to 600px, which is way too big. I tried doubling the image size to 1200px, but it still shows up blurry in the main shop and category pages.

How can i fix this? I’d jsut set it back to 600 px thumbnail if there was a way to set it to 300px for the cart separately via coding or whatever.

Please advise.

Hey Jesse,

I understand the issue.

Let’s deal with the Category display first. 300px is small because your Theme Options > Site Max Width is 1200. You have 3 Column Product Display so 1200 divided by 3 is 400. You can deduct the column spacing further from that value though it would be quite technical.

If you’re technically inclined, you can inspect the exact size of the column in the desktop using the browsers element inspector. The exact size is 368px.

Use 400 or 368px image size instead of 600px.

Now regarding the cart, that, I think is an issue with our theme. I believe there should be a limit as larger sizes would break the cart layout. I’ll post this in our issue tracker so that this will be queued for improvement.

For now, I’ll provide an override code to limit the width on the cart page. Please just note that providing custom code is not a part of our product support. We will not support any issues this will cause nor provide any enhancements. Add the following code in Theme Options > CSS. Please remove the code if a theme update is available. If the update doesn’t solve the issue, you can put this back in.

.woocommerce-cart-form img {
	max-width: 200px;
}

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.