I get this request a lot – you have a lot of products but the “Add to Cart” buttons don’t line up together. You probably have some product titles that span 2 lines, others than span 1. Some of your images are taller than others, or maybe some are on Sale and others aren’t. That’s ok! Here’s what you need to do:
- Measure how big you want ALL your product heights to be. Do you want all your products to have a height of 200 pixels or 500 pixels?
- Make sure you have the right image settings under WooCommerce > Settings > Products > Display. From there you can actually set an image size that will be uniform for your whole store.
- Use Custom CSS to set a specific height for your products:
I typically use Jetpack’s Custom CSS module to add CSS to your site but you can do it whichever way you want.
Before:
After:
Want more Storefront or WooCommerce tips? Leave a comment below with a suggestion!
8 replies on “Align WooCommerce Add to Cart Buttons in Storefront”
Mikey, you are the GOD! It`s the best way ever!
This works like a charm. Thank you
Fantastic mate. Lifesaver!!
I would like to add a jQuery based solution. Might come in handy in case your product list items vary in height significantly:
https://gist.github.com/SebastianHonert/50916eed5eed1658792cefb2431f3383
Thanks Sebastian! Great idea and could work great for many folks.
Thank you so much. I can quit pulling my hair out now!
+1, thanks, even after purchasing the StoreFront Customiser, I was lost.. will buy you a beer anytime.. Once again tanks
You are awesome. This is all that I needed to fix the alignment issue.