[Resolved] Align Add to cart button at bottom

[Alexandre]

Hi,

I’am working with WC and some WC plugins. Add to cart buttons are misaligned mainly due to longer titles. I did try some css hacks unsuccessfully, but there must be a way to stick every button to bottom no matter the length of the title ??

Please have a peak at https://drive.google.com/file/d/1OS7rgzCywK5WW8TfK-iFM1B_5d1Yc848/view?usp=sharing

Thanks for any help here.

[David]

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;
}

[Alexandre]

Thanks a lot David,

That did the work perfectly

[David]

You’re welcome.

[Alexandre]

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.

[David]

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.

[Alexandre]

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

[David]

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.

[Author]

Posts