Monday, June 10, 2024

How to add To cart and custom Quantity Field in Woo commerce with Plus and minus button

 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>

No comments:

Post a Comment

For Professional website contact WEB CODE ADDICT

View this post on Instagram A post shared by WebCodeAddict (@webcodeaddicted)