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,
.
