Ask SkyVerge

Today’s question comes from Nelson:

Is there a way to align the “Add to Cart” or “Select Options” buttons on the shop pages? When the product names are different lengths, or some products have reviews and some don’t, the buttons are misaligned. This would make it look much more professional. Thanks!


Unfortunately, this will depend heavily on your theme. However, it may be possible with a bit of CSS to change the way these buttons are displayed. By default, buttons will appear like this:

WooCommerce add to cart buttons

Before

WooCommerce Align Add to Cart Buttons

Here’s how you would align these buttons if you’re using default WooCommerce styles. You could adjust the heights here as needed, and add this CSS to your child stylesheet (described here).

Now, buttons will be aligned at the bottom of the row:

woocommerce add to cart buttons aligned

After

If your theme uses different class names or ids, then this may not work for you. You could try to find the classes or ids by using the Chrome “Inspect Element” tool as seen in this video (which has an awesome soundtrack 😉 – reminiscent of George Michael).

You can target CSS classes by adding a period (.) before the name, and target ids by using a hash (#) before the name. You need to target the product list styles with the second part of this snippet, and the button styles with the third part.


Here’s a community post with a bit more detail that might be helpful.

Published by Beka Rice

Beka leads product direction for SkyVerge, focusing on new features for our plugins and Jilt. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

16 Comments

  1. Some screenshots would really help to emphasize the problem you’re fixing here.

  2. Thank you for this solution, Beka! This is nice!
    I’ll have to try this soon. I’ve limited the height of each included section as pointed out early in the forum discussion in the past, but you solution is elegant.

  3. Hello Beka,

    These tutorials are great. I tried implementing on MyStile theme but didn’t work. Am I able to simply add this code to the theme’s custom CSS?

    Thanks,
    Jeff

  4. […] Vertikale Ausrichtung der “In den Warenkorb” Knöpfe auf der Shop-Übersichtsseite/Produktarchiv per CSS in “Design” > “CSS bearbeiten” (Custom CSS für derzeit aktives Theme). Der CSS Code kommt von skyverge.com […]

  5. I’m unable to align the Add to Cart buttons too. Has anyone come up with a solution. I need help. Website page example is http://purplevape.com/e-liquid/

  6. Where should i put that css code? Because i have that css classes in other .css document. Should i copy and paste that code there?

  7. Super it works like a charm. I just pasted it at the bottom of CSS file. Some products with longer text got mixed up but I changed “min-height: 295px” to “min-height: 350px” and voila!

    • Thnxs for the information.
      Lay out of my products is now much better.
      But how can i align the price and product name, because not all of my images are the same size ?
      Anybody any ideas ?

  8. Thank you for this tutorials.. really help me 🙂

  9. Thank you this did the trick I was looking for!

  10. Thank you so much for this!
    You don’t know how long I have searched for this.

  11. Where is this?

    a.button.add_to_cart_button,
    a.button.product_type_simple {
    bottom: 30px;
    position: absolute;
    }

  12. I use the following CSS to prevent long product titles pushing the add to cart button down and causing misalignment.

    /* Limit product titles on product listing page */
    .woocommerce ul.products li.product h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

  13. beka or anyone

    This scrip works for me except when the phone is turned sideways or on tablet view.
    Then the bottons move over my text and product images. The only way I have been able to get around this is to have the “add to cart” button 520px down which is long ways away from text and product image.

    anyone have any code for If phone is sideways or tablet mode then do this many px down?

Hmm, looks like this article is over 2 years old! Its content may be outdated, so comments are now closed.