Archived topic
Product category images - SVG Crop
3 replies · Started by Ramon on April 7, 2020
Hi,
Is there any way to crop the product category images if they are SVG? I would like to crop the images into the product category loop. Right now if I set png or jpeg images, the displayed images are cropped but if I use svg, are not cropped.
If is not possible or hard to do it...
Is there any way to set custom images on product categories loop? (not using featured images)
I would like to use a different image on the product category loop and the featured image on that category. Right now i'm displaying the featured image on both places.
Thanks in advance.
Ramon
Hi there,
I believe you'd need to set specific size for SVG file similar to what's suggested here:
https://docs.generatepress.com/article/adding-svg-logo/#setting-the-size
https://css-tricks.com/using-svg/
Is there any way to set custom images on product categories loop? (not using featured images)
I'm not sure if that's possible unfortunately - probably require a significant amount of custom coding.
You might need to check with WooCommerce support to see if they are able to point you in the right direction.
Hi Leo,
Hope you are doing well. Setting the size of the image is not enought. Right now i'm using the following code, but is not working on IE11:
.woocommerce ul.products li.product a img {
display:inline-flex;
width: 14em;
height: 12em;
margin: 0 0 1em;
object-fit: cover;
}
@media (max-width: 768px){
.woocommerce ul.products li.product a img {
display:inline-flex;
width:35vw;
height: 35vw;
margin: 0 0 1em;
object-fit: cover;
}
}
Hi there,
IE11 doesn't support the object-fit property:
https://caniuse.com/#search=object-fit
Not anything we can do about that - there are some Javascript Polyfills for it on the web
