Code thêm thanh tiến trình miễn phí vận chuyển trong Flatsome

Bài viết này mình sẽ hướng dẫn bạn cách thêm thanh tiến trình miễn phí vận chuyển trong Flatsome nhé.

Khách vào giỏ hàng mà không biết mình còn thiếu bao nhiêu nữa mới được miễn phí vận chuyển thì thường sẽ thanh toán luôn, shop mất cơ hội bán thêm. Flatsome mặc định không có thanh báo tiến trình miễn phí vận chuyển, muốn có thì bạn phải code thêm nhé.

Thêm code thanh tiến trình miễn phí vận chuyển

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.

function nn_flatsome_freeship_progress() {
    if (!function_exists('WC') || !WC()->cart || WC()->cart->is_empty()) {
        return;
    }
    $nguong = 470000;
    $tamTinh = (float) WC()->cart->get_displayed_subtotal();
    if ($tamTinh >= $nguong) {
        $phanTram = 100;
        $noiDung = 'Bạn đã đủ điều kiện miễn phí vận chuyển!';
    } else {
        $phanTram = (int) round($tamTinh / $nguong * 100);
        $conLai = $nguong - $tamTinh;
        $noiDung = 'Mua thêm ' . wc_price($conLai) . ' nữa là được miễn phí vận chuyển.';
    }
    echo '<div class="nn-freeship-progress">';
    echo '<p class="nn-freeship-text">' . wp_kses_post($noiDung) . '</p>';
    echo '<div class="nn-freeship-bar"><span style="width:' . esc_attr($phanTram) . '%"></span></div>';
    echo '</div>';
}
add_action('woocommerce_before_cart', 'nn_flatsome_freeship_progress');

Code trên móc vào hook woocommerce_before_cart nên thanh sẽ tự hiện ở đầu trang giỏ hàng của Flatsome. Nó lấy tạm tính giỏ hàng bằng get_displayed_subtotal(), so với ngưỡng 470.000đ trong biến $nguong rồi tính phần trăm để vẽ thanh và in câu thông báo: chưa đủ thì báo còn thiếu bao nhiêu, đủ rồi thì báo đã đủ điều kiện. Giỏ hàng trống thì code tự không hiện gì, khỏi lo trang giỏ trống bị thừa khối.

Cài đặt miễn phí vận chuyển cho khớp với thanh

Thanh trên chỉ hiển thị tiến trình, còn việc có miễn phí thật hay không là do cấu hình vận chuyển quyết định. Bạn vào WooCommerce → Cài đặt → Vận chuyển, bật phương thức Miễn phí vận chuyển và đặt giá trị đơn hàng tối thiểu đúng 470.000đ cho khớp với số trong code. Muốn đổi ngưỡng thì sửa cả 2 chỗ này cùng lúc, lệch nhau là khách sẽ thắc mắc vì thanh báo đủ điều kiện mà lúc thanh toán vẫn bị tính phí.

Muốn đổi màu thanh thì sửa mã màu #446084 trong đoạn CSS dưới thành màu thương hiệu của shop, rồi dán CSS vào Tùy biến → CSS bổ sung nhé.

.nn-freeship-progress { margin: 0 0 20px; }
.nn-freeship-text { margin: 0 0 8px; }
.nn-freeship-bar { height: 10px; background: #eee; border-radius: 999px; overflow: hidden; }
.nn-freeship-bar span { display: block; height: 100%; background: #446084; border-radius: 999px; }

Lưu ý khi dùng

Ngưỡng trong code tính theo tạm tính giỏ hàng, chưa gồm phí vận chuyển. Nếu shop bạn tính thuế vào giá hiển thị khác với cách WooCommerce tính tạm tính thì con số còn thiếu có thể lệch vài nghìn đồng, bạn kiểm tra thử với 1 đơn thật trước khi chạy chính thức nhé.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm được thanh tiến trình miễn phí vận chuyển 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 tự động áp dụng mã giảm giá trong WooCommerce là thành combo thúc đẩy mua hàng khá tốt cho shop.

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