Material Option removing from product form in Impuls Theme

Highlighted
New Member
2 0 0

I need to hide Material option from product page because I only needed it in product grids of collection pages. I tried different css tweaks mentioned on previous posts but to no avail.  Below are Product form and variant button code files. Kindly suggest changes to remove only the Material option from product page

 

product-form.liquid



{% capture form_id %}AddToCartForm-{{ section_id }}{% endcapture %}
{% form 'product', product, id: form_id, class: 'product-single__form' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}

{%- if option_name contains 'material' or option_name contains 'Material' -%}
{% style %}
.variant__button-label{
display: none;
}
{% endstyle %}
{%- endif -%}

{% if settings.variant_type == 'button' %}
{% include 'variant-button', section_id: section_id, option_drop: option %}
{% else %}
{% include 'variant-dropdown', section_id: section_id %}
{% endif %}
{% endfor %}
{% endunless %}

<select name="id" id="ProductSelect-{{ section_id }}" class="product-single__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %}
selected="selected" {% endif %}
value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money_with_currency }}
</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>

{% if settings.quantity_enable %}
<div class="product__quantity product__quantity--{{ settings.variant_type }}">
<label for="Quantity-{{ section_id }}">{{ 'products.product.quantity' | t }}</label>
{% include 'quantity-input', id: section_id, qty: 1, min: 1 %}
</div>
{% endif %}

{%- assign inventory_visible = false -%}
{%- if settings.inventory_enable and current_variant.inventory_management == 'shopify' -%}
{%- if current_variant.inventory_quantity <= settings.inventory_threshold and current_variant.inventory_quantity >= 0 -%}
{%- assign inventory_visible = true -%}
{%- endif -%}
{%- endif -%}
{%- if current_variant.inventory_quantity == 0 -%}
{%- assign inventory_visible = false -%}
{%- endif -%}

<div
id="ProductInventory-{{ section_id }}"
class="product__inventory {% unless inventory_visible %}hide{% endunless %}"
>
{% if current_variant.available %}
{{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
{% endif %}
</div>

{%- if settings.inventory_transfers_enable -%}
<div
id="ProductIncomingInventory-{{ section_id }}"
class="product__inventory{% if inventory_visible %} hide{% endif %}">
{%- if current_variant.incoming and inventory_visible == false -%}
{%- if current_variant.next_incoming_date -%}
{% assign date = current_variant.next_incoming_date | date: format: 'date' %}
{%- if current_variant.available -%}
{{ 'products.product.will_not_ship_until' | t: date: date }}
{%- else -%}
{{ 'products.product.will_be_in_stock_after' | t: date: date }}
{%- endif -%}
{%- else -%}
{{ 'products.product.waiting_for_stock' | t }}
{%- endif -%}
{%- endif -%}
</div>
{%- endif -%}

{%- assign enable_dynamic_buttons = false -%}
{% if settings.enable_payment_button and template != 'product.preorder' %}
{%- assign enable_dynamic_buttons = true -%}
{% endif %}

{% if enable_dynamic_buttons %}
<div class="payment-buttons">
{% endif %}

<button
{% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
name="add"
id="AddToCart-{{ section_id }}"
class="btn btn--full add-to-cart{% if enable_dynamic_buttons %} btn--secondary{% endif %}"
{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section_id }}">
{% if current_variant.available %}
{% if template == 'product.preorder' %}
{{ 'products.product.preorder' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endif %}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>

{% if enable_dynamic_buttons %}
{{ form | payment_button }}
{% endif %}

{% if enable_dynamic_buttons %}
</div>
{% endif %}

<div id="VariantsJson-{{ section_id }}" class="hide" aria-hidden="true">
{{ product.variants | json }}
</div>
{% if product.options.size > 1 %}
<div id="CurrentVariantJson-{{ section_id }}" class="hide" aria-hidden="true">
{{ current_variant | json }}
</div>
{% endif %}
{% endform %}

 

variant-button.liquid

 

{%- assign swatch_file_extension = 'png' -%}
{%- assign is_color = false -%}
{%- assign color_swatch_drop = option_drop -%}
{%- assign color_option_index = 0 -%}

{%- if settings.product_color_swatches -%}
{%- for option in product.options_with_values -%}
{%- if option == color_swatch_drop -%}
{%- assign color_option_index = forloop.index0 -%}
{%- assign downcased_option = color_swatch_drop.name | downcase -%}
{%- if downcased_option contains 'color' or downcased_option contains 'colour' -%}
{%- assign is_color = true -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}

 

<div class="variant-wrapper variant-wrapper--{{ settings.variant_type }} js">
<label class="variant__label{% if option.name == 'Default' or option.name == 'Material' %} hidden-label{% endif %}{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}{% unless settings.variant_labels_enable %} hidden-label{% endunless %}"
for="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">
{{ option.name }}
{%- if is_color -%}
<span class="variant__label-info">
&mdash;
<span
id="VariantColorLabel-{{ section_id }}-{{ 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 }}"
id="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">


{%- for value in option.values -%}
{%- 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"
{% if option.selected_value == value %} checked="checked"{% endif %}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="{{ option.name }}"
class="variant__input-{{ section_id }}{% unless product_available %} disabled{% endunless %}{% if is_color %} variant__input--color-swatch-{{ section_id }}{% endif %}"
{% if is_color %} data-color-name="{{ value | escape }}"{% endif %}
{% if is_color %} data-color-index="{{ color_option_index }}"{% endif %}
id="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}">



{%- if is_color -%}
{%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' -%}
{%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
<label
for="ProductSelect-{{ section_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-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};"
>
{{ value | escape }}
</label>

{%- else -%}

<label
for="ProductSelect-{{ section_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>

 

0 Likes