Product category images – SVG Crop

[Ramon]

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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ramon]

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;
}
}

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts