Variable Product – Back order not allowed – Checkout permits increase in Qty

Hi Sir,

Thanks for open the issue.
Released new update with the validation fix in checkout.

@moiseh

I updated to Version: 1.0.32 but I am still facing the issue reported by me.

Can you please recheck?

Thanks

Hi,

Checked here and seems to work in my end using Chromium browser + Flatsome.

To clarify, it’s still allow to add a higher number, but when click in “Place order” now the frontend validation is applied blocking the order until the value is correct.

Try to refresh the JS cache it may help.

@moiseh

Thank you for your reply.

To clarify, it’s still allow to add a higher number, but when click in “Place order” now the frontend validation is applied blocking the order until the value is correct.

I find that the above behavior will confuse the customer.

I am using the below code to manipulate the browser message:

add_action( 'wp_enqueue_scripts', 'isa_wc_max_qty_scripts', 9999 );
function isa_wc_max_qty_scripts() {
    /* Add JS to frontend wherever woocommerce.js is loaded. */
    wp_add_inline_script( 'woocommerce', 'window.onload = function(){
        function onBlurHandler( event ) {
            var max = this.getAttribute( "max" );
            if ( this.validity.rangeOverflow ) { 
                message = this.value + " is too many. You can order up to " + max + ".";
                this.setCustomValidity( message );
            } else {
                this.setCustomValidity("");
            }
        }
        var quantity = document.querySelector( "form.cart .qty" );
        var cartQuantity = document.querySelector( "form.woocommerce-cart-form .qty" );
        if ( quantity ) { // quantity input on single product page
            quantity.addEventListener( "blur", onBlurHandler, false );
        }
        if ( cartQuantity ) { // quantity input on cart page
            cartQuantity.addEventListener( "blur", onBlurHandler, false );
        }
        };'
    );
}

Can you please guide me on the equivalent code to target this quantity on the checkout page?

        if ( cartQuantity ) { // quantity input on cart page
            cartQuantity.addEventListener( "blur", onBlurHandler, false );

Thanks

To catch also in checkout you can change the code like this:

if ( document.querySelector( "form.checkout .qty" ) !== null ) {
				var quantity = document.querySelector( "form.checkout .qty" );
				var inputQuantity = document.querySelector( "form.woocommerce-checkout .qty" );
			}
			else {
				var quantity = document.querySelector( "form.cart .qty" );
				var inputQuantity = document.querySelector( "form.woocommerce-cart-form .qty" );
			}
			
			if ( quantity ) {
				quantity.addEventListener( "blur", onBlurHandler, false );
			}
			if ( inputQuantity ) {
				inputQuantity.addEventListener( "blur", onBlurHandler, false );
			}

`

@moiseh

Thank you for going out of your way to try to help me.

I am not a programmer and I am unable to understand exactly HOW to use the code snippet provided by you.

Can you please help me by merging your code with mine so that I can use this on all pages? Product, Cart & checkout?

Thanks a lot!

Hi,

Accordingly to your first snippet, this would be the merge to work in checkout and cart.

It’s not fully tested and i not guarantee it work in all cases. If you want more paid support please ping me in https://pluggablesoft.com/contact , as this issue is not more related with the plugin.

Thanks

add_action( 'wp_enqueue_scripts', 'isa_wc_max_qty_scripts', 9999 );
function isa_wc_max_qty_scripts() {
    /* Add JS to frontend wherever woocommerce.js is loaded. */
    wp_add_inline_script( 'woocommerce', 'window.onload = function(){
        function onBlurHandler( event ) {
            var max = this.getAttribute( "max" );
            if ( this.validity.rangeOverflow ) { 
                message = this.value + " is too many. You can order up to " + max + ".";
                this.setCustomValidity( message );
            } else {
                this.setCustomValidity("");
            }
        }

        if ( document.querySelector( "form.checkout .qty" ) !== null ) {
			var quantity = document.querySelector( "form.checkout .qty" );
			var inputQuantity = document.querySelector( "form.woocommerce-checkout .qty" );
		}
		else {
			var quantity = document.querySelector( "form.cart .qty" );
			var inputQuantity = document.querySelector( "form.woocommerce-cart-form .qty" );
		}
		
		if ( quantity ) {
			quantity.addEventListener( "blur", onBlurHandler, false );
		}
		if ( inputQuantity ) {
			inputQuantity.addEventListener( "blur", onBlurHandler, false );
		}
        };'
    );
}