Product Title Display

Hey there, @mmk175! Thanks for contacting us. I’m happy to help you.

I’m glad you are happy with our support ??

Do you mind sharing where we shared this code with you so we can get a better context on this?

This code seems to add some space between the product title and the price/add to cart button, correct?
Was this your initial goal?

I tested the code on my site and it also added the space on the category pages. Do you mind sharing where else do you want it to work?

Looking forward to your reply.

Have a wonderful day!

Hi @carolm29

Yes I got the code form this support thread. It was very long so didn’t want to open it again and wreck anyone’s head.

https://www.ads-software.com/support/topic/image-fit-text-placement/

Regarding the initial goal, I wanted to make sure the add to cart buttons always line up. I have just added new thumbnails to all images 600 x 600 to solve my image problem (their sizes are all over the place) and this is the final thing to make them all uniform.

Ah yes. This will work on the shop page and the other “core” pages as I call them but I would like them to work on my own pages as well i.e.

the pages within this section https://desw2.sg-host.com/religious-gifts/

example-https://desw2.sg-host.com/angel-gifts/

here https://desw2.sg-host.com/categories/

example- https://desw2.sg-host.com/rosaries/

and here https://desw2.sg-host.com/saints/

example-https://desw2.sg-host.com/saint-anne-gifts/

Note: I just realised that since I migrated my site to different servers the links I had in the images within the links above do not work. So you might have to use the main menu which is the same thing.

Hey, @mmk175!

Thanks for clarifying ??

It should work by adding the following CSS code:

.wp-block-post-title a {
    min-height: 50px;
}

Having said that, this is a quite generic class, so using it might affect other parts of the website.
If this does affect more than it should, you might wanna add the code on each specific page. If that’s the case, please let us know so we can assist you further.

Please let us know if there’s anything else we can do to help or if you have any questions.

Have a wonderful day!

Hi @carolm29

Just so I am clear. The code you provided here

.wp-block-post-title a {
min-height: 50px;
}

Will fix my issue on all other pages mentioned above.

but I will need the code below

.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 50px; }

to fix what I call the “core pages” (shop/categories/etc), correct?

Edit: Other than what’s mentioned above, I do not notice anything else being changed.

• This reply was modified 4 months, 2 weeks ago by mmk175.

Thank you for reaching back, with further details on this.

I’ll go ahead with looping back to the following, for a moment:

Regarding the initial goal, I wanted to make sure the add to cart buttons always line up. I have just added new thumbnails to all images 600 x 600 to solve my image problem (their sizes are all over the place) and this is the final thing to make them all uniform.

From what I gather, the goal here is to have the buttons aligned. Correct?

There is a no-code approach to this, via blocks.

Moving forward, I’d recommend going ahead with utilizing the handpicked products block for the site’s custom pages.

Below, I am attaching a screenshot showcasing a few of its useful features, for reference.

Buttons can be aligned by flipping a switch, as showcased above, for example.

I trust that points you in the right direction, but if you have more questions, let us know.

We’re happy to help.

Hi @anastas10s

It’s a shame this feature does not appear within the “Products (Beta)” block.

I will have to keep this option on the back burner as it would require me to rebuild 82 pages which have a wide variety of products on each.

The code provided previously does solve my issue from what I can see. Do you know of any issue it could cause to recommend your alternative solution?

Thanks for providing the solution all the same.

Hey @mmk175 ??

It’s a shame this feature does not appear within the “Products (Beta)” block.

That’s a great feature request idea! Feel free to submit it via this screen.

I will have to keep this option on the back burner as it would require me to rebuild 82 pages which have a wide variety of products on each.

Best to plan for scale, when the numbers are that high (and growing, as I can imagine). There’s already a variety of WooCommerce blocks to explore, that are available with the core WooCommerce plugin, in case the chance to do so did not appear already, with further functionality added with every release.

The code provided previously does solve my issue from what I can see. Do you know of any issue it could cause to recommend your alternative solution?

Blocks continue to be in use when changing themes, while CSS snippets are theme-related.

Therefore, investing in learning as much as possible about the available blocks and their features pays off, both now and in the future of a WordPress site’s lifecycle.

Moreover, this is useful in cases where a site has a team, since not everyone will be comfortable finding their way around code.

I trust this provides clarity. We’re happy to help, so please feel free to reach out to us again if you have any other questions.

Hi @anastas10s

I submitted that feature. Thank you for that link.

I am always happy to learn. It’s great when I get help from supportive people. It’s a big downer when you sometimes get a reply like “hire a developer” with no other insight into the issue or if my request is too big.

I’m lucky to have more positive support experiences though which is great.

Thanks again. I will mark the thread as resolved.