How to make wocommerce shop products same heigt


I’m trying to display the products with the same height at the shop page. I want the product image aligned at the top and the add to cart buttons aligned at the bottom.

What I have right naw:

enter image description here

What I’ve tried so far:

  • Using javascript to set the <li> hight equal to it’s parent <ul> hight. The result is the following:
    enter image description here

The js code is the following:

 //Script to align the products in shop page
    $(document).ready(function() {
        var max = 0; 
        max = $("ul.products").height();
        $("ul.products li.product").height(max);


This works as desired, the only problem is that I can’t get the prices and buttons closer to the text.

  • Applying a fixed height to the li elements.
    This breaks the responsive.

It must be an easy solution for that! Any help will be highly appreciated.

, , , Nil Suria 2 years 2020-09-03T07:10:20-05:00 0 Answers 70 views 0

Leave an answer