Solved

Hide specific variant option for all products

Vapes4You
Excursionist
41 3 12

Hi community,

 

I want to hide a specific variant for all of my option. So the name and the option itself should not be visible

The name of the option is "Packung", and it is not alwys in the first position. But the name is always Packung.

 

Thanks in advance for your suggestions.

 

Please do not offer any apps, I want to solve it via Code 🙂

 

Vapes4You_0-1698396996479.png

 

 

V4Y

 

 

You're personal Vapeshop expert 🙂
Accepted Solution (1)
Vapes4You
Excursionist
41 3 12

This is an accepted solution.

In case anybody needs this solution, here is the new code from @Dan-From-Ryviu .

Thank you very much!

 

{% comment %}
  Renders product variant-picker

  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} Id of the product form to which the variant picker is associated.
  - update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
  Usage:
  {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
<style>
  .product-form__input.Packung { display: none !important; }
</style>
{%- unless product.has_only_default_variant -%}
  {%- if block.settings.picker_type == 'button' -%}
    <variant-radios
      id="variant-radios-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <fieldset class="js product-form__input {{ option.name }}">
          <legend class="form__label">{{ option.name }}</legend>
          {% render 'product-variant-options', product: product, option: option, block: block %}
        </fieldset>
      {%- endfor -%}
      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-radios>
  {%- else -%}
    <variant-selects
      id="variant-selects-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <div class="product-form__input product-form__input--dropdown">
          <label class="form__label {{ option.name }}" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <div class="select {{ option.name }}">
            <select
              id="Option-{{ section.id }}-{{ forloop.index0 }}"
              class="select__select"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              {% render 'product-variant-options', product: product, option: option, block: block %}
            </select>
            {% render 'icon-caret' %}
          </div>
        </div>
      {%- endfor -%}

      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-selects>
  {%- endif -%}
{%- endunless -%}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
    <label class="form__label" for="Variants-{{ section.id }}">
      {{- 'products.product.product_variants' | t -}}
    </label>
    <div class="select">
      <select
        name="id"
        id="Variants-{{ section.id }}"
        class="select__select"
        form="{{ product_form_id }}"
      >
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
            {% if variant.available == false %}
              disabled
            {% endif %}
            value="{{ variant.id }}"
          >
            {%- liquid
              echo variant.title
              echo variant.price | money | strip_html | prepend: ' - '
              if variant.available == false
                echo 'products.product.sold_out' | t | prepend: ' - '
              endif
              if variant.quantity_rule.increment > 1
                echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
              endif
              if variant.quantity_rule.min > 1
                echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
              endif
              if variant.quantity_rule.max != null
                echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
              endif
              # TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
              # theme-check-disable
              assign cart_quantity = cart | item_count_for_variant: variant.id
              # theme-check-enable
              if cart_quantity > 0
                echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
              endif
            -%}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>

 

 

You're personal Vapeshop expert 🙂

View solution in original post

Replies 13 (13)

Dan-From-Ryviu
Shopify Partner
7721 1502 1508

Hi @Vapes4You 

Could you share your drop your link here to check?

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Vapes4You
Excursionist
41 3 12

Hi Dan,

Sure the shop is: https://vapes4you.de

 

The link to the product in the screenshot is: https://vapes4you.de/products/menthol-blaubeere-e-zigaretten-liquid?_pos=1&_psq=menthol-b&_ss=e&_v=1...

 

 

You're personal Vapeshop expert 🙂
Dan-From-Ryviu
Shopify Partner
7721 1502 1508

Go to your Online store > Themes > Edit code, open product-variant-picker.liquid file, replace code of this file with this one

{% comment %}
  Renders product variant-picker

  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} Id of the product form to which the variant picker is associated.
  - update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
  Usage:
  {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}

{%- unless product.has_only_default_variant -%}
  {%- if block.settings.picker_type == 'button' -%}
    <variant-radios
      id="variant-radios-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        {%- unless option.name == "Packung" -%}
        <fieldset class="js product-form__input">
          <legend class="form__label">{{ option.name }}</legend>
          {% render 'product-variant-options', product: product, option: option, block: block %}
        </fieldset>
        {%- endunless -%}
      {%- endfor -%}
      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-radios>
  
  {%- else -%}
    <variant-selects
      id="variant-selects-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        {%- unless option.name == "Packung" -%}
        <div class="product-form__input product-form__input--dropdown">
          <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <div class="select">
            <select
              id="Option-{{ section.id }}-{{ forloop.index0 }}"
              class="select__select"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              {% render 'product-variant-options', product: product, option: option, block: block %}
            </select>
            {% render 'icon-caret' %}
          </div>
        </div>
        {%- endunless -%}  
      {%- endfor -%}

      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-selects>
  {%- endif -%}
    
{%- endunless -%}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
    <label class="form__label" for="Variants-{{ section.id }}">
      {{- 'products.product.product_variants' | t -}}
    </label>
    <div class="select">
      <select
        name="id"
        id="Variants-{{ section.id }}"
        class="select__select"
        form="{{ product_form_id }}"
      >
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
            {% if variant.available == false %}
              disabled
            {% endif %}
            value="{{ variant.id }}"
          >
            {%- liquid
              echo variant.title
              echo variant.price | money | strip_html | prepend: ' - '
              if variant.available == false
                echo 'products.product.sold_out' | t | prepend: ' - '
              endif
              if variant.quantity_rule.increment > 1
                echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
              endif
              if variant.quantity_rule.min > 1
                echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
              endif
              if variant.quantity_rule.max != null
                echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
              endif
              # TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
              # theme-check-disable
              assign cart_quantity = cart | item_count_for_variant: variant.id
              # theme-check-enable
              if cart_quantity > 0
                echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
              endif
            -%}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Vapes4You
Excursionist
41 3 12

@Dan-From-Ryviu  you are a magician! 

Thank you very much!

You're personal Vapeshop expert 🙂
Dan-From-Ryviu
Shopify Partner
7721 1502 1508

Happy I could help ❤️!

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

stoatsnhoney
Visitor
1 0 0

Hi, would some edits to this code make it possible to just hide unavailable variants? I'm using Dawn ver 12. I've tried experimenting with it myself but I'm not much of a coder 🙂

Dan-From-Ryviu
Shopify Partner
7721 1502 1508

Please send me your product page link 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Vapes4You
Excursionist
41 3 12

Hi @Dan-From-Ryviu ,

 

Unfortunately I had to unmark your post as solution. The variant picker is broken. When I change the variant of the product, the checkout button does not work anymore.

I had to undo the changes in the code and now it works again.

You're personal Vapeshop expert 🙂
Dan-From-Ryviu
Shopify Partner
7721 1502 1508

Hi @Vapes4You Could you explain what did you change the variant?

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Vapes4You
Excursionist
41 3 12

Hi,

 

I have made screenshots of the behavior.

1. Product page (original) Option Stärke 3mg/ml

Vapes4You_0-1698998631965.png

2. Product page (original) after click on Option Stärke 6mg/ml

Vapes4You_1-1698998696838.png

 

3. Product page (after code edit) Option Stärke 3mg/ml

Vapes4You_2-1698998784138.png

4. Product Page (after code edit) after click on Option Stärke 6mg/ml

Vapes4You_3-1698998828174.png

 

The behaviour is the same for every option. Even If go back to option 3mg/ml it always shows me, that the variant is not available and the "add to cart" button is disabled.

 

Kind regards

You're personal Vapeshop expert 🙂
Dan-From-Ryviu
Shopify Partner
7721 1502 1508

Could I access your store so I can duplicate theme and check?

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Vapes4You
Excursionist
41 3 12

Yes, sure

You're personal Vapeshop expert 🙂
Vapes4You
Excursionist
41 3 12

This is an accepted solution.

In case anybody needs this solution, here is the new code from @Dan-From-Ryviu .

Thank you very much!

 

{% comment %}
  Renders product variant-picker

  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} Id of the product form to which the variant picker is associated.
  - update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
  Usage:
  {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
<style>
  .product-form__input.Packung { display: none !important; }
</style>
{%- unless product.has_only_default_variant -%}
  {%- if block.settings.picker_type == 'button' -%}
    <variant-radios
      id="variant-radios-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <fieldset class="js product-form__input {{ option.name }}">
          <legend class="form__label">{{ option.name }}</legend>
          {% render 'product-variant-options', product: product, option: option, block: block %}
        </fieldset>
      {%- endfor -%}
      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-radios>
  {%- else -%}
    <variant-selects
      id="variant-selects-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <div class="product-form__input product-form__input--dropdown">
          <label class="form__label {{ option.name }}" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <div class="select {{ option.name }}">
            <select
              id="Option-{{ section.id }}-{{ forloop.index0 }}"
              class="select__select"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              {% render 'product-variant-options', product: product, option: option, block: block %}
            </select>
            {% render 'icon-caret' %}
          </div>
        </div>
      {%- endfor -%}

      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-selects>
  {%- endif -%}
{%- endunless -%}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
    <label class="form__label" for="Variants-{{ section.id }}">
      {{- 'products.product.product_variants' | t -}}
    </label>
    <div class="select">
      <select
        name="id"
        id="Variants-{{ section.id }}"
        class="select__select"
        form="{{ product_form_id }}"
      >
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
            {% if variant.available == false %}
              disabled
            {% endif %}
            value="{{ variant.id }}"
          >
            {%- liquid
              echo variant.title
              echo variant.price | money | strip_html | prepend: ' - '
              if variant.available == false
                echo 'products.product.sold_out' | t | prepend: ' - '
              endif
              if variant.quantity_rule.increment > 1
                echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
              endif
              if variant.quantity_rule.min > 1
                echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
              endif
              if variant.quantity_rule.max != null
                echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
              endif
              # TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
              # theme-check-disable
              assign cart_quantity = cart | item_count_for_variant: variant.id
              # theme-check-enable
              if cart_quantity > 0
                echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
              endif
            -%}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>

 

 

You're personal Vapeshop expert 🙂