Ecommerce Shopify WordPress Discussion

Shopify Increase and decrease product 2 by 2

I would like that on my shopify product page, the quantity selector adds 2 by 2 or decreases 2 by 2 the quantity sent in the cart. The starting quantity must also be 2. All that I succeeded, but where I block, it is that when we have already clicked on "+" and that we go down to 2, we can still click on "-" which makes us fall to 1 and it distorts everything... How could I make that on the quantity 2 one can no longer click on the "-"? Thank you very much for your help here is my current code: {% if product.tags contains 'Liquidation' and product.type contains 'Chaise' %} <div class="ProductForm__QuantitySelector" {{ block.shopify_attributes }}> {% if block.settings.show_label %} <span class="ProductForm__Label">{{ 'product.form.quantity' | t }}:</span> {% endif %} <div class="QuantitySelector QuantitySelector--large"> <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity" disabled>{% render 'icon' with 'minus' %}</button> <input type="text" id="quantity-input" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="2" aria-label="{{ 'product.form.quantity' | t }}"> <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity">{% render 'icon' with 'plus' %}</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const decreaseButton = document.querySelector('[data-action="decrease-quantity"]'); const increaseButton = document.querySelector('[data-action="increase-quantity"]'); const quantityInput = document.getElementById('quantity-input'); const updateDecreaseButtonState = () => { decreaseButton.disabled = parseInt(quantityInput.value) === 2; }; // Mise à jour initiale de l'état du bouton de diminution updateDecreaseButtonState(); decreaseButton.addEventListener('click', function() { let quantity = parseInt(quantityInput.value); if (quantity > 2) { quantity -= 1; quantityInput.value = quantity; } else { quantity -= 0; quantityInput.value = quantity; } updateDecreaseButtonState(); }); increaseButton.addEventListener('click', function() { let quantity = parseInt(quantityInput.value); quantity += 1; quantityInput.value = quantity; updateDecreaseButtonState(); }); quantityInput.addEventListener('change', function() { let quantity = parseInt(this.value); if (isNaN(quantity) || quantity < 2) { this.value = 2; } else if (quantity % 2 !== 0) { this.value = quantity + (2 - quantity % 2); } updateDecreaseButtonState(); }); }); </script> {% else %} <div class="ProductForm__QuantitySelector" {{ block.shopify_attributes }}> {% if block.settings.show_label %} <span class="ProductForm__Label">{{ 'product.form.quantity' | t }}:</span> {% endif %} <div class="QuantitySelector QuantitySelector--large"> {% assign quantity_minus_one = line_item.quantity | minus: 1 %} <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity">{% render 'icon' with 'minus' %}</button> <input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1" aria-label="{{ 'product.form.quantity' | t }}"> <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity">{% render 'icon' with 'plus' %}</button> </div> </div> {% endif %}
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.