- This topic has 17 replies, 3 voices, and was last updated 4 months ago by
.
-
Posts
-
Hi,
Our product gallery thumbnail images are very blurry or showing low res. Anyway to fix this?
Hi Jay,
Thank you for reaching out to us!
It’s best if we take a quick look at this. Could you create a new website user for us please? If possible with administrator capabilities so we can make a quick check of your settings. You can post the user name and password in your next reply and mark it as private to keep this between us.
Also, are we free to deactivate plugins for our tests? In this case, I invite you to make a backup before we investigate your website further in order to make sure you don’t loose any data if something goes wrong.
Thank you.
This reply has been marked as private.
Hi there,
Thanks for getting in touch!
We provide support only during Belgian business hours (Monday to Friday, from 8:30 am – 5:30 pm CEST), and our current response time can be up to 1 business day. We’ve received your request and we’ll get you an answer ASAP.
We really thank you for your patience!
In the meantime, feel free to check out our documentation resources for more help: https://doc.themosaurus.com/
Kind regards,
Hi Jay,
Thank you for granting us access.
To solve this, you need to increase the size of the Woocommerce Gallery Thumbnail Size. In order to achieve that, you can use this plugin : Simple image Sizes plugin.
- Install and activate Simple image Sizes plugin plugin. Please note that I already installed it on your site.
- Go to Dashboard > Settings > Media and increase the size of the woocommerce_gallery_thumbnail size, for example, to 200 x 200. Then, save Changes at the bottom of the page.
- Once this is saved, please click on “Regenerate Thumbnails” on the bottom of this page.
Let me know if you need more explanations.
Best,
Saving it keeps reverting the setting to 100 x 100 and if I regenerate it first with the new size it says that “this file already exists in this size and have not been regenerated”.
Please see attached screenshots.
Hi Jay,
It seems indeed something was preventing Simple image Size to upgrade the size. 🤔
So, we used this snippet to force Woocommerce to use another thumbnail size :
/*Change Woocommerce Thumbnail Image Size*/ add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) { return 'thumbnail'; } );Thanks to this snippet, it will now use the
Thumbnail size. Can you confirm all is fine on your side ?Best,
Great, thank you. I can indeed confirm that that has fixed it. The thumbnail images are not blurry anymore.
Glad to read that Jay! 🙂
If you have further questions or requests, feel free to create other forum topics.
Cheers,
So it looks like updating the thumbnail image also affected the cart image. Anyway to get this to return to normal size?
Hi Jay,
To fix this, simply add the following code snippet to your website:
/** * FIX : Adapt Image Size in Mini Cart */ .woocommerce-cart-form__cart-item.cart_item{ display:grid; grid-template-columns:25% 1fr; grid-gap:1rem; } .woocommerce-cart-form__cart-item.cart_item > .product-thumbnail{ grid-row:1/4; } .woocommerce-cart-form__cart-item.cart_item > .product-thumbnail img{ border-radius: var(--grimlock-archive-post-border-radius); overflow:hidden; } .woocommerce-cart-form__cart-item.cart_item .variation *{ text-align:left !important; } .woocommerce-cart-form__cart-item.cart_item dl, .woocommerce-cart-form__cart-item.cart_item .variation dd p{ margin-bottom:0px !important; }To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
Pasting your code snippet there should do the trick for you.Also, it’s important to remember that we share snippet only to solve issues with our theme. Any further request for CSS snippets will have to be part of a defect that needs to be fixed urgently. No snippets will be shared otherwise.
If you want to go further with the customization of your website, we advise that you require customization work.
Regards,
Ok, added the code snippet and it did fix the image size but the cart and checkout buttons still aren’t displaying correctly and should be side by side instead of stacked like in the attached screenshot.
Glad to read that Jay.
I’m afraid this issue is related to Elementor. We cannot reproduce this on a fresh installation without Elementor framework. As I told you, we are not compatible with Elementor. To solve this, I’m afraid you’ll need some customization work.
Best,
Ok so elementor is affecting other parts of the theme. Interesting.
Can I revert all the changes made with the image sizes? I’d rather go back to the thumbnail images being blurry and get that fixed later.
Of course, you can set the
woocommerce_gallery_thumbnailsize back to 100px and remove the snippet we added in Dashboard > Snippets.Best,
It’s already set to 100px and all image size related snippets have been removed. It says that the file already exist in that size when I try to regenerate.
Indeed, as this was a format was set before. And you can see the images are now blurry, as they were, on the specific article.
Best,
ok, but the image on the mini cart is still big with the buttons not displaying correctly. I’ve already disabled all the image size related snippets. This happened after the snippets and image size plugin were added.
Strange, because the changes we made shouldn’t have interfere with that. There’s no reason that this issue should appear after the changes you made. 🤔
When I inspect the code, all leads me to Elementor. I’m afraid I cannot help you more with that. 🙁
Cheers,
Hi there,
This topic has been inactive for a while now so we will be closing it to keep the forum tidy. Don't hesitate to create a new topic if you still need help and we'll be glad to help you!
Best regards,
The Themosaurus team.
The topic ‘Blurry/low res product gallery thumbnail images’ is closed to new replies.
