Hide out of stock sizes from "Search & Discovery" filtering

[Iceman3]

Hi Everbody!

         I need help with hiding out-of-stock sizes (size variant) from the filtering in the "Search & Discovery" Shopify APP.

I'm now using 6 filters: Availability, Product type, Brand, Price, Size and color.

If I enable "In stock" products from the "availability" filter, then "Size" automatically shows out-of-stock sizes in grey. I would like out-of-stock sizes straightly not to appear on the size filter.

¿Any clue?

Thanks in advance! ^^

[mrjoemorgan]

Did you ever figure this out? I am trying to do the same. Its seems to go against common sense logic to include products that are out of stock. 

[Iceman3]

I did! For version 7 of DAWN working stable. ¿Still need help with it?

[Makeitperfect]

@Iceman3 

Hey, 

I would appreciate if you share your solution here, as I am also looking to hide the Out of Stock options all around for the filters - There is no need for this option to be available 

Thank you 

[Iceman3]

Hi @Makeitperfect ! Sorry for late reply. I did it. 

Modify this code on MAIN-PRODUCT.liquid:

MODIFICATIONS MADE TO MAIN-PRODUCT.LIQ TO REMOVE NON-STOCK "SIZE" VARIANTS FROM THE SELECTOR

VARIANT RADIOS (REPLACED ENTIRELY BY THE FOLLOWING CODE)
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                  {%- for option in product.options_with_values -%}
                      <fieldset class="js product-form__input">
                        <legend class="form__label">{{ option.name }}</legend>
                        {%- for value in option.values -%}
                        
                        {%- comment -%}
                        Custom code for hiding unavailable variants only for 1 option
                        {%- endcomment -%}
                        {%- if product.options.size == 1 and block.settings.hide_unavailable_variants -%}
                            {%- for variant in product.variants -%} 
                            {%- if value == variant.title and variant.available -%}
                            <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                                   name="{{ option.name }}"
                                   value="{{ value | escape }}"
                                   form="{{ product_form_id }}"
                                   {% if option.selected_value == value %}checked{% endif %}
                                   >
                            <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                              {{ value }}
                            </label>
                            {%- endif -%}
                            {%- endfor -%}
                          {%- else -%}
                          <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                                 name="{{ option.name }}"
                                 value="{{ value | escape }}"
                                 form="{{ product_form_id }}"
                                 {% if option.selected_value == value %}checked{% endif %}
                                 >
                          <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                            {{ value }}
                          </label>
                          {%- endif -%}
                        {%- endfor -%}
                      </fieldset>
                    {%- comment -%}
                        END part 1 - Custom code for hiding unavailable variants only for 1 option
                    {%- endcomment -%}

                  {%- endfor -%}
                  <script type="application/json">
                    {{ product.variants | json }}
                  </script>
                </variant-radios>

VARIANT CLASS (REPLACED IN ITS ENTIRETY BY THE FOLLOWING CODE) 
<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                  {%- for option in product.options_with_values -%}
                    <div class="product-form__input product-form__input--dropdown">
                      <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                        {{ option.name }}
                      </label>
                      <div class="select">
                        <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                          class="select__select"
                          name="options[{{ option.name | escape }}]"
                          form="{{ product_form_id }}"
                        >
                          {%- for value in option.values -%}
                            {%- comment -%}
                            Custom code for hiding unavailable variants only for 1 option
                            {%- endcomment -%}
                            {%- if product.options.size == 1 and block.settings.hide_unavailable_variants -%}
                              {%- for variant in product.variants -%} 
                                {%- if value == variant.title and variant.available -%}
                                  <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                                    {{ value }}
                                  </option>
                                {%- endif -%}
                              {%- endfor -%}
                            {%- else -%}
                              <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                                {{ value }}
                              </option>
                            {%- endif -%}
                          {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                      </div>
                    </div>
                  {%- endfor -%}

                  <script type="application/json">
                    {{ product.variants | json }}
                  </script>
                </variant-selects>

ADDED AFTER THE CODE //"TYPE": VARIANT_PICKER// THE FOLLOWING CODE:
{
"type": "checkbox",
"id": "hide_unavailable_variants",
"default": false,
"label": "Hide Unavailable Variants"
}

Hope it helps! If it does, please accept as a solution.

Regards!

[Makeitperfect]

Hi,

Thank you for your reply! 

I've generated a javascript code with chatgpt that is tackling the issue for me right now. So far it works great :] 

Wont have the time to test your code for now unless this js stops doing its work :D. however if someone does use it please let us know guys and mark it as a solution. Also just updated to v14 and went through tone of code switching and honestly no code for me for the next few weeks lol. 

[snapexyz]

Hi Makeitperfect, 

I'm also struggling with this issue, would you be kind enough to share your javascript solution for this by any chance?

thank you 🙂

[Makeitperfect]

Hi there,

Here is the code my friend

// <!-- HIDES THE OUT OF STOCK TICK BOX IN FILTERS -->

document.addEventListener('DOMContentLoaded', function() {
const hideOutofStock = () => {
document.querySelectorAll('.mobile-facets__list .mobile-facets__item .facet-checkbox__text')
.forEach(el => {
if (el.textContent.includes('Out of stock')) {
el.closest('.mobile-facets__item').style.display = 'none';
}
});
};

const setupObserver = () => {
const targetNode = document.querySelector('.mobile-facets__wrapper'); // Ensure this targets the correct element
if (targetNode) {
new MutationObserver(() => hideOutofStock())
.observe(targetNode, { childList: true, subtree: true });
}
};

hideOutofStock();
setupObserver();
});


You may need to tweak the classes/selectors but just give it a go.

This for me hides the out of stock products from the filters and pretty much anywhere else I think.

I havent seen them show since.

Hope it helps 

[snapexyz]

Thank you. This gives me a great starting point.

[Makeitperfect]

// <!-- HIDING THE OUT OF STOCK LINE FROM THE FILTER / FACETS PAGE -->

// Get all elements with the class 'facet-checkbox__text'
var facetTextElements = document.querySelectorAll('.facet-checkbox__text');

// Loop through each element
facetTextElements.forEach(function(element) {
// Check if the element's text content contains 'Out of stock'
if (element.textContent.trim().includes('Out of stock')) {
// Hide the parent element of the element with the class 'mobile-facets__label'
element.closest('.mobile-facets__label').style.display = 'none';
}
});

// <!-- HIDES THE OUT OF STOCK TICK BOX IN FILTERS -->

document.addEventListener('DOMContentLoaded', function() {
const hideOutofStock = () => {
document.querySelectorAll('.mobile-facets__list .mobile-facets__item .facet-checkbox__text')
.forEach(el => {
if (el.textContent.includes('Out of stock')) {
el.closest('.mobile-facets__item').style.display = 'none';
}
});
};

const setupObserver = () => {
const targetNode = document.querySelector('.mobile-facets__wrapper'); // Ensure this targets the correct element
if (targetNode) {
new MutationObserver(() => hideOutofStock())
.observe(targetNode, { childList: true, subtree: true });
}
};

hideOutofStock();
setupObserver();
});



There was more to the code, I missed the 1st part. So try to work with this one instead.

Cheers