Code hiển thị số tiền tiết kiệm được ở giỏ hàng trong WooCommerce

Bài viết này mình sẽ hướng dẫn bạn cách hiển thị số tiền tiết kiệm được ở giỏ hàng trong WooCommerce nhé.

Khách bỏ vài món đang giảm giá vào giỏ mà chỉ thấy tổng tiền phải trả thì không cảm nhận được mình đang hời bao nhiêu, trong khi một dòng “Bạn tiết kiệm 250.000₫” ngay dưới tổng tiền thì khách thấy rõ lợi ích và yên tâm bấm thanh toán hơn. WooCommerce mặc định không hiện tổng số tiền tiết kiệm trong giỏ hàng, muốn có dòng này thì bạn phải code thêm nhé.

Thêm code hiển thị số tiền tiết kiệm

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
// Hiển thị số tiền tiết kiệm được ở giỏ hàng — thêm 1 dòng dưới tổng tiền
add_action('woocommerce_cart_totals_after_order_total', 'nn_woocommerce_tiet_kiem_o_gio_hang');
function nn_woocommerce_tiet_kiem_o_gio_hang() {
    $gio_hang = WC()->cart;
    if (!$gio_hang || $gio_hang->is_empty()) {
        return;
    }
    $tong_tiet_kiem = 0;
    foreach ($gio_hang->get_cart() as $muc) {
        $san_pham = $muc['data'];
        $gia_goc = (float) $san_pham->get_regular_price();
        $gia_km = (float) $san_pham->get_sale_price();
        if ($gia_goc > 0 && $gia_km > 0 && $gia_km < $gia_goc) {
            $tong_tiet_kiem += ($gia_goc - $gia_km) * $muc['quantity'];
        }
    }
    if ($tong_tiet_kiem <= 0) {
        return;
    }
    echo '<tr class="nn-tiet-kiem-gio-hang"><th>Bạn tiết kiệm</th><td data-title="Bạn tiết kiệm">' . wc_price($tong_tiet_kiem) . '</td></tr>';
}

Code trên móc vào hook woocommerce_cart_totals_after_order_total để chèn thêm một dòng vào bảng tổng tiền của giỏ hàng, ngay dưới dòng tổng cộng. Hàm duyệt từng món trong giỏ bằng get_cart(), lấy giá gốc bằng get_regular_price() và giá khuyến mãi bằng get_sale_price(), món nào đang giảm giá thì lấy phần chênh lệch nhân với số lượng rồi cộng dồn vào tổng tiết kiệm. Với sản phẩm có biến thể thì dữ liệu trong giỏ đã là đúng biến thể khách chọn nên số tiền tính đúng theo biến thể đó. Cuối cùng số tiền được in ra bằng wc_price() nên định dạng tiền tệ khớp với cài đặt của shop, và dòng này chỉ hiện khi giỏ có ít nhất một món đang giảm giá, giỏ toàn hàng không sale thì không có gì thay đổi.

Kiểm tra ở trang giỏ hàng

Bạn bỏ một sản phẩm đang giảm giá vào giỏ rồi mở trang giỏ hàng, kéo xuống bảng tổng tiền sẽ thấy thêm dòng “Bạn tiết kiệm” ngay dưới dòng tổng cộng. Thử đổi số lượng món sale lên 2 thì số tiền tiết kiệm tăng gấp đôi theo, còn bỏ hết món sale ra khỏi giỏ thì dòng tiết kiệm biến mất.

Lưu ý khi dùng

Dòng tiết kiệm này chỉ tính tiền giảm do giá sale của sản phẩm, mã giảm giá khách nhập thêm không được cộng vào đây vì WooCommerce đã trừ mã giảm giá vào tổng tiền rồi. Code này chỉ chạy với trang giỏ hàng dạng shortcode cổ điển ([woocommerce_cart]), nếu shop bạn đang dùng Cart block mới của WooCommerce thì hook này không chạy, bạn cần chuyển trang giỏ hàng về dạng shortcode mới dùng được. Muốn đổi chữ “Bạn tiết kiệm” thành câu khác thì bạn sửa chữ trong thẻ th của dòng echo cuối code.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã hiển thị số tiền tiết kiệm được ở giỏ hàng trong WooCommerce rồi nhé. Tính năng này đi chung với bài code thêm đếm ngược khuyến mãi cho sản phẩm trong WooCommerce và bài code tự động áp dụng mã giảm giá khi khách vào link trong WooCommerce là thành combo chốt đơn cho shop đang chạy khuyến mãi khá tốt.

Nếu cần mình kèm 1-1 về WooCommerce thì cứ liên hệ mình nhé.