Woocommerce Align Add to Cart Button

Are you stressed out looking for an answer to this issue?

Below is the answer which was written a few years ago.  But if you are having one of those days, first take a minute and either watch this super motivational video that I have personally listened to I think over 100 times:

Or Take a minute and watch this unbelievable, shocking, hysterical, amazing video:

https://www.facebook.com/LADbible/videos/2012083515760940/

The Problem:

Many of my customers have different length titles of their products. When Woocommerce displays all of the products on a category page, the Add to Cart button or the Select Options button appears under the title of the product, which makes the buttons appear on different lines and can look messy to the eye.  I have been asked to align the Add to Cart button so that they all appear on the same row.  I looked around and tried some snippets of code and I could not find one, so I came up with this and it worked nicely!

Put this line of css in your style.css sheet in your child theme (you DO have a child theme, don’t you??) save, and then refresh your site.  You can fool around with the bottom value and the min-height, depending on how large your font for your h3 titles are.

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {min-height: 500px !important; margin-bottom:10px; }
ul.products li.product a.button {position: absolute !important; bottom: 100px; }

If you want to change the size of your titles on your products, you can add this to your style.css and change the font size to whatever you’d like including em.

.products h3 {font-size: 24px; }