Ecommerce Shopify WordPress Discussion

enable product options to be selectable when out of stock in shopify theme

my theme's product options are not selectable when out of stock, and therefore a app i am using cannot select them either. shopify screenshot this is the source code if someone can help me with a fix. {% assign SizeChart_dt = product.metafields.custom.tabladetalla %} {%- if external == blank and group_product == blank -%} <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}"> <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}" > {% capture "form_classes" %} js-addtocart-form product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %} {%- endcapture %} {% form 'product', product, class: form_classes, data-product-form: '' %} {% unless product.has_only_default_variant %} {%- for option in product.options_with_values -%} {%- assign type = 'label' -%} {%- if filter_name_1 != blank and filter_name_1 == option.name -%} {%- assign type = select_filter_1 -%} {% elsif filter_name_2 != blank and filter_name_2 == option.name %} {%- assign type = select_filter_2 -%} {% elsif filter_name_3 != blank and filter_name_3 == option.name %} {%- assign type = select_filter_3 -%} {% endif %} <div class="variants-wrapper product-form__item wpb-variants-swatch"> {% assign current = product.selected_or_first_available_variant %} {%- if forloop.index == 1 -%} {% assign current_option = current.option1 %} {% elsif forloop.index == 2 %} {% assign current_option = current.option2 %} {% else %} {% assign current_option = current.option3 %} {% endif %} <label class="variants__label"> {{- option.name | escape }}: <span>{{ current_option }}</span></label > <div class="js-product-select-option--{{ forloop.index }} variants__options"> {%- if block.settings.product_selector == 'radio' -%} {%- assign option_index = forloop.index -%} {%- for value in option.values -%} {%- assign option_disabled = true -%} {%- assign variant_alt = 'false' -%} {%- for variant in product.variants -%} {%- if variant.available -%} {%- if option_index == 1 and variant.option1 == value -%} {%- assign option_disabled = false -%} {%- break -%} {%- elsif option_index == 2 and variant.option2 == value and variant.option1 == current_variant.option1 -%} {%- assign option_disabled = false -%} {%- break -%} {%- elsif option_index == 3 and variant.option3 == value and variant.option2 == current_variant.option2 and variant.option1 == current_variant.option1 -%} {%- assign option_disabled = false -%} {%- break -%} {%- endif -%} {%- endif -%} {%- endfor -%} {%- for media in product.media -%} {%- if media.alt contains 'Color-' -%} {%- assign variant_img_arr = media.alt | split: '-' -%} {%- if variant_img_arr[1] == value -%} {%- assign variant_alt = 'true' -%} {%- break -%} {%- endif -%} {%- endif -%} {%- endfor -%} <div class="single-option-selector" data-single-option-button> <input type="radio" {% if option.selected_value == value %} checked="checked" {% endif %} {% if option_disabled %} disabled="disabled" {% endif %} value="{{ value | escape }}" data-index="option{{ option_index }}" name="option{{ option.position }}" class="js-single-option-selector{% if option_disabled %} disabled{% endif %}" id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}" > {%- if variant_alt == 'true' and type == 'color' -%} {%- for media in product.media -%} {%- if media.alt contains 'Color-' -%} {%- assign media_alt = media.alt | split: '-' -%} {%- if media_alt[1] == value -%} {%- assign variant_img = media.preview_image | img_url: '100x' -%} <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}" data-{{ type }}="{{ value }}" title="{{ value | strip | escape }}" style="background:url('{{ variant_img }}');background-size: cover;background-position: center;" class="{% if option_disabled %}disabled{% endif %}" > {{ value | escape }} {%- if type != 'label' -%} <span class="tool-tip">{{ value | escape }}</span> {%- endif -%} </label> {%- endif -%} {%- endif -%} {%- endfor -%} {%- else -%} <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}" data-{{ type }}="{{ value }}" title="{{ value | strip | escape }}" class="{{ value | escape }} {% if option_disabled %}disabled{% endif %}" > {{ value | escape }} {%- if type != 'label' -%} <span class="tool-tip">{{ value | escape }}</span> {%- endif -%} </label> {%- endif -%} </div> {%- endfor -%} {%- elsif block.settings.product_selector == 'checkbox' -%} {%- assign option_index = forloop.index -%} {%- for value in option.values -%} {%- assign option_disabled = true -%} {%- for variant in product.variants -%} {%- if variant.available -%} {%- if option_index == 1 and variant.option1 == value -%} {%- assign option_disabled = false -%} {%- break -%} {%- elsif option_index == 2 and variant.option2 == value and variant.option1 == current_variant.option1 -%} {%- assign option_disabled = false -%} {%- break -%} {%- elsif option_index == 3 and variant.option3 == value and variant.option2 == current_variant.option2 and variant.option1 == current_variant.option1 -%} {%- assign option_disabled = false -%} {%- break -%} {%- endif -%} {%- endif -%} {%- endfor -%} <div class="single-option-selector checkbox" data-single-option-button> <input type="radio" {% if option.selected_value == value %} checked="checked" {% endif %} {% if option_disabled %} disabled="disabled" {% endif %} value="{{ value | escape }}" data-index="option{{ option_index }}" name="option{{ option.position }}" class="js-single-option-selector{% if option_disabled %} disabled{% endif %}" id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}" > <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}" title="{{ value | strip | escape }}" {% if option_disabled %} class="disabled" {% endif %} > {{ value | escape }} </label> </div> {%- endfor -%} {%- else -%} <select class="js-single-option-selector single-option-selector-{{ section.id }} product-form__input" data-id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}" data-single-option-select > {% for value in option.values %} <option value="{{ value | escape }}" {% if option.selected_value == value %} selected="selected" {% endif %} > {{ value | escape }} </option> {% endfor %} </select> {%- endif -%} </div> </div> {%- endfor -%} {% endunless %} <select name="id" class="js-product-select--{{ section.id }} product-single__variants d-none"> {%- for variant in product.variants -%} {%- if variant.available -%} <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" > {{ variant.title }} - {{ variant.price | money_with_currency }} </option> {%- else -%} <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option> {%- endif -%} {%- endfor -%} </select> {% unless product.has_only_default_variant %} {%- if settings.show_size_chart -%} <div class="size-guide"> <div class="title-size-guide"> <i class="bwp-icon-ruler"></i> <h2>{{ 'products.product.size_guide' | t }}</h2> </div> <div class="img-size-guide"> <div class="img-size-content"> <div class="title-size-guide"></div> {%- if size_chart -%} {% include 'SuperiorHombre' %} <img class="size_image" src="{{ size_chart | image_url:width:size_chart.width,height:size_chart.height }}" alt="{{ size_chart.alt | escape }}" width="{{ size_chart.width }}" height="{{ size_chart.height }}" > {%- else -%} {%- if settings.type_sizechart == 'image' -%} <img class="size_image" src="{{ settings.img_size_chart | image_url:width:settings.img_size_chart.width,height:settings.img_size_chart.height }}" alt="{{ settings.img_size_chart.alt | escape }}" width="{{ settings.img_size_chart.width }}" height="{{ settings.img_size_chart.height }}" > {%- else -%} {% if SizeChart_dt == 'SuperiorHombre' %} {% include 'SuperiorHombre' %} {% elsif SizeChart_dt == 'InferiorMujer' %} {% include 'InferiorMujer' %} {% elsif SizeChart_dt == 'InferiorHombre' %} {% include 'InferiorHombre' %} {% elsif SizeChart_dt == 'SuperiorMujer' %} {% include 'SuperiorMujer' %} {% endif %} {%- endif -%} {%- endif -%} </div> </div> </div> {%- endif -%} {% endunless %} {%- if block.settings.product_available_enable -%} <div class="content-variant_inventory"> {% if current_variant.inventory_management == 'shopify' %} {% if current_variant.inventory_quantity > 0 %} {%- assign stock = current_variant.inventory_quantity -%} {%- assign sold = block.settings.total_product_solid -%} {%- assign total = stock | plus: sold -%} {%- assign percent = stock | times: 100.00 | divided_by: total | round: 4 -%} <div class="js-product-avaiable product-avaiable"> <div id="variant-inventory_percent" class="show" style="--progress-bar-width:{{ percent }}%"> {{ 'products.product.left_in_stock_html' | t: current_variant: current_variant.inventory_quantity }} <div class="content-percent"><div class="percent"></div></div> </div> </div> {% endif %} {% endif %} </div> {%- endif -%} <div class="product-single__buttons"> {% comment %}Product quantity{% endcomment %} {%- if block.settings.quantity_enabled and current_variant.available -%} <div class="js-quantity-selector product-quantity"> <label for="Quantity" class="product-quantity__label">{{ 'products.product.quantity' | t }}</label> <div class="product-quantity__selector"> {%- if block.settings.quantity_selector == 'text' -%} <div class="wpbingo-qty"> <button type="button" class="js-qty-adjust wpbingo-qty__adjust wpbingo-qty__adjust--minus" aria-label="{{ 'cart.general.reduce_quantity' | t }}" > <i class="feather-minus"></i> </button> <input type="text" name="quantity" class="js-qty-number wpbingo-qty__number" value="1" min="1" aria-label="quantity" pattern="[0-9]*" > <button type="button" class="js-qty-adjust wpbingo-qty__adjust wpbingo-qty__adjust--plus" aria-label="{{ 'cart.general.increase_quantity' | t }}" > <i class="feather-plus"></i> </button> </div> {%- else -%} <select name="quantity" id="Quantity" class="product-quantity__select"> {%- for i in (1..10) -%} <option {% if forloop.first %} selected="selected" {% endif %} value="{{ i }}" > {{ i }} </option> {%- endfor -%} </select> {%- endif -%} </div> </div> {%- endif -%} {% comment %}Add to cart button{% endcomment %} <div class="product-single__add-to-cart"> <button class="btn btn--add-to-cart{% if block.settings.enable_payment_button %} btn--secondary-accent{% endif %}" {% unless current_variant.available %} disabled="disabled" {% endunless %} type="submit" name="add" > <span class="btn__text"> {% if current_variant.available %} {% if current_variant.incoming and current_variant.inventory_quantity == 0 %} {{ 'products.product.pre_order' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endif %} {% else %} {{ 'products.product.sold_out' | t }} {% endif %} </span> </button> {%- if product.handle != blank and section.settings.product_button_wishlist -%} <div class="button-wishlist"> <button type="button" aria-label="Add to wishlist" class="" button-wishlist data-product-handle="{{ product.handle }}" ></button> </div> {%- endif -%} </div> {% if block.settings.enable_payment_button and current_variant.available %} {% comment %} terms and conditions checkbox {% endcomment %} {% if settings.show_terms_conditions %} <p class="ajaxcart_terms_conditions"> <input style="float:none; vertical-align: middle;" type="checkbox" class="agree_terms_conditions"> <label style="display:inline; float:none" for="agree"> {{ settings.content_terms_conditions }} </label> </p> {% endif %} {% comment %} end terms and conditions checkbox {% endcomment %} {{ form | payment_button }} {% endif %} </div> {% endform %} {% unless current_variant.available %} {% include 'back-in-stock-form' %} {% endunless %} {%- elsif external != blank and group_product == blank -%} <div class="product-single__buttons product-single__add-to-cart"> <a class="product-single__external" href="{{ external }}">{{ 'products.product.buy_product' | t }}</a> {%- if product.handle != blank and section.settings.product_button_wishlist -%} <div class="button-wishlist"> <button type="button" aria-label="Add to wishlist" class="" data-product-handle="{{ product.handle }}"></button> </div> {%- endif -%} </div> {%- elsif group_product != blank -%} <form method="post" id="group_table_product" action="/cart/add" enctype="multipart/form-data" novalidate="novalidate"> <input type="hidden" name="form_type" value="product"> <div class="group_table"> {% for group_ids in group_product_array %} {% assign product_id = group_ids | plus: 0 %} {% paginate collections.all.products by 1000 %} {% for product in collections.all.products %} {%- if product.id == product_id -%} <div data-product_id="{{ product_id }}" class="item-product-group"> <div class="product-content"> <div class="product-thumb"> <a href="{{ product.url }}"> {% include 'img-global' with image: product.featured_image, class: "featured-banner__img", effect: "fade-in" %} </a> </div> <div class="product-info"> <h3 class="product-title"> <a href="{{ product.url }}">{{ product.title }}</a> </h3> {% assign number_variant = 0 %} {%- for variant in product.variants -%} {% assign number_variant = number_variant | plus: 1 %} {%- endfor -%} {%- if number_variant == 1 -%} {%- for variant in product.variants -%} {% if variant.inventory_management == 'shopify' and variant.inventory_policy != 'continue' %} {% if variant.inventory_quantity == 0 %} {% assign out_stock = true %} {%- endif -%} {%- endif -%} <div class="product-price">{{ product.price | money }}</div> <input name="items[][id]" type="hidden" value="{{ variant.id }}" {% if out_stock %} disabled="disabled" {%- endif -%} > {% if out_stock %} <div class="stock">{{ 'products.product.out_stock' | t }}</div> {%- endif -%} {%- endfor -%} {%- else -%} <select name="items[][id]" class="js-product-btp--{{ section.id }} product-single__variants"> {%- for variant in product.variants -%} {%- if variant.available -%} <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-price="{{ variant.price }}" value="{{ variant.id }}" > {{ variant.title }} - {{ variant.price | money_with_currency }} </option> {%- else -%} <option disabled="disabled"> {{ variant.title }} - {{ 'products.product.sold_out' | t }} </option> {%- endif -%} {%- endfor -%} </select> {%- endif -%} </div> </div> <div class="quantity-content"> {%- if out_stock -%} <div class="wpbingo-qty"> <button type="button" class="js-qty-adjust wpbingo-qty__adjust wpbingo-qty__adjust--minus" aria-label="{{ 'cart.general.reduce_quantity' | t }}" disabled="disabled" > <i class="feather-minus"></i> </button> <input type="text" name="items[][quantity]" class="js-qty-number wpbingo-qty__number" value="0" min="0" aria-label="quantity" pattern="[0-9]*" disabled="disabled" > <button type="button" class="js-qty-adjust wpbingo-qty__adjust wpbingo-qty__adjust--plus" aria-label="{{ 'cart.general.increase_quantity' | t }}" disabled="disabled" > <i class="feather-plus"></i> </button> </div> {%- else -%} <div class="wpbingo-qty"> <button type="button" class="js-qty-adjust wpbingo-qty__adjust wpbingo-qty__adjust--minus" aria-label="{{ 'cart.general.reduce_quantity' | t }}" > <i class="feather-minus"></i> </button> <input type="text" name="items[][quantity]" class="js-qty-number wpbingo-qty__number" value="1" min="0" aria-label="quantity" pattern="[0-9]*" > <button type="button" class="js-qty-adjust wpbingo-qty__adjust wpbingo-qty__adjust--plus" aria-label="{{ 'cart.general.increase_quantity' | t }}" > <i class="feather-plus"></i> </button> </div> {%- endif -%} </div> </div> {%- endif -%} {% endfor %} {% endpaginate %} {% endfor %} </div> {% comment %}Add to cart button{% endcomment %} <div class="product-group__add-to-cart product-single__buttons"> <button type="submit" class="add-group-to-cart"> {{ 'products.product.add_to_cart' | t }} </button> {%- if product.handle != blank -%} <div class="button-wishlist"> <button type="button" aria-label="Add to wishlist" class="" button-wishlist data-product-handle="{{ product.handle }}" ></button> </div> {%- endif -%} </div> </form> {%- endif -%} "I already tried removing the 'class="disabled"' from the loop of the selectors, but it's not working."
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.