Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1147816

    Hello,

    I’d like to show WooCommerce categories on my homepage. I’ve added a code snippet to show them but they’re showing in different sizes.
    Can I make them like product grids?
    Wrong
    Correct

    Thanks,

    • This topic was modified 4 years, 5 months ago by Friction. Reason: Private content added
    #1147961

    Hey Friction,

    Could you post a link to where we can see the elements in question please?

    Best regards,
    Rikard

    #1148481

    Hello,

    I’ve added links to private contents area.

    Thanks a lot

    #1148630

    Hi Friction,

    Images have to have the same sizes to look the same on the category grid.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1148689

    Hello Victoria,

    Thank you for your reply.
    Product images have different sizes but they’re looking same on the products grid. I think, there could be a way to do this for category images too.

    Thanks,

    #1149041

    Bump! Any news?

    #1149429

    I think we’re far from finding an answer. Very sad.

    #1150087

    Hi,

    Sorry for the delay. You can define the minimum height of the grid items, then set the image’s object-fit property to “cover”. Please use this css code.

    div .products .product a {
        min-height: 243px;
    }
    
    div .products .product a img {
        object-fit: cover;
    }

    Let us know how it goes.

    Best regards,
    Ismael

    #1150539

    Hello Ismael,

    I’ve tryed your suggestion but not worked for me.
    I’m using this CSS code for now:

    .product h2, h2.woocommerce-loop-product__title { text-align: center;}
    div .products .product a img{margin:0;display:block;width:auto;max-width: 100%;min-height:300px;
    	max-height:300px;
    object-fit: cover;}

    This is okay but I can’t align to center the images.

    #1151148

    Hi,

    Thank you for the update.

    The css code works when we directly apply it on the browser inspector. Did you toggle the Performance > File Compression settings after adding the code? You can also post the login details so that we can test the css code. Please post the WP login info in the private field.

    Best regards,
    Ismael

    #1151213

    Hello,

    Thank you for your quick reply.

    #1151760

    Hi,

    Thank you for the update.

    Where did you add the css code? The Quick CSS field is blank when we check. Please try to set the object-fit property from “cover” to “contain”. However, it would still be better if the images are of the same size.

    Best regards,
    Ismael

    #1151768

    Hello,

    I think the quick css field have some bugs. I’ve added my css code to wordpress css area. You can see the example images in the private content area.

    Thanks.

    • This reply was modified 4 years, 5 months ago by Friction.
    #1152016

    Hi,

    Thank you for the update.

    You should probably specify the max-height attribute as well to constrain the images to a certain height. And again, the best solution is to upload images with the same size.

    Best regards,
    Ismael

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