Why isn't my HTML class adding correctly to out-of-stock variants?

Store Design
, , , ,
1

I have store URL https://quieromac.com/products/iphone-6s-reacondicionado?variant=43142806044927

I want here a class the variants which are out of stock should have class out-of-stock in li tag.

{%- for value in option.values -%}
                                                <li {% if variant.available == false %}class="out-of-stock"{% endif %}>
                                                 
                                                    <input type="radio"
                                                           id="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}"
                                                           value="{{ value | escape }}"
                                                           name="options[{{ section.id }}-{{ option.name | escape }}]"
                                                           title="{{ value }}"
                                                           {% if option.selected_value == value %}checked{% endif %}
                                                           data-url="{{ product.url }}"
                                                           data-template="{{ section.id }}"
                                                        {% if show_images == false and is_color %}data-change=".data-change-to-option-{{ section.id }}-{{ forloop.parentloop.index0 }}"{% endif %}
                                                           form="{{ form_id }}"
                                                    >
                                                    <label for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" >
                                                        {% if option_int -%}
                                                            {% assign option_variant = product.variants | where: option_int, value | first -%}
                                                            <picture>
                                                                <img class="no-pl-px" data-src="{{ option_variant.image | image_url: width: image_width_small, height: image_height_small }}" alt="{{ value }}" width="30" height="23">
                                                            </picture>
                                                        {% elsif is_color %}
                                                            <i aria-hidden="true" class="icon-circle swatch-custom-color-{{ value | handleize }}" style="background-color: {{ value | split: ' ' | last }};"></i>
                                                        {% endif %}
                                                    
                                                    
                                                        <span class="{% if option.variant.first.inventory_quantity == 0 %} outstock {% endif %}">{{ value }} </span>
                                                    </label>
                                                    
                                                </li>
                                                {%- endfor -%}

Please help me here how can I add this.

2

Hey,

That will difficult to check with that code because cannot imagine the context in this case it’s also depend to your theme you are using.

So to handle still need to go to code file and check directly.

3

Send me Private message with your email so that I can add you as team member in partner account

4

Hi,

I sent the message to you. Please you can check it. Thanks!