Woocommerce image help

Support
#1

Having an issue with how X uses woocommerce - My image uploads are around 1000px or so. I have my thumbnail and main image sizes setup, and generally everything looks good… except on the main storefront page, where we only have two products. Those images are a good size right now, but they’re very blurry. When I use the inspector, I find that woo commerce is using the thumbnails for those images, but X is sizing the thumbs back up to a larger size, as far as I can tell.

If I make the thumbnail settings large enough for the store page, then they’re huge on the shopping cart, so it’s very hard to navigate around the cart. I like having 200px images in the cart items list, and about 600px for the storefront page.

Here’s the main shop page - the large image size works here, but they’re very blurry - I assume because X is using the thumbnails here, even though the actual images are large:

1

Here’s an individual item page - looks fine and the images are clean and not blurry:

2

And the cart looks fine using thumbnails, they’re clean and sharp and a good size for the cart:

3

So basically, how can I keep all these image sizes the same, but have clean, non blurry images on the storefront page, but still be around 600px or so as they are now? Is there a way to make X use the full-size images here vs. thumbnails? it really looks bad on desktop, but looks good on mobile, so I don’t want to screw up the mobile image sizing.

#2

Hello @mcphoto,

Thanks for writing in!

In X > Theme Options > Layout and Design > Site Max Width, you have set up 1288 pixels. And in your shop page, you have selected to display two columns to display the product items. This means that you have roughly 644 pixels for each column widths. Now, the problem is that you have uploaded a product image which is only 600 pixels wide. And this is why your image is a little bit blurry because your product image were stretched out.

To get this issue resolve, please remove your current product images and upload a bigger dimensions. Use at least 650x650 pixel images so that your image will not be stretched out.

Hope this makes sense.

#3

That’s not helping - I’ve switched to 1100px images, but the theme is using 250px thumbnails and upscaling them.

thumbs
thumbs896×58 18.2 KB

#4

Hi @mcphoto,

The X and Pro themes do not have specific controls over the WooCommerce image quality and sizing process, please see the following documentation.

WooCommerce Image Size Changes

Hope it helps,
Cheers!

#5

So basically I 'm stuck with “thumbnails” on the main storefront page? - if I make theumbails 600px, they’re huge in the cart/etc.

#6

Hello @mcphoto,

You can add some CSS codes for that.

Please try:

.cart_item .product-thumbnail img {
   max-width: 80px;
}

Hope this helps.

#7

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