"Sold Out" Not Showing Up For Variants On Collection Pages

Roxee541
Tourist
15 0 2

Hello Shopify Community,

We recently launched our Wholesale website and noticed that the products with variants do not show "Sold Out" on the collection pages if someone picked a variant that is sold out.

We made it so that if a product is sold out, the Add To Cart button changes to Red, instead of the Green Add To Cart colored button, but it still says Add To Cart, instead of Sold Out.

It works fine on the Product pages. We are using Mr. Parker Shopify theme.

Now, the Collection pages were modified to have the Add To Cart from show on the collection pages as most of our wholesale customers are familiar with the products and do not need to go to the product page itself and can just add the products at the Collection page level.

Here is the page for viewing: https://www.swahiliwholesale.com/collections/african-garden-art

The very first product: ZIMA1C, the last 2 variants are currently sold out. And if you scroll down, you will see OAK2E, which has no variants, the button is red, but still says Add To Cart. Now, the button does not actually add the items to the cart if sold out, we just want it to read "Sold Out" if it is sold out.

We have a dummy login to view the buttons and prices:
Email: swahili.imports@gmail.com
Password: guestdeveloper

And the code:

{% if product.available %}
{% for col in product.collections %}
{% if col.handle == 'new' %}
<div class="new icn">{{ 'products.general.new' | t }}</div>
{% endif %}
{% if col.handle == 'coming soon' %}
<div class="new icn">{{ 'products.general.coming-soon' | t }}</div>
{% endif %}
{% endfor %}
{% if product.price < product.compare_at_price %}
<div class="sale-item icn">{{ 'products.general.sale' | t }}</div>
{% endif %}
{% else %}
<div class="so icn">{{ 'products.general.sold' | t }}</div>
{% endif %}
</div>
</a>

{% unless current_variant.available %}
<span class="btn__text sold_out_product"> {% assign call_to_action = 'products.product.sold_out' | t %}</span>
{% else %}
{% endunless %}

<div class="product-info">
{% if settings.quickview and settings.display_options != 'show-content' and template != 'search' %}
<a rel="nofollow" data-fancybox="quick-view" class="fancybox.ajax product-modal" href="{{ product.url }}?view=quick">{{ 'products.general.quick_view' | t }}</a>
{% endif %}

<a href="{{ product.url | within: collection }}">
{% if settings.vendor %}
<p><em>{{ product.vendor }}</em></p>
{% endif %}
<div class="prod-title">{{ product.title }}</div>
</a>

<b>
{% assign current_variant = product.selected_or_first_available_variant %} <span class="variant-sku">{{ current_variant.sku }}</span>
</b>

{% render 'product-price', variant: current_variant, product: product %}



{% assign call_to_action = 'products.product.add_to_cart' | t %}
{% form 'product', product, id: "AddToCartForm", class: "product_form", data-product-form:product_form_config, data-product-id: product.id %}
{% render 'product-json', product: product, section_id: section.id %}
{% if product.options.size > 1 %}
<div class="select" {% if product.variants.size == 1 or section.settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
<select id="{{ section.id }}-product-select-{{ product.id }}" name='id'>
{% for variant in product.variants %}
<option value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
{{ variant.title }}


- {{ variant.price | money }}

{% endcapture %} {% if show_prices == 'true' %} {{ pricelock_show_84FE1586 }} {% else %} {% endif %}
{%comment%} pricelock_end_84FE1586 {% endcomment %}


</option>
{% endfor %}
</select>
</div>
{% elsif product.options.size == 1 and product.variants.size > 1 %}
<div class="select" {% if product.variants.size == 1 or section.settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
<label>{{ product.options[0] }}</label>
<select id="{{ section.id }}-product-select-{{ product.id }}" name='id'>
{% for variant in product.variants %}

<option data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
{{ variant.title }}


- {{ variant.price | money }}

{% endcapture %} {% if show_prices == 'true' %} {{ pricelock_show_6C606CB4 }} {% else %} {% endif %}
{%comment%} pricelock_end_6C606CB4 {% endcomment %}


</option>
{% endfor %}
</select>
</div>
{% if section.settings.product_variants == 'swatches' %}
{% for option in product.options_with_values %}
{% render 'swatch',
option: option,
product: product,
color_swatch_style: section.settings.color_swatch_options,
current_variant: current_variant %}
{% endfor %}
{% endif %}
{% else %}

<div class="what-is-it">
{% if product.options.first != 'Title' %}
<label>{{ product.options.first }}:</label>
{% for variant in product.variants %}
<span class="it-is">{{ variant.option1 | escape }}</span>
{% endfor %}
{% endif %}
</div>
<div class="product-variants"></div><!-- product variants -->
<input type="hidden" id="{{ variant.id }}" name="id" data-sku="{{ variant.sku }}" value="{{ product.variants[0].id }}" />
{% endif %}

{% if section.settings.show_sku %}
<div class="clear"></div>
<div class="sku">
<label style="line-height: 1.6em; display: inline-block;">{{ 'customer.order.details.sku' | t }}:</label> <span class="variant_sku">{{ current_variant.sku }}</span>
</div><div class="clear"></div>
{% endif %}


<div class="product-add">


<div class="quantity">
<input id="quantity" min="1" type="number" name="quantity" value="1" id="quantity_{{ item.variant.id }}" value="{{ item.quantity }}" onfocus="this.select();" />

</div>
{% if section.settings.show_quantity %}
<label for="quantity">{{ 'products.product.quantity' | t }}</label>
<input min="1" type="number" id="quantity" name="quantity" value="1" />

{% endif %}



<input type="submit" name="button" class="add clearfix AddtoCart{% if section.settings.show_payment_button %} secondary-button{% endif %} {% unless current_variant.available %} sold-out-background{% endunless %}" value="{{ call_to_action }}" {% unless current_variant.available %}disabled{% endunless %} />
{% if section.settings.show_payment_button %}
{{ form | payment_button }}
{% endif %}

{% endcapture %} {% if show_prices == 'true' %} {{ pricelock_show_DAB23274 }} {% else %} {% endif %}
{%comment%} pricelock_end_DAB23274 {% endcomment %}

{% endform %}
</div>


</div>

Any help is greatly appreciated. Thanks in advance!

Sincerely,

Todd Bradford

 

0 Likes