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

[Roadhat (RT)]

In some instances, Search results display items that lead to a blank page because there is no template that can be accessed and styled. One such item is a product that has /sku/ in the url.
The url would look like this: your-comain.com/sku/product-name.
Using Javascript these search result items could be hidden from the page.

I have given the search results item an ID=“result” and the link block ID=“url”. Not sure if this was needed but in case it is, thia is what it is. Now I would need a script that will scan the search results list item “url” for “sku” and if TRUE then apply to the “result” a style display “none”.
I hope this makes sense.

Can someone please help?

By the way, this is a common problem with search results on Webflow that uses products. I have found others asking for help but no solution has been provided yet.

Thank you!

---

Here is my site Read-Only:
https://viva-osijek.webflow.io/search?query=viva

[choreus (Julian)]

Hi @Roadhat, have you watched this video from Webflow already? Specifically from 0:21 onward.

First look: Site search

Also, could you please share your read-only link? You have pasted the link to your published site.

[Roadhat (RT)]

Hi @choreus.

Thank you for your reply. I have modified my post to make it more clear.

Yes, I have watched this video and read the entire page several times. I have already set all the exclusions, pages and specific items, that were possible to exclude. However, this is Not possible to manage within the existing settings.

My read only link

This is a specific issue I discovered while testing search. These /sku/ items only appear when I search for “viva” or “saloni”, both of which are a part of the title tag of most pages since it is the name of the website.

Please note that the URL fragment after the domain name indicates the page on which the item is located. /product/ or /category/. This means that there should be a page with the name /sku/ but there isn’t. At least it is not visible to us. Yet it lists the products which then appear in the search results. Strange.

[Roadhat (RT)]

I just thought of a different approach. I will not see the result until the site is re indexed tomorrow. However, this is the idea, but I think this only effects external search engines and the items will continue to show on the page search:

[Roadhat (RT)]

Just confirming that SEO setting did not resolve the issue on the page search. So Javascript approach is still the only solution I see possible.

I appreciate any help I can get. Thank you!

[memetican (Michael Wells)]

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.

Advanced Element Filtering

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.

[Roadhat (RT)]

Hi @memetican.

Thank you very much for the effort. I tried the second one because I fully understood it, and it worked perfectly. The first method I will study a bit when I have more time because it is valuable to know.

Thank you again!

I will share this in the post that asked the same question but has never received an answer.

[damse (Kasper Dam)]

I tried adding this, but it doesn’t seem to do the trick for me, sadly.

I added the following and added “hide-from-search” in SKU for all products I wish to hide from search.

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

Any feedback is greatly appreciated. Our use case is fairly simple, as we have a range of products that we want to exclude fully from search.

[memetican (Michael Wells)]

Hey Kasper, you need to use the exact CSS I gave, don’t change the /sku/ part.
I’ve updated notes above for clarity.

[damse (Kasper Dam)]

Thanks for the clarification, Memetican. Highly appreciated. I was sadly still unsuccessful in making it work with your clarified edit.

I tried your untested general CSS excerpt and pasted it into an HTML embed on the search page.

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

The /sku/ part does not apply to my use case, so I marked all the slugs with /addon- instead of all the products that I wish to hide.

Read only link: https://preview.webflow.com/preview/launchr?utm_medium=preview_link&utm_source=designer&utm_content=launchr&preview=c08ae6f05938902820a0d983b3c5c9db&pageId=63158ae4258fbbd193fe6f73&workflow=preview

[memetican (Michael Wells)]

It looks like you’re trying to do something quite different from the original rogue-SKU bug we were solving. I’m a bit curious why you’re wanting to exclude arbitrary ( but otherwise legit ) matches from your search results.

But, the same CSS approach should work for you, and so would the dynamic filter.

Here though, your URLs start differently;

They begin with /product/addon- so you need that in your CSS match, i.e. href^="/product/addon-".

I’m using CSS’s starts-with ( ^= ) attribute selector, for precision, so if you’re using that you need to match from the beginning of the URL. There are alternative selectors too.

[damse (Kasper Dam)]

Thanks again for assisting. Webflow support led me here, stating this was the go-to thread for people facing issues due to Webflows limitation of not being able to exclude specific CMS items from search results.

On our store, we have two types of products,

1. Regular products, that our clients can buy.
2. Add on based products, which are a bit more secondary to our regular products.

Now, this creates an issue on our search engine, as it’s a bit out of context for our users and makes little sense to find the add-on-based products without their associated product parents.

I wasn’t able to make the CSS method work, but i succeeded on hiding them with the following JavaScript:

<script>
jQuery(document).ready(function() {
    jQuery('.search-result-items a[href^="/product/addon-"]').each(function() {
        jQuery(this).parent().hide()
    });
})
</script>

Thank you so much for your help, and very much appreciated!

[memetican (Michael Wells)]

Thank Kasper that makes sense. Incidentally, the CSS approach should work for you, and would have the bonus that those items will never be visible. with the jquery approach they’ll appear briefly until the script runs at the end of the page load.

If that annoys you, try this;

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

Looking at your HTML, I realized there was a second ID reference ( a#url ) from OP’s situation that I’d neglected to remove from the CSS selector.

In English that would read…

Find any DIVs which have;

1. an immediate parent with the class search-result-items, and
2. contain an A link where the href begins with /product/addon-.

…and hide them.