WooCommerce plus and minus buttons on cart

Change the WooCommerce default quantity style to the Plus-minus button on your cart page. We need only two steps to achieve this.

1. Paste the below jQuery code on your custom js file

$(function(a){
	a(".woocommerce-ordering").on("change", "select.orderby", function(){
		a(this).closest("form").submit();
	}),
	a("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass("buttons_added").append('<span class="plus"><i class="aep-icon-plus"></span>').prepend('<span class="minus"><i class="aep-icon-minus-sign"></span>'), a("input.qty:not(.product-quantity input.qty)").each(function(){
		var b=parseFloat(a(this).attr("min"));b&&b>0&&parseFloat(a(this).val())<b&&a(this).val(b);
	}),
	a(document).on("click", ".plus, .minus", function(){
		var b=a(this).closest(".quantity").find(".qty"),
		c=parseFloat(b.val()),
		d=parseFloat(b.attr("max")),
		e=parseFloat(b.attr("min")),
		f=b.attr("step");c&&""!==c&&"NaN"!==c||(c=0),
		(""===d||"NaN"===d)&&(d=""),
		(""===e||"NaN"===e)&&(e=0),
		("any"===f||""===f||void 0===f||"NaN"===parseFloat(f))&&(f=1),
		a(this).is(".plus")?b.val(d&&(d==c||c>d)?d:c+parseFloat(f)):e&&(e==c||e>c)?b.val(e):c>0&&b.val(c-parseFloat(f)),
		b.trigger("change");
		});
});

2. Paste the below CSS code on your style.css

.quantity .qty {
    padding: 0;
    width: 20%;
    min-width: 30px;
    max-height: 24px;
    text-align: center;
    border: 0;
    color: #282828;
    outline: 0;
    -webkit-appearance: none;
    background: transparent;
    -moz-appearance: textfield;
}
.quantity.buttons_added{
    font-size: 12px;
    font-weight: 700;
}
span.plus, span.minus {
    cursor: pointer;
    border-radius:50%;
    padding:7px;
    width:40px;
    height:40px;
}
span.plus:hover, span.minus:hover{
    background:#ddd;
}
.actions .button:hover{
   color:#111 !important
}

and done! Now your cart page quantity looks like given screenshot.