10/7B Mậu Thân, Xuân Khánh,
Ninh Kiều, Cần Thơ

WooCommerce: Thêm nút cộng và trừ số lượng sản phẩm

Mặc định WooCommerce sẽ chỉ hiển thị ô để nhập liệu, việc thêm nút cộng và trừ vào 2 bên ô nhập số lượng sản phẩm, giúp tối ưu trải nghiệm người dùng.

Thêm nút cộng và trừ số lượng sản phẩm

/**
 * Plus Minus Quantity Buttons @ WooCommerce Product Page & Cart
 */
 
/**
 * 1. Show plus minus buttons
 */
add_action('woocommerce_after_quantity_input_field', 'nhutcoder_display_quantity_plus');
function nhutcoder_display_quantity_plus(){
    echo '<button type="button" class="plus">+</button>';
}
 
add_action('woocommerce_before_quantity_input_field', 'nhutcoder_display_quantity_minus');
function nhutcoder_display_quantity_minus(){
    echo '<button type="button" class="minus">-</button>';
}
 
/**
 * 2. Trigger update quantity script
 */
add_action('wp_footer', 'nhutcoder_add_cart_quantity_plus_minus');
function nhutcoder_add_cart_quantity_plus_minus(){
    if (!is_product() && !is_cart()){
        return;
    }
    wc_enqueue_js("   
      $(document).on( 'click', 'button.plus, button.minus', function() {
         var qty = $( this ).parent( '.quantity' ).find( '.qty' );
         var val = parseFloat(qty.val());
         var max = parseFloat(qty.attr( 'max' ));
         var min = parseFloat(qty.attr( 'min' ));
         var step = parseFloat(qty.attr( 'step' ));
         if ( $( this ).is( '.plus' ) ) {
            if ( max && ( max <= val ) ) {
               qty.val( max ).change();
            } else {
               qty.val( val + step ).change();
            }
         } else {
            if ( min && ( min >= val ) ) {
               qty.val( min ).change();
            } else if ( val > 1 ) {
               qty.val( val - step ).change();
            }
         }
      });
   ");
}