Design

You can wrap the variants list in a new if tag.

In this example the UL is only shown if there is more then one variant:

     {% if product.variants.size < 1 %} 
      <ul id="variants">
        {% for variant in product.variants %}
        <li>
          {% if variant.available == true %}
            <input type="radio" name="id" value="{{variant.id}}" 
  id="radio_{{variant.id}}" 
  style="vertical-align: middle;" 
  {%if forloop.first%} checked="checked" {%endif%} />
            <label for="radio_{{variant.id}}">
            <span class="variant-price">{{ variant.price | money_with_currency }}</span>
             - {{ variant.title }}</label>
          {% else %}
            <span class="soldout">Sold Out!</span> - {{ variant.title }}
          {% endif %}
        </li>
        {% endfor %}
      </ul>
     {% endif %}

Thanks for the swift response Tobi.

I had a little play with this. Should the initial if statement should have been “>1”. I tried both.

However when I implement this I have a problem when I try and add an item which only has one (the default) variant to my cart. I get the following error:
“We were not able to add this item to your shopping cart because no item ID was passed here.”

Is this because the if statement now excludes the input tag so there is no value being passed if there is only one variant. I’ve also noticed that this appears to exlcude the code to flag an item is sold out if only one variant is available.

I have played round with adding an else condition but can’t quite achieve what I am trying to. The whole thing I am trying to avoid is where products with only one variant are listed with a single pre-selected radio button, which I think is slightly odd from a user perspective. Ideallly I still want to indicate to a customer when a product with only one variant is in stock or sold out .

Apologies if I am missing something obvious here but its starting to make my head hurt. Has anyone else got around this problem?

Ah right, my fault. You should add <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> to the else part.

Did this work?

Sorry offline for a couple of days (back on the day job!)

Anyway – it works! Thanks for your help Tobi.

Hoping to launch next week.

I must be doing something wrong, but i can’t figure out what:

{% if product.variants.size < 1 %}
            <ul id="variants">
        {% for variant in product.variants %}
        <li>
          {% if variant.available == true %}
            <input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" style="vertical-align: middle;" {%if forloop.first%} checked="checked" {%endif%} />
            <label for="radio_{{variant.id}}">{{ variant.title }} por <span class="price">{{ variant.price | money_with_currency }}</span></label>
          {% else %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <del style=";margin-left: 26px">{{ variant.title }}</del>&nbsp;<span class="price">Sold Out!</span>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
    {% endif %}

I’m getting the error: “We were not able to add this item to your shopping cart because no item ID was passed here.

Here is the whole chunk of code I pulled together with the help Tobi provided on my original post.
I’m not a programmer so there may be a more elegant way to write this, but I needed a solution to get me through and this did the trick.

    <form action="/cart/add" method="post" class="var-form">

     {% if product.variants.size > 1 %} 
     <h3 class="var-me">Available options:</h3>
      <ul id="variants">
        {% for variant in product.variants %}
        <li>
          {% if variant.available == true %}
            <input type="radio" name="id" value="{{variant.id}}" 
  id="radio_{{variant.id}}" 
  style="vertical-align: middle;" 
  {%if forloop.first%} checked="checked" {%endif%} />
            <label for="radio_{{variant.id}}">
            <span class="variant-price">{{ variant.price | money_with_currency }}</span>
             - {{ variant.title }}</label>
          {% else %}
            <span class="soldout">Sold Out!</span> - {{ variant.title }}
          {% endif %}
        </li>
        {% endfor %}
      </ul>
     {% else %}
      <ul id="variants">
        {% for variant in product.variants %}
        <li>
          {% if variant.available == true %}
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            {% else %}
            <span class="soldout">Sorry, Sold Out</span> - stock on order.
          {% endif %}
        </li>
        {% endfor %}
     {% endif %}

      <ul class="buttons clearfix">
        <input type="submit" name="add" value="Add to Cart" id="add" class="primary" />
      </ul>    

    </form>

Hope this helps.

Thank you. I would never (or, being optimistic, would take very long to) get there.

Still on this topic, though I think it’s an issue prior to this alteration: when the client adds a product with a variant to the cart, the product line on the cart has the variant repeated twice. Example: “T-Shirt – M (M)”. Is this happening to you too?
Thank you,
Ana Rita

Yes. I solved this by removing the following lines from your cart.liquid:

                {% if item.variant.available == true %}
                   ({{item.variant.title}})
                {% endif %}

It seems like the variable “item.title” used on the cart liquid page already sticks the variant name at the end of the product name, and these three lines of code (which output the variant name in brackets) are then not needed.

Can anyone confirm this?

Thank you, Kati. In fact, in the mean time, I figured it out myself. Still, I think this is indeed an unnecessary repetition that could be addressed by the developers (I’m presuming this is not caused by the changes made on product.liquid for hiding the default variant).

I’m new to this so I need help with this subject as well. I’m not versed in code so please help me in a way I could do this myself. I’m using the showroom template for my store. I am not adding any products that have variants. I would like to get rid of the variant selection from my products. How do I do this. I have looked at some of the solutions offered by Tobi but when I looked into the product liquid, I did not see the any similar code. I appreciate any help as I am trying to launch my store soon.

hi, hoping someone can help, i am a total newb, i don’t understand where to put the code? i am using the showroom theme. any help is greatly appreciated :)

Hello.

I am using the Minimify template for a store I hope to make live soon and I am encountering similar issues when trying to hide the default item variant.

I attempted to plug in Bazza’s code posted above for 2-3 hours on Sunday, but I could not figure out exactly where to put it in the lines of code on product.liquid. The closest I could come was when I got the default item variant to vanish, but the price that had been displayed on a second line unrelated to the radio button / drop-down menu also went missing. Any advice would be greatly appreciated, as I don’t want to launch before clearing this up.

Thanks!

Jon

I did something similar with the add button, hiding it when none of the variants are in stock. Helps reduce the likelihood of people hitting that generic “email the shop owner” error.