“Add to cart” button alignment

Hi @laurynass – rather than a screenshot, can you provide a link to where we can see the ‘Add to Cart’ buttons on your site?

Thanks!

Hi @jricketts4 thanks for trying to help me. My site is not launched yet, so most probably you will not see it: https://greenworksbaltic.com/product-category/vejapjoves-1686/?v=c562607189d7
Thanks
Laurynas

Hi there Laurynas,

Yep, as you mentioned, visiting the link just displays a “Coming Soon” page since the site is not live yet.

Taking a look at your CSS, I see that you have this line height: 8.ex;
That 8.ex would be an invalid value — changing it to height: 8ex; (without the period between the number and unit) works ok on my site though!

That said, it looks like you should be setting it to 2.5ex per visible line of the Product title. For example:

– 1 line of title: 2.5ex
– 2 lines of title: 5ex
– 3 lines of title 7.5ex

and so on.

Hi kellymetal,

Thanks, for taking care. You’re absolutely right. My CSS setup with line height was a bit wrong. Corrected, but does not solve the problem. It just corrects the product name display. And i have several types: from one line to four of them. Therefore product name field (area and total height) differs. I see different area height between the product name and “add to cart” button. When product has 4 lines naming, it is small one (e.g. 2ex) and when it has 2 lines it has a way bigger (e.g. 7ex) and in regard of this, “add to cart” buttons are not in line.

looks like i need different CSS.

Thanks
Laurynas

Hi @kellymetal,

here is the screenshot
https://snipboard.io/ehoQDq.jpg

Thnks
Laurynas

Hi Laurynas,

Looking at the code and testing it on my test site, you will need to add a min-height to the link tag that has the thumbnail like below but you’ll need to adjust the CSS as per your site:

a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    min-height: 400px !important;
}

Hi @tibetanitech,

Thank you so much! I’ve made corrections in product name line height already. Added you CSS. Buttons are OK now. But everything else – not ??
please find screenshot
https://snipboard.io/VxEpMe.jpg
– Would be great to have product thumbnail aligned in the center line
– area from product price to the product thumbnail differs, and way to high
– area from “add to cart” button to the product price differs, and way to high
Thanks a lot
BR
Laurynas

Hi there Laurynas,

With different size product images, along with varying product title lengths, if you want the “Add to Cart” buttons aligned in the row then the spacing will be different depending on the image/title (i.e. they can’t all have the same spacing if the amount of space required to line up the buttons is different).

In the Customizer under WooCommerce > Product Images, you could set the thumbnails to be cropped 1:1 so that they all at least line up with each other — then with the uniform image sizes, the product titles will line up underneath the images. From there, the spacing from the text to the buttons will depend on the length of the product title (# of lines):

Link to image: https://d.pr/i/l4Ebg0

Hi @kellymetal

Thanks for you effort. But it does not help. I’ve tried it in very first place.
link to screenshot
Br
Laurynas

https://snipboard.io/CwkpmU.jpg

Do you mean that doesn’t show when you change on WP Admin > Appearance > Customize?

If so, that’s expected as you also need to wait for the thumbnails to be regenerated. ??

You can also check with your hosting for purging the cache.

@felipea8c Thanks,
you are right, most probably thumbnail regenerations was running at that moment.

Add to cart buttons seems to be OK now. Thank you very much for help. Is there a chance to align subcategories as well?

Thanks
Laurynas

Hey @felipea8c,

That’s great to hear the Add To Cart button behaviour has been resolved.

Is there a chance to align subcategories as well?

Could you provide some more details and a screenshot of the subcategory details you’re trying to align for us so we are 100% sure of the element you’re referring to?

I read through the previous communication within the topic but I’m not 100% the exact element you’d like to align and where that is located on your site.

Thanks

Hi @felipea8c

Thanks for effort. Here you go:
https://snipboard.io/PSVYEi.jpg

BR
Laurynas

Hey @laurynass,

Thanks for sharing the screenshot!

I had a look at the VEJAPJOV?S page, and it looks like the main issue here is that the product images have different aspect ratios and sizes (the first three are rectangular and the fourth is square) that prevent them from displaying correctly.

Looking at the product images, I see they all have the same aspect ratio (square or 1:1), which means they display with the same height and length correctly.

As such, I recommend uploading the subcategory images with the same length and height (e.g., 200 pixels × 200 pixels) like you did with the product images. I think that should fix the alignment issue here.

Please let us know how that goes or if you need further help!