Them nủt so sánh cho woocommerce năm 2024

Trong bài này mình sẽ chỉ ra 2 cách để có thể thêm nút tăng giảm số lượng sản phẩm khi thêm vào giỏ hàng trong woocommerce đó là dùng plugin và dùng code (phương pháp này cho bạn nào không thích cài nhiều plugin)

Mặc định input quantity của woocommerce sẽ không được style và nhìn không được đẹp mắt cho lắm. Chúng ta cùng làm cho nó đẹp hơn nhé.

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

• Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
• Tino hosting
• iNet
• Nước ngoài thì Vultr

Nội dung bài:

• Thêm nút tăng giảm số lượng bằng plugin
• Thêm nút tăng giảm số lượng bằng code trong theme

Thêm nút tăng giảm số lượng bằng plugin

Cách này rất đơn giản bạn chỉ cần cài plugin WooCommerce Quantity Increment vào là được. Link tại đây https://wordpress.org/plugins/woocommerce-quantity-increment/

WooCommerce Quantity Increment

Thêm nút tăng giảm số lượng bằng code trong theme

Nhiều bạn không thích dùng plugin thì có thể dùng cách sau nhanh gọn để có thể style lại cái input đó. Nhưng cách này yêu cầu bạn là người hiểu cách thêm js và css vào theme như nào. Mình sẽ không thể hướng dẫn chi tiết cách thêm vào file nào vì mỗi theme một khác nhé.

Đây là code js bạn cần chèn vào theme. Bạn chèn vào bất kỳ vào file .js nào mà theme đang dùng

/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();

Còn đoạn code css này bạn chèn vào bất kỳ file css nào trong theme mà nó đang chạy ở frontend. Bình thường sẽ là file style.css tại thư mục chính của theme

So sánh sản phẩm cùng chuyên mục, tìm kiếm sản phẩm nhanh chống, chính xác theo đúng danh mục của các sản phẩm đang so sánh. So sánh tên sản phẩm, giá cả, các thuộc tính sản phẩm cũng như thông tin mô tả ngắn.

Sơ lược tính năng chính

• So sánh sản phẩm cùng chuyên mục.
• Reset sản phẩm so sánh nếu khác chuyên mục.
• So sánh tên, giá, thuộc tính sản phẩm…
• Có thể so sánh bất kỳ thông tin gì của sản phẩm như get_post_meta, chúng tôi cung cấp action để bạn có thể get thông tin.
• Lưu lựa chọn so sánh cho lần duyệt web sau.
• Tìm kiếm sản phẩm nhanh chống, chính xác theo đúng danh mục của các sản phẩm đang so sánh.
• Tô vàng từ khóa khi tìm kiếm.
• Tùy chọn và sắp xếp các thuộc tính sản phẩm để so sánh.
• Thêm hoặc bớt sản phẩm so sánh.
• Sticky sản phẩm so sánh tại trang so sánh.

Yêu cầu tối thiểu

• Server có cài ionCube extention
• Phiên bản PHP từ 7.4 hoặc 8.1 8.2
• WordPress phiên bản 5.0 trở lên
• Có sử dụng plugin Woocommerce

Tổng quan

Thêm sản phẩm so sánh vào bộ nhớ

Khách hàng của bạn có thể dễ dàng so sánh sản phẩm ở danh mục, hay trang chi tiết sản phẩm với 1 nút so sánh.

Khi sản phẩm so sánh lớn hơn hoặc bằng 2 thì sản phẩm so sánh sẽ được lưu vào bộ nhớ tạm.

Thêm sản phẩm so sánh vào bộ nhớ

Tìm kiếm sản phẩm so sánh theo danh mục hiện tại

Tìm kiếm và lựa chọn sản phẩm so sánh

Sau khi thêm vào so sánh, plugin sẽ tạm lưu các sản phẩm so sánh và hiện thị ở popup.

Ở popup lưu sản phẩm đang so sánh, khách hàng có thể thêm hoặc xoá sản phẩm so sánh dễ dàng.

Khách hàng có thể tìm kiếm sản phẩm khác cùng danh mục với các sản phẩm đang so sánh.

To vàng từ khoá họ đang tìm, để có thể thấy sản phẩm đang có từ khoá đó.

Chuyển hướng đến trang so sánh sản phẩm

Ngay sau khi chuyển đến trang so sánh, khách hàng có thể xem điểm khác biệt.

Tại trang này khách hàng có thể thêm hoặc xoá các sản phẩm hiện đang được so sánh

So sánh tổng quan sản phẩm

So sánh thuộc tính sản phẩm

Các thông tin so sánh tại trang so sánh sản phẩm

Trang so sánh chi tiết, ở giao diện này khách hàng có thể xem các điểm khác biệt giữa các sản phẩm như: tên , giá, mô tả tổng quan sản phẩm, hoặc thuộc tính sản phẩm.