Push the sold out variant to the end in variant picker

Push the sold out variant to the end in variant picker

Go to variant-main-picker.liquid, search for {%- for product_option_value in product_option.values -%}

and replace with: 
{%- assign available_option_values = product_option.values | where: "available", true -%}
{%- assign unavailable_option_values = product_option.values | where: "available", false -%}
{%- assign sorted_option_values = available_option_values | concat: unavailable_option_values -%}
{%- for product_option_value in sorted_option_values -%}


Go to variant-swatches.liquid, search for {%- for product_option_value in product_option.values -%} below the {% capture children %}

{%- assign available_swatch_values = product_option.values | where: "available", true -%}
{%- assign unavailable_swatch_values = product_option.values | where: "available", false -%}
{%- assign sorted_swatch_values = available_swatch_values | concat: unavailable_swatch_values -%}
{%- for product_option_value in sorted_swatch_values -%}

    • Related Articles

    • Sold-out swatch overlay to make them more visible

      In variant-picker-styles.liquid, add the following before {% endstylesheet %} /* Dim unavailable non-swatch buttons */ .variant-option__button-label:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) { opacity: 0.4; ...

    • Remove/hide Sold out Badge for out of stock Products

      In base.css file, add this code at the bottom: .grid__item .card-wrapper:has(.price--sold-out) .card--media .card__badge { display: none !important; }

    • Hide variants that is out of stock

      Add the following in variant-main-picker.liquid {%- for product_option_value in product_option.values -%} {% # hide variants = 0 # %} {% if product_option_value.available == false %} {% continue %} {% endif %} {% # End hide variants = 0 # %} {% if ...

    • To align swatches to the left with 0 margin

      In variant-picker-styles.liquid, add the followings: .variant-option--swatches overflow-list::part(list) { padding-inline: 0 !important; margin-inline: 0; }

    • Add legend in the product card

      Find <fieldset class="variant-option variant-option--buttons variant-option--swatches"> in variant-swatches.liquid, Add the following before the above: <!-- ADD THIS LEGEND --> <div class="swatch-legend"> <span class="swatch-legend__option-name">{{ ...