Quantity Box With Add to Cart button
<form class="cart" method="post" enctype="multipart/form-data">
<div class="quantity">
<button type="button" class="minus" >-</button>
<input type="number" step="1" min="1" max="" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
<button type="button" class="plus" >+</button>
</div>
<input type="hidden" name="add-to-cart" value="<?php echo get_the_ID(); ?>">
<button type="submit" class="single_add_to_cart_button button alt shop-button-cart"><i class="fa fa-cart-plus" aria-hidden="true"></i> Add to cart</button>
</form>
Script to make the Minus Plus button work for Quantity box
<script>
jQuery(document).ready(function($){
$('form.cart').on( 'click', 'button.plus, button.minus', function() {
var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
var val = parseFloat(qty.val());
var max = parseFloat(qty.attr( 'max' ));
var min = parseFloat(qty.attr( 'min' ));
var step = parseFloat(qty.attr( 'step' ));
if ( $( this ).is( '.plus' ) ) {
if ( max && ( max <= val ) ) {
qty.val( max );
} else {
qty.val( val + step );
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min );
} else if ( val > 1 ) {
qty.val( val - step );
}
}
});
});
</script>
