Product titles in AJAX search results form can’t be limited to 2 lines

Hi Woodmart team,

I’m experiencing an issue with the AJAX search form in the theme — both in the desktop dropdown search and the fullscreen mobile search overlay.

I want to limit the product titles in the search results form to a maximum of 2 lines, similar to how it works on the shop and category pages.

In the Theme Settings → Product Title Lines Limit, I’ve already set the limit to 2 lines, but it doesn’t have any effect on the AJAX search results form.

I also tried applying a manual CSS fix, but that didn’t work either.
Here’s the CSS I’m currently using:

body .wd-search-full-screen .wd-suggestion-content .wd-entity-title,
body .wd-search-full-screen-2 .wd-suggestion-content .wd-entity-title {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
line-height: 1.35em !important;
max-height: calc(1.35em * 2) !important;
}

This code works perfectly for the product titles on the shop archive pages (.woocommerce-loop-product__title),
but has no effect on the AJAX search product results — neither in the desktop dropdown nor in the fullscreen mobile view.

It seems that the markup inside .wd-suggestion-content .wd-entity-title might be dynamically rendered or styled in a way that prevents -webkit-line-clamp from taking effect.

I’ve also attached a screenshot showing the issue clearly.

Could you please check if there’s a CSS or JavaScript conflict within the theme that prevents text clamping from working in the AJAX search results?
If possible, could you also suggest a theme-safe solution (via CSS or filter hook) to ensure product titles in AJAX search results are properly limited to 2 lines?

Thank you in advance for your help!

Best regards,

Hello,

Try to add the following custom css code in Theme Settings > Custom CSS.

.wd-search-results-wrapper .wd-suggestion-content .wd-entities-title,
.wd-search-full-screen .wd-suggestion-content .wd-entities-title,
.wd-search-full-screen-2 .wd-suggestion-content .wd-entities-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4em !important;
}

Best Regards,

This works, thank you!

[Author]

Posts