“Add to cart” button alignment

  • Resolved laurynass

    (@laurynass)


    3 years, 7 months ago

    Dear WooCommerce pro,

    i want to align “add to cart” buttons in Product page. I’ve tried different CSS from this forum. But buttons are not perfect. It seems i need something different.
    CSS i’m using now:

    .woocommerce ul.products li.product h2 {
line-height: 2.5ex;
height: 8.ex; /* 2.5ex for each visible line */
overflow: hidden;
}

    -Products and categories are not in line.
    -Storefront Theme
    -Images adjusted and cropped
    -max 4 lines in product title

    Thanks
    Laurynass
    p.s. would be happy to share printscreen here, but don’t know how ta add attachment

Viewing 4 replies - 16 through 19 (of 19 total)
  • Thread Starter laurynass

    (@laurynass)

    Hi @wpniall

    change of product images would be a solution, if i could have product categories logo rectangular. Unfortunately it is not the same length and height. Is there other way to solve it? Perhaps CSS code which aligns image?

    Thanks
    Laurynas

    Hi @laurynass

    The best option is to resize those Category Thumbnails to the same dimensions and then reupload them to your site. You could use Image Editing Software (Photoshop, etc.) to resize them.

    That said, Custom CSS could be used to set a different width and height for those thumbnails; however, CSS will usually cause the images to get distorted since it is forcing the images to use the sizes you define.

    If you want to give Custom CSS a try, you can use the following:

    .tax-product_cat ul.products li.product.product-category img {
    width: auto;
    height: 80px;
    margin-bottom: 20px;
}

.tax-product_cat .site-main ul.products li.product {
    margin-bottom: 0px;
}

    Feel free to tweak the code. The width and height values are the main ones that can be adjusted.

    The outcome should then be something like this: https://d.pr/i/G9FEbp

    If that doesn’t look the way you want it, then I would recommend using the first option again (of reuploading the images which are already cropped to the same dimensions) ??

    • This reply was modified 3 years, 7 months ago by Joash. Reason: added an extra step on what needs to be changed
    Thread Starter laurynass

    (@laurynass)

    Thank you @joashrajin,

    I will try to find the way with changing images dimensions ??

    BR
    Laurynas

    Sounds good @laurynass

    Do let us know how it goes or if we can help further.

Viewing 4 replies - 16 through 19 (of 19 total)
  • The topic ‘“Add to cart” button alignment’ is closed to new replies.