Aligning “Add to Cart” on same row

  • Hi Kharis, would you be able to help to solve this.
    On the front page of my website, the “Add to Cart” button are not aligning at the same line due to different product title length.

    I’ve tried another code on this support forum to solve the issue on Shop page, just the main page isn’t responding to that CSS code.

    Link to the page: Page

    Many thanks!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • @untitledasia I am sorry for the delay in response.

    Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard. 

    .wc-block-grid__products .wc-block-grid__product {
  position: relative;
  padding-bottom: 42px;
}

.wc-block-grid__product .loop-button-wrap {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 42px;
}

    Hope that helps.

    Regards,
    Kharis

    Thread Starter untitledasia

    (@untitledasia)

    @kharisblank thanks a lot it works perfectly. Only minor issue is the ‘Price’ of product didn’t get aligned on to same row.

    Screenshot: Sreenshot

    Are we able to align the ‘price’ too?

    Cheers!

    @untitledasia thank you for getting back.

    Try replacing the previous code with: 

    .wc-block-grid__products .wc-block-grid__product {
  position: relative;
  padding-bottom: 100px;
}

.wc-block-grid__product .loop-button-wrap {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.wc-block-grid__product .wc-block-grid__product-price {
  width: 100%;
  position: absolute;
  bottom: 35px;
  left: 0;  
}

    Regards,
    Kharis

    Thread Starter untitledasia

    (@untitledasia)

    @kharisblank Thanks it works well! but now on Mobile view the ‘price’ are gone and the ‘add to cart’ are eating up the product title.

    Screenshot: Screenshot

    Super sorry for the troubles.

    @untitledasia I am sorry for the delay in response.

    Try this CSS code to replace the previously suggested one: 

    ul.wc-block-grid__products, ul.products {
   position: relative;
   grid-auto-rows: 1fr;
   padding-bottom: 40px;
}
ul.wc-block-grid__products > .product-grid .loop-button-wrap, ul.products > .product-grid .loop-button-wrap {
   height: 40px;
}
ul.wc-block-grid__products > .product-grid .wp-block-button, ul.products > .product-grid .wp-block-button {
   position: absolute;
   top: 100%;
   margin-top: -30px;
   width: 100%;
}

    Hope that helps.

    Regards,
    Kharis

    Thread Starter untitledasia

    (@untitledasia)

    @kharisblank Thanks a lot. It fixed the mobile issue. Everything showing perfectly on mobile now.
    But on desktop view, it has come back to the ‘price’ issue where ‘price is not aligning on the same row as others.

    Screenshot: Screenshot

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Aligning “Add to Cart” on same row’ is closed to new replies.