[Resolved] Align "Add to Cart" button WooCommerce

Home Forums Support Align "Add to Cart" button WooCommerce

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #348681
    Joel

    Hi Tom!
    I would like to align add to cart button on my WooCommerce. There’s a lot of CSS codes that it fixes on others themes, but I’ve tried on GeneratePress and they don’t work.
    biolieve.net

    My WooCommerce is: https://biolieve.net

    GeneratePress 1.3.48
    #348816
    David
    Staff
    Customer Support

    Hi Joel,

    simple fix is to always display a maximum of 2 lines in the title whether there is 2 lines or not. This forces all content to be the same size and makes all fields align including the button. Heres my CSS:

    /* Force 2 line title inclusve */
    .woocommerce ul.products li.product h2 {
      line-height: 2.5ex;
      height: 5ex; /* 2.5ex for each visible line */
      overflow: hidden;
    }
    #348818
    Leo
    Staff
    Customer Support

    Hi Joel,

    There is actually no easy way to do this.

    A work around would be to increase the product title font size (Typography > WooCommerce) so they are all two rows.

    Let me know if this works for you.

    #348882
    Joel

    Hi David and Leo

    David’s code has fixed this issue! Thank you very much for your support 🙂

    Joel

    #348893
    Tom
    Lead Developer
    Lead Developer
    #348933
    David
    Staff
    Customer Support

    Thanks Tom, glad i could be of assistance. Idea came from a solution i used back in my days of printing……

    #873374
    aquafortis

    We have just tested our latest version of “Woo Align Buttons” plugin on GP, and it seems to work fine.

    It looks after the titles as well as the buttons.

    https://wordpress.org/plugins/woo-align-buttons/

    #873377
    David
    Staff
    Customer Support

    Hi there,

    thanks for sharing – we have just made some major improvements to Woo in the upcoming GP Premium 1.8 that should alleviate some alignment issues. If you want to test it out you can download the Release Candidate from your Accounts > Downloads. Be good to hear how your plugin works on that version.

    #873535
    aquafortis

    Just tested our plugin with version 1.8.0-rc.2 and it helps with the titles.

    The Flex you are using seems to look after the buttons.

    Plugin Activated Image
    Plugin Activated

    Plugin Deactivated Image
    Plugin Deactivated

    You are welcome to use some of our code if you wish.

    #873539
    David
    Staff
    Customer Support

    Nice – thanks for sharing. I’ll make sure Tom gets to see it 🙂

    #1060182
    Roberto Enrique

    In 1.8.x it align the buttons perfectly in the shop archive.
    It doesn’t on the woocommerce products shortcode.

    Button alignment

    Is there a workaround for this?

    Thanks in advance

    #1060372
    David
    Staff
    Customer Support

    Hi there,

    Woo loves to change classes – give this a shot:

    .woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 {
        line-height: 2.5ex;
        height: 5ex; /* 2.5ex for each visible line */
        overflow: hidden;
    }
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.