How do you hide the "disabled" variants on the product page in the Impulse theme?

[DevCanaan]

Hey everyone,

I am currently dealing with an issue with the Impulse theme. The stores’ products only have certain variants tied together. For example, one of the variant option names is “Types of Products”, then the next is “Sizes”. The variants always show “Types of Products”, but we want to hide the “Sizes” that don’t go with the previous variant option. Currently, the code for them “disables” them, which just grays them out and doesn’t allow you to click on them, but we want the grayed out ones to not show. So when viewing the “Prints” variant, it shouldn’t show the sizes for the “Blankets”, “Towels”, etc. Here are some screenshots of the section and the code files.

{%- assign swatch_file_extension = 'png' -%}

{%- capture size_chart_title -%}
  {{ 'products.general.size_chart' | t }} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-size-chart" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M22.39 33.53c-7.46 0-13.5-3.9-13.5-8.72s6-8.72 13.5-8.72 13.5 3.9 13.5 8.72a12 12 0 0 1-.22 1.73"/><ellipse cx="22.39" cy="24.81" rx="3.28" ry="2.12"/><path class="a" d="M8.89 24.81V38.5c0 7.9 6.4 9.41 14.3 9.41h31.92V33.53H22.39m24.39 0v7.44m-8.13-7.44v7.44m-8.13-7.44v7.44m-8.13-7.44v7.44"/></svg>
{%- endcapture -%}

{%- liquid
  assign is_size = false
  assign size_trigger = 'products.general.size_trigger' | t | downcase
  assign downcased_option = option.name | downcase

  if downcased_option contains size_trigger
    assign is_size = true
  endif
-%}

<div class="variant-wrapper js" data-type="button">
  <label class="variant__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}{% unless variant_labels %} hidden-label{% endunless %}"
    for="ProductSelect-{{ section_id }}-{{ product.id }}-option-{{ forloop.index0 }}">
    {{ option.name }}
    {%- if connect_to_sizechart and is_size -%}
      <span class="variant__label-info">
        —
        {%- render
          'tool-tip-trigger',
          title: size_chart_title,
          content: section.blocks[sizechart_index].settings.size_chart.content,
          context: 'size-chart'
        -%}
      </span>
    {%- endif -%}
    {%- if is_color -%}
      <span class="variant__label-info">
        —
        <span
          data-variant-color-label
          data-index="{{ forloop.index0 }}"
          data-option-index="{{ color_option_index }}">
          {{ option.selected_value }}
        </span>
      </span>
    {%- endif -%}
  </label>
  {%- assign option_index = forloop.index -%}
  <fieldset class="variant-input-wrap"
    name="{{ option.name }}"
    data-index="option{{ option_index }}"
    data-handle="{{ option.name | handleize }}"
    id="ProductSelect-{{ section_id }}-{{ product.id }}-option-{{ forloop.index0 }}">
    <legend class="hide">{{ option.name }}</legend>
    {%- for value in option.values -%}
      {%- liquid
        assign product_available = true
        if product.options.size == 1
          assign product_available = product.variants[forloop.index0].available
        endif
      -%}
      <div
        class="variant-input"
        data-index="option{{ option_index }}"
        data-value="{{ value | escape }}">
        <input type="radio"
          form="{{ form_id }}"
          {% if option.selected_value == value %} checked="checked"{% endif %}
          value="{{ value | escape }}"
          data-index="option{{ option_index }}"
          name="{{ option.name }}"
          data-variant-input
          class="{% unless product_available %} disabled{% endunless %}{% if is_color %} variant__input--color-swatch{% endif %}"
          {% if is_color %} data-color-name="{{ value | escape }}"{% endif %}
          {% if is_color %} data-color-index="{{ color_option_index }}"{% endif %}
          id="ProductSelect-{{ section_id }}-{{ product.id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}">
        {%- if is_color -%}
          {%- liquid
            assign color_file_name = value | handle | append: '.' | append: swatch_file_extension
            assign color_image = color_file_name | file_img_url: '50x50' | prepend: 'https:' | split: '?' | first
            assign color_swatch_fallback = value | split: ' ' | last | handle
          -%}
          <label
            for="ProductSelect-{{ section_id }}-{{ product.id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="variant__button-label color-swatch color-swatch--{{ value | handle }}{% unless product_available %} disabled{% endunless %}"
            style="background-color: {{ color_swatch_fallback }};{% if images[color_file_name] != blank %}  background-image: url({{ color_image }});{% endif %}"
          >
            {{ value | escape }}
          </label>
        {%- else -%}
          <label
            for="ProductSelect-{{ section_id }}-{{ product.id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="variant__button-label{% unless product_available %} disabled{% endunless %}">{{ value | escape }}</label>
        {%- endif -%}
      </div>
    {%- endfor -%}
  </fieldset>
</div>

I’ll update if I find out an answer to it as well, but so far, I have nothing.

[Ninthony]

Can you post a link to the product so we can take a look and see what’s getting applied to those swatches? If they’re disabled you can probably just do something like:

.size-swatch[disabled] {
  display: none;
}

Obviously not with the same classes here, just an example. Usually this is a bit more complicated though and would require doing it through JS, but I’m sure we can figure out something. Please post a password if password protected as well.

[rishi1897]

not very clear with the code but general if condition will work

{% if product_available %} //assuming from your code the you already captured if product is available or not in this variable
  <label>
       {{ value | escape }} //code for sizes button
  </label>
{% endif%}

[DevCanaan]

I ended up adding this to it and it worked well. I don’t know why it wouldn’t without the !important, but it works now.

[Ninthony]

CSS is top down and specificity based. If there are styles that are lower in the code, or more specific than styles above or less specific, those will take precedence. For example:

p {
  color: red;
}

p {
  color: blue;
}
/* if the code stopped here, the color of the paragraph text would be blue. */

p.some-class {
  color: green;
}
/* this is more specific. A paragraph tag with the class "some-class" would be green */

So it’s likely your code had some more specified styles for the “disabled” class. Using the “!important” flag basically overrides specificity and only adheres to the top-down rule.

p.some-class.another-class {
  color: green;
}

p {
  color: red!important;
}

/* Red would override even the super specific paragraph with the class "some-class" and "another-class" because of the important flag. */

[littleacreteam]

Hi Canaan

We are trying to do the exact same thing here with the Venue theme. Where did you add this code in?

For our workshops, we want to have just the dates for each location variant show, so we would split these into “Location” and “date”:

https://littleacre.com.au/products/mushroom-masterclass

We haven’t implemented this change yet for the same reason as you - it’s way too confusing for users.

Any tips for us??

Thank you!