I’m setting up a Woocommerce store and all the product images are blurry.
I suspect it’s the issue described in this article: docs.woocommerce.com/document/fixing-blurry-product-images
“Your image dimensions should match or be higher than those of your theme.”
The original image sizes are definitely large enough.
I tried to implement the solution from the article above, but I’m having trouble fixing the problem in the new in Appearance > Customise > WooCommerce > Product Images.
I've tried everything I could find, but nothing seems to be working.
We use Verdure - Organic Tea Shop Theme and WooCommerce version 5.1.0.
The images look completely fine on mobile.
Any advice would be greatly appreciated.
Maybe Appearance > Customize > WooCommerce > Product Images is not the place you need to look, your theme probably overrides this. Instead of looking for image size settings in Appearance > Customize, try looking if your theme has a custom Appearance settings panel. It seems like it does!
Related
I'm struggling with my wordpress page, with woocommerce. The featured image should be showing as the first image on the product page, but isn't. I've read a few other threads, like this one:
Product Images don't show (Woocommerce)
where they have some solutions, but the CSS they are proposing isn't working.
My page is here: www.byjgk.com , and for example, if you check out a product category page, like: https://www.byjgk.com/product-category/dresses/ , and then select a dress (e.g.: https://www.byjgk.com/product/the-jersey-maxi-dress-petite-in-sandstone/), you should then see the same featured which was on the category page also appear as the first image on the product page as WELL/(in addition to the other 3 images that are there).
Normally, that's how the image feature works, so there must be some opacity/other problem.
I also did try changing the woocommerce.css file, (which was also a suggestion in the link above, to put this there:
.product.has-default-attributes.has-children > .images{opacity :1;}
but i didn't see any class called exactly that with the word "children".
I also tried to put the "jquery" that was suggested:
$('.woocommerce-product-gallery--with-images').css('opacity', 1);
into the functions.php section, but it said this query had some sort of error, or it didn't like the "$" maybe...
Soooo, I'm at a loss. please help. I see a few people have asked about this on some other forums, but many don't figure it out.
thanks!
Okay, after some trial and error it seems like one of my own plugins was causing this conflict. If anyone is using this plugin, be aware of the potential - i haven't yet played with the settings on this pluging to see if that's changable.
https://wordpress.org/plugins/gallery-slider-for-woocommerce/
I would suggest you to update the theme, plugins and wordpress as well because something is not working properly for you, if the problem continues, start deactivating the plugins to understand what is causing this problem.
I have posted a new blog. After that in my list of blogs I see the feature images of few posts have changed their dimension to 1 * 1 px. Attached is the snapshot of inspect, the first image which is the latest one has good feature image, but next post does have feature image but just the dimensions are 1*1 px. If you check my website, you will notice there are subsequent posts which have same dimension issue, few of them are good !!
I checked the media where dimensions are good and I have not changed them. I double checked and feature images for blog post is enabled. I uninstalled the jetpack which was one of the suggestion I got from WordPress forum while looking for similar issue.
Astra theme and editor plugin Elementor.
Is there something I am missing ?
Check out website where you will see the issue. Let me know if you need more information.
https://www.patelaalap.com (I have fixed my website now, I don't have the solution, I just removed the feature images and re-added those and it worked. It is a temporary fix but still, I would appreciate any help so I can fix this once in for all.
I have been trying to resize the thumbnails in lightbox but can't figure it out.
My current thumbnails are cropped and are about 50x30 px.
I need them to be square like 50x50.
I looked online for an hour but can't seem to find anything that works.
Below is a screenshot of the problem:
https://i.stack.imgur.com/yltym.jpg
Thanks for any help
You can change the sizes of WooCommerce thumbnails by going to the WordPress admin and navigating to WooCommerce > Settings > Products > Display. Then, adjust the sizes of WooCommerce Thumbnails. You'll also need to regenerate the thumbnails using a plugin, like Regenerate Thumbnails.
There's more information at the WooCommerce Docs.
Additionally, if those settings don't do it for you, you can drop in a function to adjust the WooCommerce thumbnails further. See this StackOverflow answer.
I hope this community can help. I see there is a lot of information on Woocommerce blurry product images and I've tried the fixes to no avail. We recently migrated our site and although all the products in our shop are fine, each time we try to upload and create a new product, the main product image is blurry.
Here's two examples. (1) Good product listing
And (2) here's the test with problems
Using Onetone wordpress theme and have the current installs of Wordpress and Woocommerce. Changing the thumbnail size and regenerating did not solve the problem. Neither did changing the image size from 100% declaration to 'auto' in Woocommerce.
The problem seems to be wordpress is using a much smaller thumbnail (we did not change any sizes after migration) and this is causing the blur because the images are being blown up. Here's the code I found for the image:
The image 'source' for this in particular is:
src="http://liquescencemedia.com/wordpress/wp-content/uploads/2016/08/Liquescence-Time-Travel-Mens-Ash-Grey-1-275x275.jpg
And as you can see, somehow this size is being used for the product image although we've uploaded a much larger size (1000x1000).
On the image details attachment page everything is fine, the resolution is high.
So I'm quite frustrated with this. Why is it calling a 275x275 from uploads when I've uploaded an image 1000x1000? How can I change this?
Any help is appreciated. Do know that I've already been through the Woocommerce literature and it doesn't address this problem.
I'm making a WordPress website with WooCommerce and I need to resize the product thumbnails in the display products (category) page.
In particular I have this situation:
And I'd like to have a page like this:
Is it possible? I've checked that the CSS class should be img.attachment-shop_catalog.wp-post-image and I've tried with -webkit-transform:scale(1.2); but my product image thumbnails overlap. It's not a problem of WooCommerce images settings (the "force hard crop" option is disabled), so I think I have to add a custom CSS. Could you help me to fix this?
Thanks in advance!
I would have checked all surrounding classes cause it is probably limited by them, or there is padding-right set on outer container.
I would have tried to find (using Chrome possibilities) and try first to locally resize them and product container in CSS.