Mikey Arce

Align WooCommerce Add to Cart Buttons in Storefront

—

by

mikey
in ,

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:

  1. 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?
  2. 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.
  3. 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:

Screen Shot 2016-07-11 at 8.20.43 AM

After:

Screen Shot 2016-07-11 at 8.20.52 AM

Want more Storefront or WooCommerce tips? Leave a comment below with a suggestion!

Comments

10 responses to “Align WooCommerce Add to Cart Buttons in Storefront”

  1. Claye Avatar
    Claye

    Thank you, I’ve searched low and high for this and finally found code that works!

    Reply
  2. tolik_ex Avatar
    tolik_ex

    Mikey, you are the GOD! It`s the best way ever!

    Reply
  3. Anjali Avatar
    Anjali

    This works like a charm. Thank you

    Reply
  4. Meliory.gr Avatar
    Meliory.gr

    Hi Mickey,

    Works perfectly, but in some cases there is a lot of empty space.
    Another solution I have in mind (but I can’t implement it) is to limit the product descriptions to 2 lines and have “…” in the end, if the description is longer. In that case, it would be ideal if the description would appear full on hover, “pushing” the rest of the info down while hovering.

    Any suggestions?

    Thanks in advance!

    Reply
  5. Daniel Summers Avatar
    Daniel Summers

    Fantastic mate. Lifesaver!!

    Reply
  6. Sebastian Avatar
    Sebastian

    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

    Reply
    1. mikey Avatar
      mikey

      Thanks Sebastian! Great idea and could work great for many folks.

      Reply
  7. adsformsentry Avatar
    adsformsentry

    Thank you so much. I can quit pulling my hair out now!

    Reply
  8. Srikanth Kamath Avatar
    Srikanth Kamath

    +1, thanks, even after purchasing the StoreFront Customiser, I was lost.. will buy you a beer anytime.. Once again tanks

    Reply
  9. Jinal Avatar
    Jinal

    You are awesome. This is all that I needed to fix the alignment issue.

    Reply

Leave a Reply to Srikanth KamathCancel reply