Code thêm thông báo miễn phí vận chuyển ở đầu trang trong Flatsome

Bài viết này mình sẽ hướng dẫn bạn cách thêm thông báo miễn phí vận chuyển ở đầu trang trong Flatsome nhé.

Khách đã bỏ hàng vào giỏ mà không biết mình còn thiếu bao nhiêu mới được miễn phí vận chuyển thì thường cứ thế đi thanh toán luôn, shop mất cơ hội gợi ý khách mua thêm cho đủ ngưỡng. Flatsome mặc định không có dải thông báo nào ở đầu trang báo số tiền còn thiếu theo giỏ hàng, muốn có dòng nhắc này thì bạn phải code thêm nhé.

Thêm code thông báo 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. Nhớ đổi 500000 thành đúng ngưỡng miễn phí vận chuyển của shop bạn, và ngưỡng này phải trùng với mức tối thiểu bạn đã đặt trong phương thức Miễn phí vận chuyển ở WooCommerce → Cài đặt → Vận chuyển.

<?php
// Thông báo còn thiếu bao nhiêu để được miễn phí vận chuyển, hiện ngay trên đầu trang
// Đổi 500000 thành ngưỡng miễn phí vận chuyển của shop bạn
add_action('wp_enqueue_scripts', 'nn_flatsome_thong_bao_freeship_css');
function nn_flatsome_thong_bao_freeship_css() {
    wp_register_style('nn-thong-bao-freeship', false);
    wp_enqueue_style('nn-thong-bao-freeship');
    wp_add_inline_style('nn-thong-bao-freeship', '.nn-thong-bao-freeship { background: #446084; color: #fff; text-align: center; font-size: 14px; line-height: 1.5; padding: 8px 15px; } .nn-thong-bao-freeship a { color: #fff; font-weight: 700; text-decoration: underline; margin-left: 6px; } .nn-thong-bao-freeship a:hover { color: #f1f1f1; }');
}
add_action('flatsome_before_header', 'nn_flatsome_thong_bao_freeship');
function nn_flatsome_thong_bao_freeship() {
    if (!function_exists('WC') || !WC()->cart) {
        return;
    }
    if (is_cart() || is_checkout()) {
        return;
    }
    $nguong = 500000;
    $tam_tinh = (float) WC()->cart->get_subtotal();
    if ($tam_tinh <= 0) {
        return;
    }
    if ($tam_tinh >= $nguong) {
        $thong_bao = 'Bạn đã được miễn phí vận chuyển cho đơn hàng này!';
    } else {
        $con_thieu = $nguong - $tam_tinh;
        $thong_bao = 'Mua thêm ' . wc_price($con_thieu) . ' để được miễn phí vận chuyển';
    }
    echo '<div class="nn-thong-bao-freeship">' . esc_html($thong_bao) . ' <a href="' . esc_url(wc_get_cart_url()) . '">Xem giỏ hàng</a></div>';
}

Code trên có hai phần. Phần đầu móc vào wp_enqueue_scripts để nạp CSS cho dải thông báo: nền dùng màu #446084 là màu chủ đạo mặc định của Flatsome nên nhìn như một hàng của theme, chữ trắng căn giữa, link “Xem giỏ hàng” in đậm gạch chân. Phần sau móc vào hook flatsome_before_header của theme để in dải thông báo ngay trên đầu trang, phía trên header. Hàm lấy tổng tạm tính của giỏ bằng WC()->cart->get_subtotal(), giỏ trống thì không hiện gì, giỏ chưa đủ ngưỡng thì báo “Mua thêm X để được miễn phí vận chuyển”, giỏ đủ ngưỡng thì báo “Bạn đã được miễn phí vận chuyển”. Trang giỏ hàng và trang thanh toán được loại ra vì ở đó khách đã thấy đầy đủ thông tin phí vận chuyển rồi.

Kiểm tra trên trang

Bạn lưu file rồi bỏ một sản phẩm vào giỏ, mở lại trang chủ sẽ thấy dải thông báo màu xanh đậm nằm ngay trên đầu trang với đúng số tiền còn thiếu. Bỏ thêm hàng cho đủ ngưỡng 500.000₫ rồi tải lại trang thì dòng thông báo đổi thành “Bạn đã được miễn phí vận chuyển”. Bấm link “Xem giỏ hàng” trong dải thông báo sẽ đi thẳng tới trang giỏ hàng.

Lưu ý khi dùng

Dải thông báo này khác với bài code thêm thanh tiến trình miễn phí vận chuyển trong Flatsome mình đã chia sẻ trước đây: bài kia là thanh tiến trình nằm trong giỏ hàng, còn bài này là dòng nhắc ngắn hiện ngay đầu mọi trang để khách thấy từ lúc mới vào shop. Số tiền còn thiếu tính theo tổng tạm tính chưa gồm phí vận chuyển, nếu shop bạn bật thuế thì nên kiểm tra lại con số hiển thị có khớp với cách tính của phương thức miễn phí vận chuyển không. Nếu muốn dải thông báo dính luôn khi cuộn trang thì bạn thêm position: sticky; top: 0; z-index: 999; vào CSS của class .nn-thong-bao-freeship.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm thông báo miễn phí vận chuyển ở đầu trang trong Flatsome rồi nhé. Tính năng này đi chung với bài code thêm thanh tiến trình miễn phí vận chuyển trong Flatsome và bài code thêm nút gọi/Zalo nổi trong Flatsome là thành combo nhắc khách mua thêm và liên hệ shop khá tốt.

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