How can I automatically hide out of stock product variants?

Hey there,

we have a lot of variant products in our store. We would like to hide them after they sold out.

Currently it is only possible to hide them, if the costumer selects the filter “auf Lager” (in stock).

Is there a way to ensure that the filter in stock is always selected?

Would be really nice, if anyone can help us with that.

Kind regards

Nina

Hi @Nina8385 ,
Can you share with us your store URL and password (if any) so our team can check on that? We would love to provide you with a solution for your issues.

Hey @magenest , thank you so much for your respond! Of course, it is www.forschur.com

Hi @Nina8385

The app has the feature to hide out of stock variants when applying the filters without having a seperate filter for avaliability.

Hey @khalid_gh ,

thank you for your response. I just did that and removed the filter. Unfortunately the out of stock products are still visible.

Hi @Nina8385

I think the AI Search & Product Filter is able to show only available items in the filters. The “hide unavailable items when filter is selected” feature ensures that only available filter options are displayed. This eliminates the need for users to manually select the ‘In stock’ filter, streamlining the process and enhancing the UI/UX experience by simplifying user interactions.

You could try it on an published theme without impacting other themes in your store. I hope it could help.

Hey,

I found a workaround that worked perfectly for me, and I hope it does the same for you.

Basically, I’m updating the filter parameter to always include the availability filter (note: I’m using Dawn Theme ).

  1. Go to facets.js.
  2. Look for the function updateURLHash(searchParams).
  3. Replace it with the following:

static updateURLHash(searchParams) {
if(searchParams.includes(‘&filter.v.availability=1’) == false ){
history.pushState({ searchParams }, ‘’, ${window.location.pathname}${searchParams && '?'.concat(searchParams) .concat('&filter.v.availability=1') });
}else{
history.pushState({ searchParams }, ‘’, ${window.location.pathname}${searchParams && '?'.concat(searchParams) });
}
}

  • Also, look for the function renderPage(searchParams, event, updateURLHash = true).
  • Add the following code at the beginning:

if(searchParams.includes(‘&filter.v.availability=1’) == false ){
searchParams = searchParams.concat(‘&filter.v.availability=1’);
}

1 Like

Great logic pal. It does work. For people coming from now on this issue updateURLHash is changed to updateURL and this renderPage(searchParams, event, updateURLHash = true) changed to async applyFilters(searchParams, evt, updateUrl = true).

Again, thanks pal.

Wow, that is smart ! Do you think it would work in the Impulse theme ?

Well when it comes to these functionalities it will pretty much work on every theme because for features like this it’s Shopify related and it’s api’s and a general template is followed and not something which is theme related which might change from theme to theme.

So yeah you can try this out on impulse as well. But yes it could be that the functions are named differently, or your file name is named differently, etc.

Hello ! Do you think it could work on www.lothaire.fr ? With the Impulse theme ?

Hello
I am trying to get this to work with the Flora theme but I am unable
Any Advice

My issue is that I have 3 variances drop down
The first variance for example will only have some of the second variance availability to it. I have even removed these variances from the product.
But when the first one is selected it displays like this

Any advice on how to get it to not display the unavailable ones and only the two applicable ones based on the previous choice

Hope you had this solved by now but in case it isn’t then this will require some code editing in your theme code where the variants are displayed to check for availability and display or not display them