Aligning Add to Cart Buttons Woocommerce

  • Unknown's avatar
    contact60633dbe1a · Member ·

    Hello! I am having an issue with my site where the “Add to Cart” buttons do not vertically align if there are products with longer titles. I am using the Astra theme. Is there any way I can have the buttons align, perhaps by always displaying only a certain number of text lines and using ellipses at the end of longer titles? Thank you so much!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    collinskiprono · Member ·

    Hi,

    Is there any way I can have the buttons align, perhaps by always displaying only a certain number of text lines and using ellipses at the end of longer titles?

    Yes, you can use additional CSS code to show text with an ellipsis if it exceeds a specific number of lines. This can be achieved using the -webkit-line-clamp property.

    Here’s sample code:

    .product-title-text {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden; 
-webkit-line-clamp: 2; /* Limits text to 2 lines */
text-overflow: ellipsis; 
}

    On the sample code above, you only need to update the CSS class, i.e. .product-title-text. The screenshot isn’t clear, so I couldn’t see the CSS class to use.

    To add your CSS code, go to Appearance > Customize > Additional CSS.

    You can get more details and options here: https://wordpress.com/support/editing-css/

  • Unknown's avatar
    contact60633dbe1a · Member ·

    Thank you so much for your help! I tried using the CSS code that you provided, but it’s not working. The text that I’ve bolded below is colored red in the editor. Perhaps my theme is incompatible?

    .has-text-align-center wp-block-post-title has-medium-font-size {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2; /* Limits text to 2 lines */
    text-overflow: ellipsis;
    }

    Also, here is a text version of the sample code for the product title: 

    <h3 style="margin-bottom:0.75rem;margin-top:0;" class="has-text-align-center wp-block-post-title has-medium-font-size"><a data-wc-on--click="woocommerce/product-collection::actions.viewProduct" href="https://rosemarysgardenflorals.wpcomstaging.com/product/deluxe-handpicked-bridal-bouquet-in-love-in-lavender/" target="_self">Deluxe Handpicked Bridal Bouquet in Love in Lavender</a></h3>
  • Unknown's avatar
    collinskiprono · Member ·

    Hi @contact60633dbe1a

    Thank you for sharing the sample code for the product title.

    Please try this CSS code instead:

    /** Product title to only show two lines **/
li.product h3.wp-block-post-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; 
  line-height: 1.5; 
  max-height: calc(1.5em * 2);
}

    The text that I’ve bolded below is colored red in the editor. Perhaps my theme is incompatible?

    I think it’s just a warning from the theme’s code editor. Typically, it happens because these properties are considered outdated or non-standard by modern CSS standards. However, they are still required for achieving multi-line ellipsis in many browsers.

    Please ignore it for now.

  • Unknown's avatar
    contact60633dbe1a · Member ·

    @collinskiprono Thank you so much, this worked! It oddly isn’t showing the ellipsis, but it is limiting the product titles to only two lines so all the “Add to Cart” buttons are aligned. Thank you!

  • Unknown's avatar
    contact60633dbe1a · Member ·

    Resolved

  • The topic ‘Aligning Add to Cart Buttons Woocommerce’ is closed to new replies.