woocommerce offtopic - How to make wocommerce shop products same heigt

admin管理员组

文章数量:1324431

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:

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:

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.

EDIT: I'm looking for an update-proof solution, so overriding the default WooCommerce templates is not an option.

EDIT 2: I add the source code of the columns as asked in the comments.

   <div class="storefront-sorting">
<div class="woocommerce-notices-wrapper">
</div>
<div class="container">
</div>
<ul class="products columns-3">
    <li class="product type-product post-223 status-publish first instock product_cat-accessories has-post-thumbnail featured shipping-taxable purchasable product-type-simple">
        <a href="http://localhost/testsite/product/whitening-fills/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
            <img width="324" height="324" src="/ 300" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="/ 300 324w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-100x100.jpg 100w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-416x416.jpg 416w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-300x300.jpg 300w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-1024x1024.jpg 1024w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-150x150.jpg 150w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-768x768.jpg 768w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1.jpg 1500w" sizes="(max-width: 324px) 100vw, 324px">
            <h2 class="woocommerce-loop-product__title">Product 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, iste error exercitationem quis, consectetur aspernatur architecto rem libero sunt repellat, dolorem, enim molestiae itaque. Officiis fuga ex illum distinctio reiciendis!</p>
        </a>
        <p class="font-weight-bold">39 €</p>
        <a href="?add-to-cart=223" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="223" data-product_sku="" aria-label="Add “Elite Home Whitening Kit” to your cart" rel="nofollow">Add to cart</a>
    </li>
    <li class="product type-product post-64 status-publish instock product_cat-uncategorized has-post-thumbnail featured shipping-taxable purchasable product-type-simple">
        <a href="http://localhost/testsite/product/test-product/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
            <img width="324" height="324" src="/ 300" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="/ 300 324w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-100x100.jpg 100w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-416x416.jpg 416w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-300x300.jpg 300w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-1024x1024.jpg 1024w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-150x150.jpg 150w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-768x768.jpg 768w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1.jpg 1500w" sizes="(max-width: 324px) 100vw, 324px">
            <h2 class="woocommerce-loop-product__title">Product 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </a>
        <p class="font-weight-bold">40 €</p>
        <a href="?add-to-cart=64" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="64" data-product_sku="" aria-label="Add “Smartphone Kit” to your cart" rel="nofollow">Add to cart</a>
    </li>
    <li class="product type-product post-279 status-publish last instock product_cat-uncategorized has-post-thumbnail featured shipping-taxable purchasable product-type-simple">
        <a href="http://localhost/testsite/product/whitening-trays/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
            <img width="324" height="324" src="/ 300" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="/ 300 324w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-100x100.jpg 100w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-416x416.jpg 416w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-300x300.jpg 300w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-1024x1024.jpg 1024w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-150x150.jpg 150w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-768x768.jpg 768w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1.jpg 1500w" sizes="(max-width: 324px) 100vw, 324px">
            <h2 class="woocommerce-loop-product__title">Product 3</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga error asperiores aperiam ratione quasi cum laborum tenetur consequatur. Maxime quas at sint consequatur minima alias numquam earum facere repellendus modi.</p>
        </a>
        <p class="font-weight-bold">40 €</p>
        <a href="?add-to-cart=279" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="279" data-product_sku="" aria-label="Add “Whitening trays” to your cart" rel="nofollow">Add to cart</a>
    </li>
</ul>
<div class="storefront-sorting"></div>

本文标签： woocommerce offtopicHow to make wocommerce shop products same heigt