Add to cart buttons not aligning (10 posts)

  1. CaidynMiller
    Posted 2 years ago #

    Hey I'm running this website http://www.justused.com.au/ and as you can see if you go to the website, the add to cart buttons are not aligning, does anyone have any solid info on how to fix this issue?



  2. terrytsang
    Posted 2 years ago #

    @CaidynMiller, i would say edit CSS will be a quick fix.

    Try add below code to your theme CSS file, hope this will solve your problem.

    ul.products li.product h3 {height: 100px; line-height: 100px}

  3. CaidynMiller
    Posted 2 years ago #

    do i add this to my /style.css file? or woocommerce.css file

  4. CaidynMiller
    Posted 2 years ago #

    That code doesnt align it properly

  5. terrytsang
    Posted 2 years ago #

    you need to add that to wp-content/themes/superstore/style.css

  6. ScottFromPA
    Posted 2 years ago #

    Confirmed this overide aligns the buttons but it effect everything (title, price and more) within that

      It does not work.

  7. asterbird
    Posted 2 years ago #

    @CaidynMiller, did you get your site working? I can't see anything on the page you listed.

  8. AlexKr
    Posted 2 years ago #

    I've got the same problem over here and wasn't able to fix it with css.

    So i've gotten into content-product.php (in woocommerce/templates)

    and did the following to output the product title:

                 if(strlen(get_the_title()) < 17) { echo "<br>"; echo get_the_title(); }
                 else echo get_the_title();

    So this solves it a little bit by just adding a new line if the title is to short and thus putting all the add to cart buttons on same line.

    I know it breaks when the page gets bigger or smaller. Do you have any suggestions on how to improve this?

    Maybe i don't see a good way because this is my first encounter with php

  9. John Alexander
    Posted 2 years ago #

    terrytsang's solution works fine, tankh you. Change around the height to fit your theme if you think the height is too big or too small.

  10. bilalirfan
    Posted 1 year ago #

    .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
    padding: .5em 0;
    margin: 0;
    font-size: 1em!important;
    min-height: 44px;

    This will get it perfect.

    I didn't write this code though. Got it from support forum.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic