Align Add to cart button at bottom

Hi there

try this CSS:

ul.products li.product {
    display: flex;
    flex-direction: column;
}
 
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    margin-bottom: auto;
}

Thanks a lot David,

That did the work perfectly

You're welcome.

Hi Dave,

I would need some tips again on the same issue. I'm not a CSS guru :((

Is it possible, in the same spot, to have the price and the rating to be bottom aligned as well ?

And the snippet you provided does not seem to apply to related products : https://dev.canardgoulu.com/produit/canette-entiere/ at the bottom of the page.

Thanks again for your support.

So this should fix the related and upsell products:

@media (min-width: 768px) {
    .woocommerce .related ul.products, .woocommerce .up-sells ul.products {
        display: flex;
    }
}

And this forces the title to a min height of 3 lines:

.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 {
    line-height: 2.5ex;
    height: 7.5ex;
    overflow: hidden;
}

You can reduce the height to 5ex to make it 2 lines.

Thanks again,

I have added your second snippet and it seems to correct everything. So i'm not sure what the first one would correct in this situation ??

Thanks for your excellent support

In this case the first CSS rule sort of becomes redundant as the 2nd rule is fixing what was causing the misalignment. So not really necessary. But keep it just in case you add the short description to a site which could vary in size.

Glad to be of help.