Have a 'sold out' and 'temporarily not available' possibility

Anne-Marieke
Excursionist
40 1 4

Hi everyone,

I would like to have two different 'sold out' messages when inventory of a product reaches 0. 
One to say 'sold out' and one to say 'temporarily not available', so our customers know when they come back in a week or so, the product is back on stock. 

I found this method for Supply theme:

I'm going to share how I Changed 'Sold Out' to 'Coming Soon' but only for certain products when inventory is zero

I am using the supply theme

1) for each product I wanted to display as coming soon I made sure I added the product type as Coming Soon when setting up the product

2) modified the code in 2 files

product-list-item.liquid and product-grid-item.liquid

the change to both files is the same

replace

{% if sold_out %}
<div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
{% endif %}

with

{% if sold_out and product.type != "Coming Soon"%}
<div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
{% elsif sold_out and product.type == "Coming Soon" %}
<div class="badge badge--sold-out"><span class="badge-label">{{ product.type }}</span></div>
{% endif %}

so above code checks if a product is sold out(inventory is zero) and the product type is not the product type Coming Soon -- displays Sold Out

if a product is sold out and if the product type is Coming Soon - displays the product type -- which in this case is Coming Soon

also make sure inventory tracking in enabled for your products as Sold out or coming soon are only displayed if the inventory is zero for your product

 

Which seems like a nice solution. Only I can't get this working on my Debut theme, since some coding is different. 

Is there someone willing to help me translate this solution for Debut? I have already created a product type that is called 'uitverkocht' (Dutch for sold out).

My store URL is www.bickerykerst.nl
You need an account to see prices and add items to your account, let me know if you created one, then I can 'approve' your account.

Thank you in advance, let me know if you need more information.

 

Replies 7 (7)
marcoswata
Shopify Partner
118 10 30

Theme -> Edit Code.

Open snippets/product-price-listing.liquid

Find the code below, near the bottom of the file:

<span class="price__badge price__badge--sold-out">
<span>{{ 'products.product.sold_out' | t }}</span>
</span>

And replace it with:

{%- assign sold_out = true-%}
{%- if product.available -%}
  {%- assign sold_out = false -%}
{%- endif -%}

<span class="price__badge price__badge--sold-out">
{% if sold_out and product.type != "uitverkocht" %}
<span>{{ 'products.product.sold_out' | t }}</span>
{% else %}
<span>{{  product.type }}</span>
{% endif %}
</span>



If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
Anne-Marieke
Excursionist
40 1 4

Thank you marcoswatanabe!

That worked.

I've changed the code in product-price.liquid as well to show the text on the product page too. However, the button keeps the text 'tijdelijk geen voorraad' (temporarily not available).
Could you point me to the direction where I can change the text of the button in the same manner?

Screenshot 2021-10-25 at 09.19.45.png   Screenshot 2021-10-25 at 09.28.51.png

marcoswata
Shopify Partner
118 10 30

Try this if you want to show the product type every time the product is out of stock:

 

{%- assign sold_out = true-%}
{%- if product.available -%}
  {%- assign sold_out = false -%}
{%- endif -%}

<span class="price__badge price__badge--sold-out">
{% if sold_out %}
<span>{{  product.type }}</span>
{% endif %}
</span>

 
If you like the other solution, just go to Online Store -> Themes -> Edit Languages

Then find the out of stock/sold out label and change it to the text you want. See more here.

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
Anne-Marieke
Excursionist
40 1 4

Hi marcoswatanabe,

Thank you for your reply.

I really like the solution that you gave first. This way I can have 'Sold out' for the products that are really sold out and 'temporarily not available' for product that we will be restocking soon.
However, the text on the 'add to cart button' is not changing corresponding to 'sold out' or 'temporarily not available'. See circled in orange and yellow below. The product says 'uitverkocht' (sold out). Which is good, but the button that normally is the 'add to cart' button still shows 'tijdelijk geen voorraad' (temporarily not available). I am looking for the way that this shows 'uitverkocht' too. But only for the product with product type 'Uitverkocht'. Otherwise it can keep saying 'tijdelijk geen voorraad'.

Thank you in advance.

 

Screenshot 2021-10-25 at 09.28.51.png

Anne-Marieke
Excursionist
40 1 4

@marcoswata Do you have any idea about the button?

THSNZ
Visitor
1 0 0

Thankyou for this solution.  For me it is only working on the collection page, and not on the product page.   Is there any way of doing the same thing to the product page?

Arielquezada
Visitor
1 0 0

hey I cant find "product-list-item.liquid and product-grid-item.liquid"