- This topic has 13 replies, 3 voices, and was last updated 5 years, 3 months ago by Tom.
-
AuthorPosts
-
October 28, 2018 at 11:24 am #712543Angelo
I am having problems with images being very high. I looked at past support and tried the following first:
-disabled jetpack
-regenerated thumbnails
-set image max image size
– I am not using a child themIf I go to
appearance – customize – woocommerce – product imagesthe site (showing on the right) will now display the images correctly. But if viewed in live mode, the images are too tall and not cropped. This is for both the category page and product page
Sample category page:
https://www.sunward1.com/product-category/rocketry/plastic-nose-cones/October 28, 2018 at 11:31 am #712555LeoStaffCustomer SupportHi there,
It’s usually a caching issue when something works in customizer preview but not on live site.
Any caching plugins or server cache?
Also the panel you are referring to (customize β woocommerce) is actually from WooCommerce itself and not GP.
GP’s WooCommerce panel is under customize – layout – woocommerce.
October 28, 2018 at 11:42 am #712560AngeloThere is no caching plugins or server cache. I did a hard refresh on the page.
For
customize β layout β woocommercethere is no area to configure the size of the images.
October 28, 2018 at 12:00 pm #712568LeoStaffCustomer SupportThat case I’m not sure why it’s not working.
I would try disabling all plugins first to eliminate any conflicts. If that doesn’t help then you will need to check with WooCommerce’ support as it’s their feature.
I can only tell you that I’m not seeing any code to resize the image:
https://www.screencast.com/t/A24Pe6PThyAnd yup I know there is no option to resize WooCommerce image using GP (no point adding something WooCommerce already did). Just letting you know that the resize feature is from WooCommerce so you might need to check with them.
Hope this helps!
October 28, 2018 at 12:11 pm #712574AngeloI will check with woocommerce
October 28, 2018 at 12:24 pm #712582LeoStaffCustomer SupportSounds good π
January 8, 2019 at 9:43 pm #776824AngeloI checked with woocommerce and they blame the theme.
I tried the following code:
.single-product .images img {
max-height: 600px;
}as additional CSS. This caused the image to have a max height of 600, but it did not adjust the width, so tall images are skewed.
January 9, 2019 at 8:33 am #777387TomLead DeveloperLead DeveloperHmm, not sure why they would say that. It’s happening because the WooCommerce resizer isn’t initiating.
However, we can cause the cropping to happen with some CSS.
Try this:
.woocommerce ul.products li.product a img { height: 300px; width: 300px; object-fit: cover; object-position: top; }
January 9, 2019 at 9:06 am #777425Angelono effect.
I did refresh the page.
January 9, 2019 at 10:36 am #777507TomLead DeveloperLead DeveloperHow’d you add the code? I’m not seeing it on the page.
January 9, 2019 at 11:01 am #777524Angelook, I added it.
appearance – customize – additional CSSI entered 600 px and it changed the thumbnail at:
https://www.sunward1.com/product-category/rocketry/nylon-ripstop-streamer/The thumbnail was not the problem. I want to change the size of the product image on the product page itself
https://www.sunward1.com/product/nylon-ripstop-streamer/I have changed it back to 300 for the values.
January 9, 2019 at 6:17 pm #777832TomLead DeveloperLead DeveloperIn that case, something like this might work:
.woocommerce div.product div.images img { height: 500px; object-fit: cover; object-position: top; }
January 9, 2019 at 6:33 pm #777840AngeloI tried the above solution and it worked on the main image. However, secondary images were also very high.
I then added the “a” to the line and it fixed that problem. Some of the thumbnails were too high so I also added the first code.
There is still a problem on very high or very small images ( bottom gets cropped and it doesn’t scroll properly) but looks much better.
final code I added at:
appearance β customize β additional CSSis:
.woocommerce div.product div.images a img {
height: 600px;
object-fit: cover;
object-position: top;
}
.woocommerce ul.products li.product a img {
height: 300px;
width: 300px;
object-fit: cover;
object-position: top;
}January 10, 2019 at 9:04 am #778462TomLead DeveloperLead DeveloperI believe that’s the best solution unless WooCommerce or your hosting support is able to figure out why their image resizing isn’t working. It’s usually a server related issue that would prevent it from firing.
-
AuthorPosts
- You must be logged in to reply to this topic.