Hide items from search results which cannot be hidden using the system settings

I’ve got two solutions for you.

One is, you could use my WFU filtering library. It lets you do advanced element filtering using an expression or function, and it’s quite easy to drop in. You’d write one function ( e.g. filterFunc() to decide whether an element displays or not, and then you’d add a custom attribute to the Search Results Item element of wfu-filter-func = filterFunc.

Here are the docs, and the CSS & JS urls you’d add in too.

But there’s an option 2 for you. I think the pattern of the elements you’re trying to hide is so consistent that you might be able to just hide them with a CSS selector like this;

<style>
#result:has(a#url[href^="/sku/"]) {
  display: none;
}
</style>

Try dropping this into an HTML embed somewhere on the page and see if it does the magic you need.


IMPORTANT, the <style> excerpt above was specific to OP’s page design. I think this is probably the most general solution for the CSS approach;

<style>
.search-result-items > div:has(a[href^="/sku/"]) {
  display: none;
}
</style>

This is untested, as I don’t currently have any client ecom sites published on Webflow.
Let me know if it works.

NOTE: Because of the red syntax highlighting above, you may be tempted to think that /sku/ is something you’re supposed to replace… avoid that temptation. It’s matching an important path part to find those rogue SKU results, so leave it exactly as above.

2 Likes