Hide "out of stock" size variants -- Dawn 13

Iceman3
New Member
21 0 0

Hi everybody!

DAWN TAMPLATE
version 13

Does anyone know how to hide size variants (on button version) when they're out of stock?

Iceman3_0-1711099838829.png


I achieved it on previous version of dawn, but not working on version 13.

Any help would be appreciated.

Many thanks in advance!

Replies 9 (9)
Rishihuptech
Shopify Partner
490 84 94

Hello @Iceman3 , To hide the sold-out variant from the image_2024_03_22T10_06_58_685Z.pngproduct page update the code in your file.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Iceman3
New Member
21 0 0

Hi! Thanks for your reply.

Not working. In fact, thats not the code on my "product-variant.liquid"

Let me post the code for you:

{% comment %}
  Renders product variant options

  Accepts:
  - product: {Object} product object.
  - option: {Object} current product_option object.
  - block: {Object} block object.
  - picker_type: {String} type of picker to dispay


  Usage:
  {% render 'product-variant-options',
    product: product,
    option: option,
    block: block
    picker_type: picker_type
  %}
{% endcomment %}
{%- liquid
  assign variants_available_arr = product.variants | map: 'available'
  assign variants_option1_arr = product.variants | map: 'option1'
  assign variants_option2_arr = product.variants | map: 'option2'
  assign variants_option3_arr = product.variants | map: 'option3'

  assign product_form_id = 'product-form-' | append: section.id
-%}

{%- for value in option.values -%}
  {%- liquid
    assign option_disabled = true

    for option1_name in variants_option1_arr
      case option.position
        when 1
          if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
            assign option_disabled = false
          endif
        when 2
          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
            assign option_disabled = false
          endif
        when 3
          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
            assign option_disabled = false
          endif
      endcase
    endfor

    if value.swatch.image
      assign image_url = value.swatch.image | image_url: width: 50
      assign swatch_value = 'url(' | append: image_url | append: ')'
    elsif value.swatch.color
      assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
    else
      assign swatch_value = nil
    endif
  -%}

  {%- capture input_id -%}
    {{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
  {%- endcapture -%}

  {%- capture label_unavailable %}
    <span class="visually-hidden label-unavailable">
      {{- 'products.product.variant_sold_out_or_unavailable' | t -}}
    </span>
  {%- endcapture %}

  {%- if picker_type == 'swatch' -%}
    {% assign checked = false %}
    {% if option.selected_value == value %}
      {% assign checked = true %}
    {% endif %}
    {%
      render 'swatch-input',
      id: input_id,
      name: option.name,
      value: value | escape,
      product_form_id: product_form_id,
      checked: checked,
      disabled: option_disabled,
      shape: block.settings.swatch_shape,
      help_text: label_unavailable
    %}
  {%- elsif picker_type == 'button' -%}
    <input
      type="radio"
      id="{{ input_id }}"
      name="{{ option.name }}"
      value="{{ value | escape }}"
      form="{{ product_form_id }}"
      {% if option.selected_value == value %}
        checked
      {% endif %}
      {% if option_disabled %}
        class="disabled"
      {% endif %}
    >
    <label for="{{ input_id }}">
      {{ value -}}
      {{ label_unavailable }}
    </label>
  {%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
    <option
      value="{{ value | escape }}"
      {% if option.selected_value == value %}
        selected="selected"
      {% endif %}
      {% if swatch_value and picker_type == 'swatch_dropdown' %}
        data-option-swatch-value="{{ swatch_value }}"
      {% endif %}
    >
      {% if option_disabled -%}
        {{- 'products.product.value_unavailable' | t: option_value: value -}}
      {%- else -%}
        {{- value -}}
      {%- endif %}
    </option>
  {%- endif -%}
{%- endfor -%}

 
Thanks 

Iceman3
New Member
21 0 0

Hi! Thanks for your answer.

This is not working for DAWN template.

What that does is not allowing to sell "out of stock size variants" making the button grey or a lighter color, and the size value strikethrough but does not hide it. Still shows.

PageFly-Oliver
Shopify Partner
878 190 171

Hi @Iceman3 ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
variant-radios label:has([class*="sold-out"]){
display:none !important
}
<style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Iceman3
New Member
21 0 0

Hi! Thanks for your reply.

Not working. 

I'm not sure if "sold-out" is a class assigned to no available buttons :S

Iceman3
New Member
21 0 0

Any clue? 😞

 

Rishihuptech
Shopify Partner
490 84 94

Hello @Iceman3 , Can you please share your store URL?

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Iceman3
New Member
21 0 0
Iceman3
New Member
21 0 0

Could you find any solution? 🙂