How do I add a custom WooCommerce quantity button?

add_action( 'woocommerce_after_add_to_cart_quantity', 'ts_quantity_plus_sign' );
 
function ts_quantity_plus_sign() {
   echo '<button type="button" class="plus" >+</button>';
}
 
add_action( 'woocommerce_before_add_to_cart_quantity', 'ts_quantity_minus_sign' );
function ts_quantity_minus_sign() {
   echo '<button type="button" class="minus" >-</button>';
}
 
add_action( 'wp_footer', 'ts_quantity_plus_minus' );
function ts_quantity_plus_minus() {
   if ( ! is_product() ) return;
   ?>
   <script type="text/javascript">
          
      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>
   <?php
}
.woocommerce .quantity input[type=number]::-webkit-inner-spin-button, 
.woocommerce .quantity input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none !important;
	display: none;
	opacity: 0;
	margin: 0;
	-moz-appearance: textfield !important;
}
.woocommerce .quantity input[type=number] {
	-moz-appearance: textfield !important;
}
.woocommerce .quantity .qty {
    width: 3em !important;
	font-size: 1.4em;
	height: 50px !important;
}
.woocommerce .quantity .qty:focus {
	border-radius: 0px !important;
	outline: none !important;
}
.woocommerce div.product form.cart div.quantity {
    margin: 0px !important;
}
.elementor-add-to-cart .plus,
.elementor-add-to-cart .minus {
	font-size: 2em!important;
    height: 50px;
    width: 30px;
    padding: 0px !important;
	margin: 0px !important;
	border-radius: 0px !important;
}
.elementor-add-to-cart .plus:focus,
.elementor-add-to-cart .minus:focus {
	border-radius: 0px !important;
	outline: none !important;
}
.elementor-add-to-cart .plus:focus-visible,
.elementor-add-to-cart .minus:focus-visible {
	border-radius: 0px !important;
	outline: none !important;
}
.single-product div.product form.cart .quantity {
    float: none;
    margin: 0;
    display: inline-block;
}
Without cookies
This website does not use cookies or tracking. More information can be found in the privacy policy.