Thêm nút tăng giảm số lượng sản phẩm khi thêm vào giỏ hàng

them_tang_giam.css

/*
web: http://levantoan.com
*/

.woocommerce #quantity input::-webkit-outer-spin-button,
.woocommerce #quantity input::-webkit-inner-spin-button,
.woocommerce #content .quantity input::-webkit-outer-spin-button,
.woocommerce #content .quantity input::-webkit-inner-spin-button, .woocommerce-page #quantity input::-webkit-outer-spin-button,
.woocommerce-page #quantity input::-webkit-inner-spin-button,
.woocommerce-page #content .quantity input::-webkit-outer-spin-button,
.woocommerce-page #content .quantity input::-webkit-inner-spin-button {
	display: none; 
}
.woocommerce .quantity, .woocommerce-page .quantity {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	zoom: 1;
	padding-right: 1.1em;
	display: inline-block;
}
.woocommerce .quantity input.qty, .woocommerce-page .quantity input.qty {
	width: 2.618em;
	height: 2.2em;
	float: left;
	padding: 0;
	margin: 0;
	text-align: center;
	border: 1px solid #bbb3b9;
	border-right: 0;
	font-weight: 700;
	border-radius: 2px 0 0 2px;
	-moz-appearance: textfield;
}
.woocommerce .quantity noindex:-o-prefocus, .woocommerce .quantity input[type=number], .woocommerce-page .quantity noindex:-o-prefocus, .woocommerce-page .quantity input[type=number] {
	padding-right: 1.2em; 
}
.woocommerce .quantity .plus,
.woocommerce .quantity .minus, .woocommerce-page .quantity .plus,
.woocommerce-page .quantity .minus {
	display: block;
	padding: 0;
	margin: 0;
	position: absolute;
	text-align: center;
	width: 1.387em;
	height: 1.12em;
	text-decoration: none;
	overflow: visible;
	text-decoration: none;
	font-weight: 700;
	cursor: pointer;
	color: #515151;
	border: 1px solid #bbb3b9;
	background-color: #ebe9eb;
	text-shadow: none;
	line-height: 1;
	background-image: none; 
}
.woocommerce .quantity .plus:hover,
.woocommerce .quantity .minus:hover, .woocommerce-page .quantity .plus:hover,
.woocommerce-page .quantity .minus:hover {
	background-color: #dad8da; 
}
.woocommerce .quantity .plus, .woocommerce-page .quantity .plus {
	top: 0;
	right: 0;
	border-bottom: 0;
	border-radius: 2px 2px 0 0; 
}
.woocommerce .quantity .minus, .woocommerce-page .quantity .minus {
	bottom: 0;
	right: 0;
	border-radius: 0 0 2px 2px; 
}

them_tang_giam.js

/*Woo button
web: http://levantoan.com
*/
jQuery( function( $ ) {

	if ( ! String.prototype.getDecimals ) {
		String.prototype.getDecimals = function() {
			var num = this,
				match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
			if ( ! match ) {
				return 0;
			}
			return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
		}
	}

	function wcqi_refresh_quantity_increments(){
		$( 'div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)' ).addClass( 'buttons_added' ).append( '<input type="button" value="+" class="plus" />' ).prepend( '<input type="button" value="-" class="minus" />' );
	}

	$( document ).on( 'updated_wc_div', function() {
		wcqi_refresh_quantity_increments();
	} );

	$( document ).on( 'click', '.plus, .minus', function() {
		// Get values
		var $qty		= $( this ).closest( '.quantity' ).find( '.qty'),
			currentVal	= parseFloat( $qty.val() ),
			max			= parseFloat( $qty.attr( 'max' ) ),
			min			= parseFloat( $qty.attr( 'min' ) ),
			step		= $qty.attr( 'step' );

		// Format values
		if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
		if ( max === '' || max === 'NaN' ) max = '';
		if ( min === '' || min === 'NaN' ) min = 0;
		if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;

		// Change the value
		if ( $( this ).is( '.plus' ) ) {
			if ( max && ( currentVal >= max ) ) {
				$qty.val( max );
			} else {
				$qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );
			}
		} else {
			if ( min && ( currentVal <= min ) ) {
				$qty.val( min );
			} else if ( currentVal > 0 ) {
				$qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) );
			}
		}

		// Trigger change event
		$qty.trigger( 'change' );
	});
	wcqi_refresh_quantity_increments();
});

k cho html à