Search code examples
csswordpresswoocommerceheightproduct

Align "add to cart" buttons in a straight line in WooCommerce shop page

Please guide me to bring all the "add to basket buttons" in straight line. Currently they are not in proportion.

If anyone can help me with a quick code?

screen shot of shop the page

How to align "add to cart" buttons in a straight line in WooCommerce shop page?

Solution

  • The products names (or titles) are embedded in a tag this way: 

    <h2 class="woocommerce-loop-product__title">Product title</h2>

    So you need to define a min-height css rule for that class choosing the biggest height of your product names. So if the biggest product name height is 96 pixels, you will set your rule this way (for example):

    .woocommerce-loop-product__title {
    min-height: 100px;
    /* OR
    min-height: 100px !important; */
}

    You should add this css rule to the style.css file of your active child theme (or active theme).