Here are the settings i use on the website for the woocommerce images.
If you visit the website homepage, you will notice that the images with the 3 rows are being cropped but everywhere else they are normal. (right below in the special offers section they are okay, with the same size)
If you inspect an image and open in new tab, you will notice they are actually cropped. Those rows are created with siteorigin plugin and the widget is the product tyche widget of the theme tyche.
What could be the solution of this issue? Why the images are being cropped at those 3 rows? (Gaming, accessories, merchandise)
It might be the issue for different sizes of the 3 images. Try to do all the images equal size then add the pictures again. Hopefully, it will work.
Okay it was a theme issue and not Woocommerce.
Thanks to Simple Image Sizes plugin, I managed to fix the issue simply by disabling cropping on all of the theme images and resizing those image to the proper size so they get the perfect quality!
Related
I'm using the Divi theme to build a website in WordPress. The problem I'm facing is this:
wrong image
I'm using the gallery module to display a set of pictures in grid mode. But all the images loaded are shown as above. Id like to display the original image instead of the medium one.
original image
WordPress creates some versions of my images but the aspect ratio is different, so this crop effect is applied on my gallery items.
I have tried to set the correct size on medium images from media settings and generated the images again but nothing changed.
Divi theme uses its own functions to generate thumbnails that hard crop original images by default.
Try editing post_thubnails_divi.php file on theme folder using the dimensions that suit you and set the crop value to false.
$crop = apply_filters( 'et_post_thumbnails_crop', false );
hi you can download the Gallery layout and install it in your DIVI theme. it give some layout options for gallery design.
https://www.elegantthemes.com/blog/divi-resources/free-divi-photo-gallery-layout-pack-5-stunning-gallery-page-layouts-in-one-convenient-download
Note : subscribe it and they will send the downloadable link to your email
thanks
I tried many tricks, googled many websites, used many wordpress plugins but failed & fedup. I am running a coupons/ deals website, my problem is i want to display the product image completely without any crop even if it is small in size.
The original image is https://postimg.org/image/ue5aamx8t/
but cropped image showing in my website is http://couponfun.in/product/kanvas-katha-tote-%E2%82%B983/
please help.
Just do this thing,
The category images are the same size as shop_image (or Catalog) thumbnail. WooCommerce handles its product thumbnails in its settings:
WooCommerce->Settings>Products>Display
You can change its height, width, and toggle the hard crop on/off.
Note : After changing the image sizes you will need to regenerate thumbnails. (Link in same page you can see.)
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 have an up to date install of wordpress and woocommerce using a pretty simple, customized theme.
I recently noticed that woocommerce is not calling thumbnail images for catalog pages, the cart, anywhere.. i hadn't noticed earlier because everything looks OK. For example: the cart displays 32x32px thumbnails, but is merely re-sizing the original image (1000x10000px) down to 32x32 instead of calling a smaller file such as the 150x150px thumbnails. it seems to be doing this anywhere a smaller image is used and my main catalog page is almost 40mb which is ridiculous- it should only weigh 1.5 or 2mb...
if you're feeling frisky, the 40mb catalog page is at superfly5000.com/collections/ (NSFW!!!)
Both woocommerce and wordpress image settings are set to 150x150 and 300x300. WC single product images and WP large size images are set to 0x0 so it will call the original image.
I have regenerated thumbnails and am about to convert all my PNG's to JPG's to save some weight but I really don't want to lose transparencies..
Any ideas??
You have to enable the hard-crop option for thumbnails, more info.
resolved: cool thanks,Vikas, the hard crop wasn't the issue but the snippet at the bottom of the page (https://docs.woothemes.com/document/adding-product-images-and-galleries/#section-4)- manually calling image sizes from the functions.php and regenerating thumbnails apparently did the trick. for some reason WC wasn't using it's own image sizes settings- i don't know why.
The problem I'm having is with WooCommerce plugin in Wordpress. I am adding products along with their images but the problem is that the images I'm provided are of varying sizes. Some of the images are vertically oriented and as a result, the image gets cropped off so that only the top ~30% of the image is showing while the rest is cropped off.
I need to upload hundreds of product images so I'd want to find a way to efficiently resize everything properly so that images aren't cropped incorrectly. Do I just need to resize the images myself before uploading to WooCommerce or is there a way to get this to work properly?
It is ultimately up to you how you want to handle your images - it's going to be specific to your site. That said WooThemes has some documentation on using appropriate product image dimensions. You might want to try unchecking "Hard crop" on the product thumbnails - this will result in your thumbnails not having the same dimensions but it will not crop part of the image. If this doesn't work, you probably need to pre-edit the images.