Customize WooCommerce Quantity Selector

WooCommerce is an open source e-commerce plugin for WordPress. It is designed for small to large-sized online merchants using WordPress. Here is the simple solution for Customize WooCommerce Quantity Selector, please use the following CSS, javascript, Php code.
CSS

input[type="number"] {
    -moz-appearance: textfield;
}

.minus {
    border:none;
    color:#fff;
    background-color:purple;
    height:30px;
    width:30px;
}
.plus {
    border:none;
    color:#fff;
    background-color:purple;
    height:30px;
    width:30px;
}
.qty {
    border:1px solid purple;
    color:purple;
    height:30px;
     
}

javascript

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.quantity').on('click', '.plus', function(e) {
            $input = $(this).prev('input.qty');
            var val = parseInt($input.val());
            $input.val( val+1 ).change();
        });
 
        $('.quantity').on('click', '.minus', 
            function(e) {
            $input = $(this).next('input.qty');
            var val = parseInt($input.val());
            if (val > 0) {
                $input.val( val-1 ).change();
            } 
        });
    });
    </script>

Replace the quantity-input.php file with following code ( path:wp-content\plugins\woocommerce\templates\global\ quantity-input.php)

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
?>
<div class="quantity">
  <input class="minus" type="button" value="-">
  <input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
  <input class="plus" type="button" value="+">
</div>

If you liked our work and effort then please consider to make a kind donation.