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.
