Code thêm nút gọi/Zalo nổi trong Flatsome

Bài viết này mình sẽ hướng dẫn bạn cách thêm nút gọi và Zalo nổi trong Flatsome nhé.

Khách lướt shop trên điện thoại mà muốn gọi hay nhắn Zalo thì phải cuộn lên đầu trang tìm số điện thoại, nhiều khách ngại tìm là bỏ đi luôn. Flatsome mặc định không có nút liên hệ nổi, muốn 2 nút gọi và Zalo lúc nào cũng nằm ở góc màn hình thì bạn phải code thêm nhé.

Thêm code nút gọi/Zalo nổi

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 0901234567 thành số điện thoại/Zalo của shop bạn, số này chỉ khai một lần trong biến $so_dien_thoai nên đổi một chỗ là cả hai nút cùng đổi.

<?php
// Nút gọi và Zalo nổi ở góc phải dưới — đổi 0901234567 thành số của shop bạn
add_action('wp_enqueue_scripts', 'nn_flatsome_nut_lien_he_noi_css');
function nn_flatsome_nut_lien_he_noi_css() {
    wp_register_style('nn-lien-he-noi', false);
    wp_enqueue_style('nn-lien-he-noi');
    wp_add_inline_style('nn-lien-he-noi', '.nn-lien-he-noi { position: fixed; right: 18px; bottom: 18px; z-index: 999; display: flex; flex-direction: column; gap: 10px; } .nn-lien-he-noi a { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; text-decoration: none; } .nn-lien-he-noi a:hover { transform: scale(1.08); } .nn-lien-he-noi a svg { width: 26px; height: 26px; fill: #fff; } .nn-nut-goi { background: #446084; } .nn-nut-zalo { background: #0068ff; font-size: 19px; font-weight: 700; color: #fff; } @media (max-width: 549px) { .nn-lien-he-noi { right: 12px; bottom: 12px; } .nn-lien-he-noi a { width: 48px; height: 48px; } }');
}
add_action('wp_footer', 'nn_flatsome_nut_lien_he_noi');
function nn_flatsome_nut_lien_he_noi() {
    if (is_admin()) {
        return;
    }
    $so_dien_thoai = '0901234567';
    echo '<div class="nn-lien-he-noi">';
    echo '<a class="nn-nut-goi" href="tel:' . esc_attr($so_dien_thoai) . '" aria-label="Gọi ngay"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg></a>';
    echo '<a class="nn-nut-zalo" href="https://zalo.me/' . esc_attr($so_dien_thoai) . '" target="_blank" rel="noopener" aria-label="Chat Zalo">Zalo</a>';
    echo '</div>';
}

Code trên có hai phần. Phần đầu móc vào wp_enqueue_scripts để nạp CSS cho cụm nút: cụm nút cố định ở góc phải dưới màn hình (position: fixed), 2 nút tròn 52px xếp dọc, nút gọi dùng màu #446084 là màu chủ đạo mặc định của Flatsome nên nhìn như nút của theme, nút Zalo dùng màu xanh đặc trưng #0068ff, rê chuột vào nút phóng to nhẹ. Phần sau móc vào wp_footer để in 2 nút ra cuối trang: nút gọi dùng link tel: nên bấm là mở trình gọi điện, nút Zalo dùng link zalo.me — dạng deep link mở thẳng app Zalo thay vì qua web (cách này mình đã chia sẻ kỹ trong bài cách fix lỗi click vào nút Zalo trên website).

Kiểm tra trên trang

Bạn lưu file rồi mở shop trên điện thoại, cuộn xuống bất cứ chỗ nào cũng sẽ thấy 2 nút tròn ở góc phải dưới. Bấm nút gọi thì máy mở trình gọi điện với đúng số của shop, bấm nút Zalo thì mở thẳng app Zalo tới đúng tài khoản. Trên máy tính nút vẫn hiện, bấm nút gọi thì trình duyệt hỏi mở ứng dụng gọi điện, còn Zalo thì mở trang chat Zalo Web.

Lưu ý khi dùng

Flatsome có sẵn nút “về đầu trang” cũng nằm ở góc phải dưới, nếu thấy 2 nút liên hệ đè lên nút đó thì bạn tăng bottom trong CSS từ 18px lên khoảng 70px. Nút Zalo chỉ mở đúng tài khoản khi số bạn điền là số đã đăng ký Zalo, nếu chưa đăng ký thì khách bấm vào sẽ thấy báo tài khoản không tồn tại. Nếu shop bạn có thêm kênh khác như Messenger thì bạn cứ copy thêm một nút theo đúng mẫu nút Zalo rồi đổi class và link là được.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm nút gọi/Zalo nổi 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 hiển thị số lượng đã bán trên trang sản phẩm trong Flatsome là thành combo tăng tỉ lệ khách liên hệ và chốt đơn 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é.