Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 14, 2019 at 12:43 pm #1147816
    Friction

    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 5 years, 2 months ago by Friction. Reason: Private content added
    October 15, 2019 at 6:20 am #1147961
    Rikard

    Hey Friction,

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

    Best regards,
    Rikard

    October 16, 2019 at 3:28 pm #1148481
    Friction

    Hello,

    I’ve added links to private contents area.

    Thanks a lot

    October 16, 2019 at 8:16 pm #1148630
    Victoria

    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

    October 16, 2019 at 9:40 pm #1148689
    Friction

    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,

    October 17, 2019 at 9:31 pm #1149041
    Friction

    Bump! Any news?

    October 18, 2019 at 10:53 pm #1149429
    Friction

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

    October 22, 2019 at 9:38 am #1150087
    Ismael

    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

    October 23, 2019 at 3:47 pm #1150539
    Friction

    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.

    October 25, 2019 at 10:48 am #1151148
    Ismael

    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

    October 25, 2019 at 2:43 pm #1151213
    Friction

    Hello,

    Thank you for your quick reply.

    October 28, 2019 at 2:34 pm #1151760
    Ismael

    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

    October 28, 2019 at 2:57 pm #1151768
    Friction

    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 5 years, 1 month ago by Friction.
    October 29, 2019 at 11:16 am #1152016
    Ismael

    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

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