Solved

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

Byavelien
Tourist
5 0 2

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? 

Accepted Solution (1)

sandyparihar07
Shopify Partner
361 50 68

This is an 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! 🙂

Sandeep Parihar | Shopify Partner
- Was my reply helpful? Click Like to let me know!
- I reply you to solve the problem? If solved then tag to solve please
- Hire me, if you want to design, migrate, develop a store, or made any changes to the store.

View solution in original post

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
5069 1206 1470

Hi @Byavelien ,

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

Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


sandyparihar07
Shopify Partner
361 50 68

This is an 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! 🙂

Sandeep Parihar | Shopify Partner
- Was my reply helpful? Click Like to let me know!
- I reply you to solve the problem? If solved then tag to solve please
- Hire me, if you want to design, migrate, develop a store, or made any changes to the store.
Byavelien
Tourist
5 0 2

Hi Sandeep, it worked! Thank you so much!

sandyparihar07
Shopify Partner
361 50 68

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

Sandeep Parihar | Shopify Partner
- Was my reply helpful? Click Like to let me know!
- I reply you to solve the problem? If solved then tag to solve please
- Hire me, if you want to design, migrate, develop a store, or made any changes to the store.
viyona
Visitor
3 0 0

Thank You 
Its properly working

EdgarPateno
Shopify Partner
59 0 5

Hi @sandyparihar07 ,

 

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.