Trong thương mại điện tử, từng chi tiết nhỏ trong giao diện người dùng (UI) và trải nghiệm người dùng (UX) đều có thể ảnh hưởng lớn đến tỷ lệ chuyển đổi. Việc thêm nút tăng giảm số lượng sản phẩm trực tiếp vào trường nhập liệu mặc định của WooCommerce, dù là một thay đổi tưởng chừng đơn giản, lại mang đến lợi ích đáng kể trong việc cải thiện tương tác và thúc đẩy quyết định mua hàng. Bài viết này của Tips AI Tech sẽ đi sâu phân tích “tại sao” và “ý nghĩa” của việc tối ưu hóa này, cũng như các phương pháp triển khai hiệu quả.

Tại sao nút tăng giảm số lượng lại quan trọng cho trải nghiệm người dùng?

Mặc định, WooCommerce cung cấp một trường nhập liệu số lượng sản phẩm đơn thuần, thường không được định dạng đẹp mắt và thiếu các nút điều khiển trực quan. Điều này tạo ra một rào cản nhỏ nhưng có thật cho người dùng, đặc biệt là trên thiết bị di động.

Nút tăng giảm số lượng mang lại các giá trị cốt lõi:

• Cải thiện trực quan và dễ sử dụng: Người dùng có thể dễ dàng điều chỉnh số lượng sản phẩm chỉ bằng một cú nhấp chuột hoặc chạm, thay vì phải nhập số thủ công. Điều này đặc biệt quan trọng trên điện thoại di động, nơi việc nhập liệu bằng bàn phím ảo có thể gây khó chịu.
• Giảm ma sát trong quá trình mua hàng: Khi người dùng cảm thấy việc tương tác với trang web đơn giản và mượt mà, họ có xu hướng hoàn tất giao dịch hơn. Ma sát nhỏ cũng có thể dẫn đến việc bỏ giỏ hàng.
• Tăng tính chuyên nghiệp của cửa hàng: Một giao diện được thiết kế tốt, có các thành phần tương tác hiện đại sẽ tạo ấn tượng tốt hơn về thương hiệu và độ tin cậy của cửa hàng.

Plugin hay Code: Lựa chọn nào tối ưu cho bạn?

Có hai phương pháp chính để thêm nút tăng giảm số lượng: sử dụng plugin hoặc tự viết mã. Mỗi phương pháp có những ưu và nhược điểm riêng mà bạn cần cân nhắc.

Plugin: Giải pháp nhanh chóng và tiện lợi

Ưu điểm:

• Dễ triển khai: Chỉ cần cài đặt và kích hoạt plugin như WooCommerce Quantity Increment là bạn có thể có ngay tính năng này. Không yêu cầu kiến thức lập trình.
• Tiết kiệm thời gian: Phù hợp cho những ai cần giải pháp nhanh gọn hoặc không có kinh nghiệm phát triển web.

Nhược điểm và những điều cần lưu ý:

• Phụ thuộc vào plugin: Bạn sẽ phụ thuộc vào nhà phát triển plugin để cập nhật, sửa lỗi và tương thích với các phiên bản WooCommerce hoặc WordPress mới.
• Gánh nặng hiệu suất tiềm ẩn: Mỗi plugin đều thêm một lượng mã nhất định vào trang web của bạn, có thể ảnh hưởng đến tốc độ tải trang nếu có quá nhiều plugin hoặc plugin được viết không tối ưu.
• Thiếu khả năng tùy chỉnh: Các plugin thường chỉ cung cấp một số tùy chọn giới hạn. Nếu bạn muốn giao diện hoặc hành vi cụ thể, plugin có thể không đáp ứng được.

Code: Kiểm soát hoàn toàn và hiệu suất tối ưu

Phương pháp sử dụng code, mặc dù yêu cầu kiến thức kỹ thuật, mang lại kiểm soát tuyệt đối và tối ưu hiệu suất. Đây là lựa chọn được khuyến nghị cho các nhà phát triển hoặc những ai muốn một giải pháp lâu dài, ổn định.

Phân tích mã JavaScript cốt lõi

Đoạn mã JavaScript được cung cấp không chỉ thêm các nút mà còn xử lý logic tăng giảm số lượng một cách thông minh:

/*Woo qty*/
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();
});

• String.prototype.getDecimals(): Đây là một hàm tiện ích quan trọng. Nó giải quyết vấn đề số thập phân trong số lượng (ví dụ: sản phẩm bán theo cân nặng). Bằng cách tính toán số lượng chữ số thập phân, nó đảm bảo kết quả luôn chính xác khi tăng/giảm, tránh các lỗi làm tròn số không mong muốn.
• wcqi_refresh_quantity_increments() và updated_wc_div: Việc gọi hàm wcqi_refresh_quantity_increments() khi sự kiện updated_wc_div được kích hoạt là một điểm mấu chốt. Sự kiện này thường được kích hoạt khi có các cập nhật AJAX trong WooCommerce (ví dụ: thay đổi biến thể sản phẩm, cập nhật giỏ hàng). Điều này đảm bảo rằng các nút tăng giảm luôn được thêm vào các trường số lượng mới hoặc được cập nhật, duy trì tính nhất quán của giao diện.
• Xử lý min, max, step: Mã này tôn trọng các thuộc tính min, max và step của trường nhập liệu. Điều này rất quan trọng để tuân thủ các quy tắc kinh doanh (ví dụ: số lượng tối thiểu, số lượng tối đa trong kho, bước nhảy số lượng cụ thể).

Phân tích mã CSS: Tạo hình thức hấp dẫn

Đoạn mã CSS đi kèm là cần thiết để ẩn các mũi tên mặc định của trình duyệt và tạo kiểu cho các nút tăng giảm, biến chúng thành một phần liền mạch của giao diện:

/*Woo qty*/
.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: 26px;
    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: 14px;
    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;
}

• display: none; cho ::-webkit-outer-spin-button: Đây là dòng quan trọng để loại bỏ các mũi tên tăng giảm mặc định của trình duyệt webkit (Chrome, Safari), cho phép chúng ta thay thế bằng các nút tùy chỉnh.
• position: relative và position: absolute: Đây là kỹ thuật CSS cơ bản để định vị các nút + và - một cách chính xác bên cạnh trường nhập liệu, tạo ra hiệu ứng “nút chồng” gọn gàng.
• Thiết kế tối giản: CSS này cung cấp một thiết kế sạch sẽ, chuyên nghiệp, dễ dàng tùy chỉnh màu sắc, kích thước để phù hợp với bộ nhận diện thương hiệu của bạn.

Bạn có thể xem demo trực tiếp tại đây: http://lasinhviendemoweb.freevnn.com/product/woo-logo-3/

Kết luận

Việc thêm nút tăng giảm số lượng sản phẩm trong WooCommerce không chỉ là một cải tiến về mặt thẩm mỹ mà còn là một chiến lược tối ưu trải nghiệm người dùng có tác động trực tiếp đến tỷ lệ chuyển đổi. Dù bạn chọn giải pháp plugin để nhanh chóng hay tự viết code để kiểm soát hoàn toàn và tối ưu hiệu suất, điều quan trọng là nhận ra giá trị mà sự cải tiến nhỏ này mang lại. Với Tips AI Tech, chúng tôi khuyến nghị phương pháp code cho những ai có khả năng kỹ thuật, nhằm đạt được sự linh hoạt, hiệu suất và khả năng tùy chỉnh tối đa cho cửa hàng của mình.