Align "Add to Cart" button WooCommerce

Hi Joel,

simple fix is to always display a maximum of 2 lines in the title whether there is 2 lines or not. This forces all content to be the same size and makes all fields align including the button. Heres my CSS:

/* Force 2 line title inclusve */
.woocommerce ul.products li.product h2 {
  line-height: 2.5ex;
  height: 5ex; /* 2.5ex for each visible line */
  overflow: hidden;
}

Hi Joel,

There is actually no easy way to do this.

A work around would be to increase the product title font size (Typography > WooCommerce) so they are all two rows.

Let me know if this works for you.

Hi David and Leo

David's code has fixed this issue! Thank you very much for your support :)

Joel

Nice code, David!

Thanks Tom, glad i could be of assistance. Idea came from a solution i used back in my days of printing......

We have just tested our latest version of "Woo Align Buttons" plugin on GP, and it seems to work fine.

It looks after the titles as well as the buttons.

https://wordpress.org/plugins/woo-align-buttons/

Hi there,

thanks for sharing - we have just made some major improvements to Woo in the upcoming GP Premium 1.8 that should alleviate some alignment issues. If you want to test it out you can download the Release Candidate from your Accounts > Downloads. Be good to hear how your plugin works on that version.

Just tested our plugin with version 1.8.0-rc.2 and it helps with the titles.

The Flex you are using seems to look after the buttons.

Plugin Activated Image

Plugin Deactivated Image

You are welcome to use some of our code if you wish.

Nice - thanks for sharing. I'll make sure Tom gets to see it :)

In 1.8.x it align the buttons perfectly in the shop archive.
It doesn't on the woocommerce products shortcode.

Is there a workaround for this?

Thanks in advance

Hi there,

Woo loves to change classes - give this a shot:

.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 {
    line-height: 2.5ex;
    height: 5ex; /* 2.5ex for each visible line */
    overflow: hidden;
}