Origin Theme - Product Variant button

[gmuink]

Hi,

Is there any way I can have the product variants completely disappeared when one is selected rather than being striked out? Please see the screenshot below.

https://itisoukay.com/products/harbor-copy

PW: WAIT

When I select 'Print Only' I want the variants for 'Framed' to be disappeared and vice-versa when 'Framed' is selected for all products.

 

Thank you in advance!!!

[BlackUmbrella]

Hello @gmuink,

It will require a small amount of custom work. You will need to add some conditions to your product variant-picker.liquid file. You can find it in Edit Code.
Below is an example of how it works.

In Dawn theme, the original code is:

{%- unless product.has_only_default_variant -%}
  <variant-selects
    id="variant-selects-{{ section.id }}"
    data-section="{{ section.id }}"
    {{ block.shopify_attributes }}
  >

Substitute for:

{%- unless product.has_only_default_variant -%}
  <variant-selects
    id="variant-selects-{{ section.id }}"
    data-section="{{ section.id }}"
    class="{% unless product.available %}variant-selects--sold-out{% endunless %}"
    {{ block.shopify_attributes }}
  >

And add class to base.css

.variant-selects--sold-out {
  display: none;
}

[gmuink]

Hi @BlackUmbrella , thank you for your response. I am actually using Origin Theme but I was able to find the product variant-picker.liquid under Snippets. However, nothing really changes even if I updated with new codings.

I wondered if it didn't work because it's 'unless sold out' but still nothing changes but stays as strike out even if product quantity is zero. The condition is not Sold Out but unavailable for variants.

[BlackUmbrella]

You can see in your code below, if you add a class "hidden" in the right place, the selections disappear.
Remember to save a backup of your files. You need a condition that applies the class hidden if the product is sold out or unavailable.
Since the class hidden already exists in your theme, you don't need the variant-selects--sold-out class.

Try to edit product-variant-options.liquid

{% if option_disabled %}
        class="disabled hidden"
      {% endif %}
      {{ input_dataset }}
    >
 <label for="{{ input_id }}" {% if option_disabled %}class="hidden"{% endif %}>
      {{ value -}}
      {{ label_unavailable }}
 </label>

[gmuink]

I am actually beginner or not even a beginner, I don't quite understand things too much. Yours look great but can you tell me exactly where I need to replace from the beginning? I am a bit confused.

I added the new code for product-variant-options.liquid just as before </label> as you written in the reply but I don't think it's applying.

[BlackUmbrella · Accepted solution]

I apologize. Maybe i'm not explaning myself correctly.

Please see below. Open product-variant-options.liquid.
You should see something like this:

Substitute for this:


We added the hidden class in front of disable and a condition on the bottom that {% if option_disabled %}class="hidden"{% endif %}

      {% if option_disabled %}
        class="disabled hidden"
      {% endif %}
      {{ input_dataset }}
    >
    <label for="{{ input_id }}" {% if option_disabled %}class="hidden"{% endif %}>
      {{ value -}}
      {{ label_unavailable }}
    </label>

[gmuink]

This is wonderful. Thank you so much!!!