CODEWITHSUNDEEP
csswordpresswoocommerceheightproduct
Jay
Jay

Reputation: 67

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?

Upvotes: 4

Views: 9417

Answers (2)

YourBrainEatsYou
YourBrainEatsYou

Reputation: 1049

You can use flexbox and then the magic margin-top: auto on the button. You can ignore the display: grid on the .items container. It's just for the columns.

.items{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
.item{
  display: flex;
  flex-direction: column;
}
.item button{
  margin-top: auto;
}
<div class="items">
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <button>Add</button>
  </div>
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consetetur  </p>
    <button>Add</button>
  </div>
  <div class="item">
    <p>Lorem ipsum dolor sit amet </p>
    <button>Add</button>
  </div>
</div>

More information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

LoicTheAztec
LoicTheAztec

Reputation: 253959

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).

Upvotes: 7

Related Questions