Change WooCommerce number input ( Quantity ) to use custom styles using JavaScript. This can be used for any number field with the step attribute.

number-input-tweak.js

// Nominate the containing selector
var parentSelector = $('.quantity');
// If it's on the page
if( parentSelector.length ) {

	// Get the original HTML
	var numberInputs = parentSelector.html();
	// Change number to text
	var textInputs = numberInputs.replace('type="number"', 'type="text"');
	// Plus button
	var btnMore = '<button class="more">+</button>';
	// Minus button
	var btnLess = '<button class="less">-</button>';
	// Append it all
	parentSelector.append(textInputs + btnMore + btnLess);
	// Hide the original
	parentSelector.find('input[type="number"]').hide();

	// increase or decrease the count
	$('.more, .less').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('more') ) {

			counterVal++ ;

		} else {

			counterVal-- ;
		}

		// Apply to both inputs
		newCounter.val(counterVal);
		oldCounter.val(counterVal);
	});
}