How to hide a custom text box for a specific product variant

Highlighted
New Member
1 0 0

Hello, I am new to Shopify and have just started my site.

I have got a basic knowledge of coding and have attempted to do this using a number of tutorials and nothing will work!

 

I have created the options and the text box, however I need the customised text box to disappear when the option 'No' is selected.

 

Here is the code I have on my product-form.liquid: 


{% assign current_variant = product.selected_or_first_available_variant %}
{% assign variants_count = 0 %}
{% for variant in product.variants %}
{% assign variants_count = variants_count | plus: 1 %}
{% endfor %}

 

{% form 'product', product %}
{% if variants_count > 1 %}
<div class="row expanded">
{% include 'product-variants' %}
</div>
{% else %}
<input name="id" type="hidden" value="{{ current_variant.id }}">
{% endif %}
{% if section.settings.product_show_quantity_selector %}
<div class="row expanded quantity-selector">
<div class="selector-wrapper">
<label for="">{{ 'products.product.quantity' | t }}</label>
<div class="select shopify-select">
<select class="single-option-selector" id="productQuantity-{{ section.id }}" name="quantity">
{% if product.selected_or_first_available_variant.inventory_management == 'shopify' and product.selected_or_first_available_variant.inventory_quantity > 0%}
{% assign max = product.selected_or_first_available_variant.inventory_quantity | at_most: 50 %}
{% else %}
{% assign max = 50 %}
{% endif %}
{% for i in (1..max) %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
{% include 'svg-arrow' %}
</div>
</div>
</div>
{% else %}
<input type="hidden" id="quantity" name="quantity" value="1" min="1">
{% endif %}

<p class="line-item-property__field">
<label for="your-name">Name Inside Mug : (max 10 letters)</label>
<input id="yourname" type="text" name="properties[Your name]">
</p>
</br>

<div class="row expanded">
{% if current_variant.available %}
<button id="addToCart-{{ section.id }}" type="submit" class="add-to-cart {% if section.settings.enable_payment_button %}with-payment-button{% endif %}" data-action="add-to-cart">
{{ 'products.product.add_to_cart' | t }}
</button>
{% else %}
<button id="addToCart-{{ section.id }}" type="submit" class="add-to-cart {% if section.settings.enable_payment_button %}with-payment-button{% endif %}" disabled>
{{ 'products.product.unavailable' | t }}
</button>
{% endif %}
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}

 

Here is the code I attempted to use that won't work (need advice ASAP!!):

 

<div id="yourname" style="display:none">

<p class="line-item-property__field">
<label for="your-name">Name Inside Mug : (max 10 letters)</label>
<input id="yourname" type="text" name="properties[Your name]">
</p>
</br>

</div>

 

<script type="text/javascript">
    function ShowHideDiv(productselect-option-0) {
        var yourname = document.getElementById("ProductSelect-option-personalise-yes");
        yourname.style.display = ProductSelect.option-0.checked ? "block" : "none";
    }
</script>
 
Thank you!
0 Likes

please provide a store url to better assist 

Thanks & Regards
Perennial Solution

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes