Items shown as 'sold out' - how do i change it?

[Byavelien]

Hi there! Some of my items are being shown as 'sold out' when they are still available in several sizes.

So, my customers can filter on 'in stock' and 'out of stock' and products with different sizes will show up as 'out of stock'. So for example they are still available in S and M but sold out in L. 

Does anyone know if I can somehow adjust it to the items only being shown as sold out, when ALL of the sizes are sold out? 

[Made4uo-Ribe]

Hi @Byavelien ,

What theme you are using? Would you mind to share URL website with password?

Thanks!

[saim007 · Accepted solution]

Hi @Byavelien 

Yeah, this is possible but for that you have to copy and paste code.

To only show the "sold out" button in Shopify when all product variants are out of stock, you have to follow these steps:

1. Log in to your Shopify admin panel and go to the "Online Store" section.

2. Click on "Themes" and then click on "Actions" and select "Edit Code" from the dropdown menu.

3. In the left-hand menu, click on "Sections" and then find and click on "product-template.liquid" or "product.liquid" depending on your theme.

4. Locate the code that generates the "Add to Cart" button for the product variants. It may look something like this:

{% if product.available %}
  <form method="post" action="/cart/add">
    <!-- add to cart button code here -->
  </form>
{% else %}
  <p class="sold-out">Sold Out</p>
{% endif %}

5. Modify the above code to check if all the product variants are out of stock, and only show the "Sold Out" message in that case. You can do this by checking the inventory levels of each variant in the product's variant array, like so:

{% assign all_out_of_stock = true %}
{% for variant in product.variants %}
  {% if variant.inventory_quantity > 0 %}
    {% assign all_out_of_stock = false %}
  {% endif %}
{% endfor %}

{% if all_out_of_stock %}
  <p class="sold-out">Sold Out</p>
{% else %}
  <form method="post" action="/cart/add">
    <!-- add to cart button code here -->
  </form>
{% endif %}

6. Save the changes to the code, and the "Sold Out" message will now only appear when all the product variants are out of stock else it will show Add to Cart button but it will disable.

I hope it will work! 🙂

[Byavelien]

Hi Sandeep, it worked! Thank you so much!

[saim007]

I'm glad to hear that it worked for you. 🙂 Let me know if you need any further assistance.

[viyona]

Thank You 
Its properly working

[EdgarPateno]

Hi @saim007 ,

I hope you can help me.  Below is the ADD TO CART button:

<button
            id="ProductSubmitButton-{{ section_id }}"
            type="submit"
            name="add"
            class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
            {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
              disabled
            {% endif %}
          >
            <span>
              {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                {{ 'products.product.pre_order' | t }}
              {%- else -%}
                {{ 'products.product.add_to_cart' | t }}
              {%- endif -%}
            </span>

            <!-- PLUS ICON -->
            <span class="ps-5"><i class="fa fa-plus" style="font-size:24px"></i></span>

            <div class="loading-overlay__spinner hidden">
              <svg
                aria-hidden="true"
                focusable="false"
                class="spinner"
                viewBox="0 0 66 66"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
              </svg>
            </div>
          </button>

 
If you notice, I changed the SOLD OUT button to PRE-ORDER (pre_order).  However, that button is disabled.  I removed the disabled class, but still it didn't work.  My goal is, I want the pre-order button to be clickable just like the ADD TO CART.