New Sites Launched Every Month!
860-717-4107     ::     203-984-7444     ::     websites@techcarellc.com

Blog

Woocommerce Align Add to Cart Button

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!

You will go from this:

messy-add-to-cart

To this:

aligned-add-to-cart

 

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