I am making the WooCommerce quantity field a text field so it looks nicer but I can't figure out how to make the minus button work. The plus button works fine, but I have no idea why the minus button is not working, it just does nothing at all.
Maybe someone more experienced with JS can see my problem here?
jQuery(document).ready(function ($) {
// Containing selector
var parentSelector = $('.quantity');
// If it's on the page
if( parentSelector.length ) {
// Get the original HTML
var numberInputs = parentSelector.html();
// Minus button
var btnLess = '<button class="minus">-</button>';
// Change number to text
var textInputs = numberInputs.replace('type="number"', 'type="text"');
// Plus button
var btnMore = '<button class="plus">+</button>';
// Append it all
parentSelector.append(btnLess + textInputs + btnMore);
// Hide the original
parentSelector.find('input[type="number"]').hide();
// increase or decrease the count
$('.plus, .minus').on('click', function(e) {
e.preventDefault();
var newCounter = $(this).prevAll('input.qty[type="text"]');
var oldCounter = $(this).prevAll('input.qty[type="number"]');
var counterVal = newCounter.val();
if( $(e.target).hasClass('plus') ) {
counterVal++ ;
} else {
counterVal-- ;
}
// Apply to both inputs
newCounter.val(counterVal);
oldCounter.val(counterVal);
});
}
});