I want to notify customer when ALLOW OVERSELLING IN ON

[CPHAGEN_Nordic]

Hi community,

My website is https://cphagen.com/ and uses Cascade.

I need a solution to display a little text below "add to cart" when "Continue selling when out of stock" is activated and the item is not in stock (0 in inventory).

This would help us clarify the situation with our customers by, for example, suggesting that a longer period for delivery might be applied.

Can anyone help me?

Thank you all. 

[IanDesign · Accepted solution]

Hi CPHAGEN_Nordic,

That's because the code you are trying to use has an error in it. Use this instead:

{% if current_variant.inventory_policy == 'continue' and current_variant.inventory_quantity == 0 %}
 <div class="mt1">
   <p>Out of stock - Delivery time may be longer</p>
 </div>
{% endif %}

I put a <div> with the class "mt1" around the message so there is some margin between message and add to cart button. You should probably also use the same styles that you use for the inventory message when a product is in stock so the design is consistent. To do that replace the <p></p> tags with <h4></h4>.

Also, see image below showing where to put the code – the new code is in the green box, put it after the code in the red box to show message under the add to cart button. I haven't seen your product__top-section.liquid file but I assume you'll have code in there the same as or similar to the code in the red box.

 

Hope that helps and and if I get some time a little later, I'll message you about the other issue you have.

Thanks!

Ian

[Weaverse]

Hi @CPHAGEN_Nordic 

You can try to use this code to display a message when "Continue selling when out of stock" is activated and the item is not in stock:

{% if variant.inventory_policy == "continue" and variant.inventory_quantity == 0 %}
<p>Out of stock - Delivery time may be longer</p> 
{% endif %}

This will check if the inventory policy is set to "continue" and if the inventory quantity is 0, and if so, it will display the message "Out of stock - Delivery time may be longer" below the "add to cart" button.

Let me know if you have any other questions!

[CPHAGEN_Nordic]

Hello @Weaverse !  🙂 

Thank you very much for your answer.

Can you please tell me where to introduce this code?

I will try it once I know where to copy that 🙂

Thank you again!

Good day

[Weaverse]

Hi @CPHAGEN_Nordic 

The code should be added to the relevant section of your theme where the product details are rendered. In some cases, this might be in the product.liquid file, but it could also be in a section or another template file, depending on your theme's structure. You can try to search for the "add to cart" button code in your theme's files and add the above code below it.

I hope this helps.

[CPHAGEN_Nordic]

Not really, I am afraid 😞

@ExpertRookie maybe can help on this?

Thank you!!!

[IanDesign]

Hey CPHAGEN,

In Cascade, you would add the code to the add-to-cart-button.liquid file, which is in the "Snippets" folder of the theme code.

Screenshot below showing the file.

Good luck!

Ian 

[CPHAGEN_Nordic]

Hi!

I do not have add-to-cart-button.liquid.

I really don't know where to paste this.

Thanks for your message! 🙂 

[IanDesign]

Hi,

You must be using an older version of Cascade. It's changed a fair bit over the last 3 years but if you have a product__top-section.liquid file in the snippets folder you would add the code in there.

If you've got that file look for the <div> with the "add-to-cart-container" class, and the <button> inside that. Code might look like this:

 <div class="add-to-cart-container mt3 {% unless current_variant.available %}hide-pay-buttons{% endunless %}  {% if enable_payment_button %}cta-content--pay-buttons{% endif %}" data-add-to-cart-container>
                <button
                  class="btn border--none btn--add-to-cart relative color-scheme--{{ section_color }} {% if enable_payment_button %}bg--transparent color--{{ section_color }}-text border--{{ section_color }}-text hv--{{ section_color }}-accent hv--border--{{ section_color }}-accent {% else %}border--none bg--{{ section_color }}-text color--{{ section_color }}-text--overlay hover-bg--{{ section_color }}{% endif %} p1 full--w block"
                  type="submit"
                  name="add"
                  id="AddToCart--{{ module_id }}"
                  data-add-to-cart
                  {% unless current_variant.available %}disabled="disabled"{% endunless %}>
                    <span class="add-to-cart-text" data-add-to-cart-text>
                      {% if current_variant.available %}
                        {{ 'products.product.add_to_cart' | t }}
                      {% else %}
                        {{ 'products.product.sold_out' | t }}
                      {% endif %}
                    </span>
                    {%- unless settings.open_modal_on_add_to_cart  %}
                    <div class="spinner {% if enable_payment_button %}color--{{ section_color }}-text{% else %}color--{{ section_color }}-background{% endif %}"></div>
                    {%- endunless -%}
                </button>
                {% if enable_payment_button %}
                  <div class="mt2 payment-button-wrapper color--{{ section_color }}">{{ form | payment_button }}</div>
                {% endif %}
              </div>

Hope that helps!

[CPHAGEN_Nordic]

Hi @IanDesign ,
Unfortunately, it is not working.
Thanks for your help anyway.

Maybe you can help me with this?
https://community.shopify.com/c/shopify-design/conflict-with-sorting-and-filtering-products-on-mobil... 

Good day

[IanDesign · Accepted solution]

Hi CPHAGEN_Nordic,

That's because the code you are trying to use has an error in it. Use this instead:

{% if current_variant.inventory_policy == 'continue' and current_variant.inventory_quantity == 0 %}
 <div class="mt1">
   <p>Out of stock - Delivery time may be longer</p>
 </div>
{% endif %}

I put a <div> with the class "mt1" around the message so there is some margin between message and add to cart button. You should probably also use the same styles that you use for the inventory message when a product is in stock so the design is consistent. To do that replace the <p></p> tags with <h4></h4>.

Also, see image below showing where to put the code – the new code is in the green box, put it after the code in the red box to show message under the add to cart button. I haven't seen your product__top-section.liquid file but I assume you'll have code in there the same as or similar to the code in the red box.

 

Hope that helps and and if I get some time a little later, I'll message you about the other issue you have.

Thanks!

Ian

[CPHAGEN_Nordic]

YESSSSS!!! 🙂
It worked.

Thank you so much.

[CPHAGEN_Nordic]

@IanDesign 

To be honest, I notice a problem now.

IF a specific variant has inventory >0 , the text is shown anyway.

It seems that your suggested code is more product-related than variant-related?

Any way to solve this and make it perfect? 🙂

Thanksss!!!

[IanDesign · Accepted solution]

@CPHAGEN_Nordic 

Oh you want to display the message depending on the variant selected. This gets a little more complicated because you need to reload the page when a different variant is selected. But it can be done.

•  First - Add class "refresh-button" to variant selector. Scroll up a bit from from where you added the other code, see screenshot below for the spot:

 

• Next, paste this script at the bottom of the product__top-section.liquid file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($){
  $(".refresh-button").on("change", function(){
  var refreshint = setInterval(function(){
  location.reload();
  }, 1000); }); });
</script>

Now try choosing different variants on your product page, page should reload when doing so. If it works, then I'll mail you one extra step that will just tidy up the bottom of the product__top-section.liquid file. It's not necessary, just a bit of housekeeping.

Hope it works for you!

Ian

[CPHAGEN_Nordic]

Worked like a charm!

Even if it's a bit slower now 🙂

Thank you so much!!!

[fonefunshop]

i am realy struggling to get this to work, i hope you can help me please?

i have products on 0 stock

these products have the "Continue selling when out of stock" option ticked

here is an example

https://www.fonefunshop.com/products/tsop48-u02482-socket-adapter-for-up-828?_pos=1&_sid=f292996c8&_...

i have Dawn template

i couldnt find the templates you mentioned in my theme via the edit code section

so i added the code by using the edit teplate feature, and added a liquid code section just above the quantity selecter section

it doesnt display the message, if i put ssome plain text in this section it displays that ok, so i have the right spot

any help is appreciated, as im tearing my hair out 😞