Code tùy biến badge giảm giá hiển thị số tiền tiết kiệm trong Flatsome

Bài viết này mình sẽ hướng dẫn bạn cách tùy biến badge giảm giá hiển thị số tiền tiết kiệm trong Flatsome nhé.

Khách lướt shop thấy badge giảm giá chỉ ghi “Sale!” thì không biết mình tiết kiệm được bao nhiêu tiền, mà con số cụ thể như “Tiết kiệm 120.000₫” thì thuyết phục hơn hẳn một chữ Sale chung chung. Flatsome mặc định chỉ hiện chữ “Sale!” trên badge, muốn badge hiện số tiền tiết kiệm thì bạn phải code thêm nhé.

Thêm code badge 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 Flatsome 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
add_filter('woocommerce_sale_flash', 'nn_flatsome_badge_tiet_kiem', 20, 3);
function nn_flatsome_badge_tiet_kiem($html, $post, $product) {
    if (!is_a($product, 'WC_Product')) {
        return $html;
    }
    $tien = nn_flatsome_tien_tiet_kiem($product);
    if ($tien <= 0) {
        return $html;
    }
    $nhan = 'Tiết kiệm ' . number_format($tien, 0, ',', '.') . '₫';
    return '<div class="badge-container absolute left top z-1"><div class="callout badge badge-circle nn-badge-tiet-kiem"><div class="badge-inner secondary on-sale"><span class="onsale">' . esc_html($nhan) . '</span></div></div></div>';
}

function nn_flatsome_tien_tiet_kiem($product) {
    if ($product->is_type('variable')) {
        $gia = $product->get_variation_prices();
        $lon_nhat = 0;
        foreach ($gia['regular_price'] as $key => $gia_goc) {
            $gia_goc = (float) $gia_goc;
            $gia_km = (float) $gia['sale_price'][$key];
            if ($gia_goc > 0 && $gia_km > 0 && $gia_goc > $gia_km) {
                $tiet_kiem = $gia_goc - $gia_km;
                if ($tiet_kiem > $lon_nhat) {
                    $lon_nhat = $tiet_kiem;
                }
            }
        }
        return $lon_nhat;
    }
    if ($product->is_type('grouped')) {
        return 0;
    }
    $gia_goc = (float) $product->get_regular_price();
    $gia_km = (float) $product->get_sale_price();
    if ($gia_goc > 0 && $gia_km > 0 && $gia_goc > $gia_km) {
        return $gia_goc - $gia_km;
    }
    return 0;
}

Code trên móc vào filter woocommerce_sale_flash với độ ưu tiên 20 để chạy sau phần xử lý badge của Flatsome. Hàm nn_flatsome_tien_tiet_kiem() tính số tiền tiết kiệm bằng giá gốc trừ giá khuyến mãi: với sản phẩm đơn giản thì tính trực tiếp, với sản phẩm có biến thể thì duyệt qua từng biến thể bằng get_variation_prices() và lấy mức tiết kiệm lớn nhất, còn sản phẩm nhóm thì giữ nguyên badge gốc. Số tiền được định dạng kiểu Việt Nam bằng number_format() rồi đưa vào badge theo đúng khung badge của Flatsome, nên badge mới vẫn nằm đúng vị trí cũ trên ảnh sản phẩm.

Đổi badge tròn thành viên thuốc bằng CSS

Badge tròn mặc định của Flatsome chỉ chứa vừa chữ ngắn như “Sale!” hay “-20%”, còn dòng “Tiết kiệm 120.000₫” thì dài hơn nhiều nên bạn cần thêm đoạn CSS dưới vào Tùy biến → CSS bổ sung để badge giãn thành hình viên thuốc nhé.

.callout.badge.nn-badge-tiet-kiem,
.callout.badge.nn-badge-tiet-kiem .badge-inner {
    width: auto !important;
    height: auto !important;
    border-radius: 999px;
    white-space: nowrap;
}
.callout.badge.nn-badge-tiet-kiem .badge-inner {
    padding: 7px 14px;
}

Lưu ý khi dùng

Badge mới chỉ đổi trên sản phẩm đang giảm giá, sản phẩm không giảm giá thì không có badge nên không thay đổi gì. Với sản phẩm có nhiều biến thể giảm giá khác nhau thì badge hiện mức tiết kiệm lớn nhất trong các biến thể, khách chọn biến thể khác thì số tiền thực tế có thể thấp hơn, bạn nhớ ghi rõ trong phần mô tả nếu shop hay giảm giá lệch nhau giữa các biến thể. Nếu shop bạn đang dùng thêm plugin badge khác thì filter này có thể bị đè, lúc đó bạn cần tắt badge của plugin đó đi.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã tùy biến badge giảm giá hiển thị số tiền tiết kiệm trong Flatsome rồi nhé. Tính năng này đi chung với bài code hiển thị số lượng đã bán trên trang sản phẩm trong Flatsome và bài code thêm thanh tiến trình miễn phí vận chuyển trong Flatsome là thành combo tăng tỉ lệ chốt đơn khá tốt cho trang sản phẩm.

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