[Support request] Product category images – SVG Crop

Home Forums Support Product category images – SVG Crop

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1229785
    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

    #1230268
    Leo
    Staff
    Customer Support

    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.

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

    #1231052
    David
    Staff
    Customer Support

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.