Goal: Prevent customers from exceeding available stock and avoid showing the “You can’t add…” error by disabling further quantity increases (e.g., greying out the plus button).
Proposed solutions:
Other points:
Current status/outcome:
Now customers can add as many as they want and then getting this message: You can’t add xxx to the cart.
I do not want this message. I just want that they are not able to exceed the available stock quantity.
example: https://phoeniciangoods.fi/collections/soap/products/orange-cinnamon-soap
Hello @nadatouma ,
Yes it’s possible but need lot of customization or you can say it need customization in all the places where you are using quantity selector.
Idea is you have to get the product availability on initial load and variant change. Now use this availability with JS and set validation inside the JS so customer can’t add to cart more than tha availability.
There is one another step where you have to read the cart items and do another validation so customer can’t add more items aging by visiting product page.
Thanks
Yes what you are saying is complicated. I should be a simple coding. I found one time how to edit the code in one place but cannot find it now.
One suggestion for you is to check the language editor and see if this message can be found there. What theme are you using? To clarify, you are only looking to change the wording of the message that appears, is that correct? Here’s how you can search within the language editor:
Let me know how this goes! If you can’t find it there, it will require more knowledge of coding your theme, which is beyond my scope of support. Hopefully another user in the Community will be able to locate the place within your code. Otherwise, you can always hire a Shopify Expert to help you with this change!
Hello, thank you for the answer but no. I am looking for changing the message. I want to grey out the plus that they cannot add more than the available quantity. I DO NOT want them to get any message. I never said i want to change the message
Thanks for the clarification! I understand now. Unfortunately, this request is outside my scope of support. Hopefully another Community user will be able to assist you with the required custom coding to make this possible. Otherwise, as I mentioned, you can always hire a Shopify Expert to assist you with the changes.
Best of luck!
Hi!
To remove the + indicator on the product and/or product in cart (two different locations), you’ll need to go into the code and remove that specific button. This DOES NOT prevent them from typing in a manual number -or- linking it back to your back office product inventory count.
Follow these steps:
From your Shopify admin head to Online store > Themes.
Next to your current theme, Click Actions > Edit code.
Expand, “Sections”.
Scroll down and select, "main-cart-items.liquid"
You will look for the code specifically for the “quantity increase input button”.
The code will start with .
Below that is the code for increase & decrease. You will want to delete the button code specifically for the increase only:
{{ ‘products.product.quantity.increase’ | t: product: item.product.title | escape }}
{% render ‘icon-plus’ %}
You have to make sure that you only delete that button and not the whole section. Shopify does save all of your previous versions so you can select an old version if you do mess up.
Repeat this same step under “main-product.liquid” if you want to remove the plus button option in the shopping for products section.
This trick has helped me prevent people from adding more than one of each item to their cart to purchase. Hope that helps!
Hello and thank you for the reply.
I cannot find that under sections.
What you want is to add the attributes “max” and “data_max” to the input in main-product.liquid like this:
...
<input
class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
data-cart-quantity="{{ cart_qty }}"
data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
...
**data-max="{{product.selected_or_first_available_variant.inventory_quantity}}"**
**max="{{product.selected_or_first_available_variant.inventory_quantity}}"**
...
This solution worked like a charm for me! Appreciate it.
Does anyone know of an app that does this? The problem with inserting code like this is that my theme (Dawn) always has updates that erase any custom code that was added each time I have to do an update. It gets very tedious having to re-apply custom codes all the time.
Hello Nadatouma,
I am looking for the same solution. Did you find a way to solve the problem?
If there is a video explaining the method, I would be grateful to you
No. And I left Shopify.
Hello i have tried implementing this to my code