Product view Alignment on Woocommerce

2 Views

I have a bookshop site in WordPress, as per the image below. The alignment of the Add Cart button is not the same for the two products. Note that this is the shop page.

enter image description here

Read More

How can I align the Add to Cart Button to be the same for every product regardless of the product image size and product title length?

I’m using:

  • WordPress 4.3.1
  • WooCommerce 2.4.11
  • THEME – > VantageVersion: 1.4.4 By SiteOrigin
Post Views: 2

Related posts

2 comments

  1. First, your question is very, very vague. It’s hard to troubleshoot with far more information. However, I will try and get the conversation started.

    1. What list is this? Home page? Category page?
    2. Essentially, you’ve got to “normalize” the space that the title takes up. Notice that in the second product, the title of the product is two lines, where the first product is only a single line. Will any of your products have three lines? Four lines? Five? That is essentially the issue.
    3. Further, depending on your theme, this could be completely different markup / code.

    With ALL of that being said, the issue can be resolve simply with the right css. For a “typical” WooCommerce site, this would take care of it:

    In your stylesheet, declare this style on this selector:

    ul.products li.product h3 {
    min-height: 50px; /* NOTE: This amount will have to change depending on how many lines you want to support.  Allow about 20-25px per line */
}

  2. I Added this code under the theme’s style.css

    .archive #main ul li a h3 {
  min-height: 70px;
}

    Solved my problem.

Comments are closed.