Make all Products in Product Collection Equal Height

  • Resolved nullkohol

    (@nullkohol)


    2 months, 2 weeks ago

    Hi there,

    I use your new Product Collection Block and I see that my products in the grid have the same width but unequal height. Is there any way to make them appear with the same height? It looks rather wild and not as cleanly ordered as I would prefer it.
    What also adds to this “wild” look is that the product pictures are not scaled into the same height, but their container seems to be scaled and thus only part of the image is shown. I would expect the full image to shrink in size so it matches the rest.

    The problem appears in two cases:
    Case 1: Product titles are different in length, then they fill one or two or three lines and thus everything below gives room and moves down. So for example the “add to cart” buttons are not aligned and this look stupid.
    Case 2: I inject a short product description using the ‘woocommerce_after_shop_loop_item_title’ hook. Same behaviour as above, when these are of different length, the rest moves.

    I would expect that case 2 is more difficult to solve in rendering than case 1 (because the injection might not be known when the engine computes the needed space?).

    Is there any way to standardize height and align components like the buttons?

    Thanks for your help

Viewing 1 replies (of 1 total)
  • Plugin Support ckadenge (woo-hc)

    (@ckadenge)

    Hi ,

    Thank you for reaching out.

    ?I would expect the full image to shrink in size so it matches the rest.

    I understand your concern about the appearance of your product grid, particularly with the unequal heights of the product images and the alignment of the “Add to Cart” buttons.

    The WooCommerce Product Block uses a CSS-based approach to ensure images fit within the grid. It’s possible that the images are of different aspect ratios, causing some to be cropped. You can try using images with the same aspect ratio for a more uniform appearance.

    So for example the “add to cart” buttons are not aligned and this look stupid.

    For the alignment of the “Add to Cart” buttons and other elements, this can indeed be affected by variable lengths of the product titles and descriptions. One solution is to limit the length of these elements so they occupy a consistent number of lines.

    I inject a short product description using the ‘woocommerce_after_shop_loop_item_title’ hook. Same behaviour as above, when these are of different length, the rest moves.

    As for injecting a short product description using the ‘woocommerce_after_shop_loop_item_title’ hook, you’re correct that varying lengths can cause alignment issues. Implementing a character limit on these descriptions could help maintain a consistent look.

    Is there any way to standardize height and align components like the buttons?

    For a more specific solution, you may need to delve into custom CSS. This can be a bit complex if you’re not familiar with it, but it allows for greater control over the appearance of your product grid. Are you able to test if all this happens with a default theme like Twenty Twenty-Four?

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.