Tổng cộng:
Code Hiện Thị Quảng Cáo Website Wordpress Dùng Theme Flatsome
Đăng bởi
Thuấn Luviet
vào lúc
02/09/2025
Bạn Có Biết - Chỉ Cần Kêu Gọi Hành Động Thì Tỷ Lệ Chuyển Đổi Trong Bán Hàng Có Thể Tăng Lên 30%.
Cho nên, popup quảng cáo là cách để tăng tỷ lệ chuyển đổi hiệu quả trên website
Bạn muốn khi khách truy cập website thì một popup quảng cáo xuất hiện ngay giữa màn hình để thu hút sự chú ý? Đây là một cách rất hiệu quả để quảng bá chương trình khuyến mãi, sản phẩm mới, hoặc dẫn khách đến trang landing page.
Trong bài viết này, Thiết Kế Website Luviet sẽ hướng dẫn chi tiết cách tạo popup quảng cáo tự động hiển thị trên website WordPress Flatsome, chỉ cần copy code và dán vào là xong. Người mới chưa biết gì cũng làm được.
Popup quảng cáo là gì?
Popup quảng cáo là một cửa sổ nhỏ bật lên tự động khi khách truy cập website. Nó thường hiển thị:
- Hình ảnh chương trình khuyến mãi
- Banner giảm giá
- Lời mời đăng ký nhận ưu đãi
- Hoặc nút dẫn tới trang sản phẩm
Popup này giúp tăng tỷ lệ chuyển đổi (Conversion Rate) và giữ chân khách hàng lâu hơn.
Tại sao nên dùng popup quảng cáo trong Flatsome?
- Thu hút sự chú ý ngay lập tức: khách hàng khó bỏ qua thông điệp mà bạn truyền tải.
- Tăng tỷ lệ click vào sản phẩm hoặc landing page.
- Giới thiệu khuyến mãi nhanh chóng mà không cần chỉnh sửa bố cục website.
- Chạy dễ dàng bằng code, không cần cài thêm plugin nặng website.
Cách tạo popup quảng cáo tự động hiển thị trong WordPress Flatsome
Bước 1: Chuẩn bị ảnh quảng cáo
- Tạo 1 banner khuyến mãi (kích thước khuyên dùng: 600x800px hoặc 1080x1080px).
- Upload ảnh lên WordPress qua Media > Add New. (Xem video)
- Lấy đường dẫn ảnh (Image URL).
Bước 2: Thêm code popup vào theme Flatsome
Bạn có 2 cách:
-
Dán code vào file functions.php của child theme.
-
Hoặc dùng plugin Code Snippets (dễ quản lý, không lo mất code khi update theme).
Dán đoạn code sau:
// Popup quảng cáo tự động hiển thị 1 lần/ngày
add_action('wp_footer', 'luviet_auto_popup_ad_cookie');
function luviet_auto_popup_ad_cookie() {
?>
<style>
.luviet-popup-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 99999;
padding: 15px;
}
.luviet-popup-content {
position: relative;
max-width: 500px;
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
background: #fff;
}
.luviet-popup-content img {
width: 100%;
height: auto;
display: block;
}
.luviet-popup-close {
position: absolute;
top: 8px;
right: 12px;
font-size: 24px;
color: #fff;
cursor: pointer;
font-weight: bold;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
/* Responsive cho Tablet */
@media (max-width: 768px) {
.luviet-popup-content {
max-width: 90%;
}
.luviet-popup-close {
font-size: 20px;
top: 5px;
right: 8px;
}
}
/* Responsive cho Mobile */
@media (max-width: 480px) {
.luviet-popup-content {
max-width: 95%;
}
.luviet-popup-close {
font-size: 18px;
}
}
</style>
<div class="luviet-popup-overlay" id="luvietPopup">
<div class="luviet-popup-content">
<span class="luviet-popup-close" id="luvietPopupClose">×</span>
<a href="https://link-quang-cao-cua-ban.com" target="_blank">
<img src="Link ảnh" alt="Quảng Cáo">
</a>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
var popup = document.getElementById("luvietPopup");
var closeBtn = document.getElementById("luvietPopupClose");
// Hàm set cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// Hàm get cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
// Nếu chưa có cookie thì hiện popup
if(!getCookie("luviet_popup_shown")) {
setTimeout(function(){ popup.style.display = "flex"; }, 2000);
setCookie("luviet_popup_shown", "yes", 1); // lưu cookie 1 ngày
}
// Đóng popup khi bấm nút X
closeBtn.onclick = function(){ popup.style.display = "none"; }
// Đóng khi click ra ngoài
popup.onclick = function(e){
if(e.target === popup){ popup.style.display = "none"; }
}
});
</script>
<?php
}
Bước 3: Thay thông tin trong code
- Thay link ảnh quảng cáo
- Thay link đích (landing page / sản phẩm)
- Thời gian hiện popup: chỉnh số
2000(mili giây) thành số bạn muốn (ví dụ5000= 5 giây). - Cookie: popup chỉ hiển thị 1 lần/ngày, không làm phiền khách mỗi lần tải trang.
Ví dụ minh họa
Giả sử bạn có chương trình Sale 50% toàn bộ sản phẩm, chỉ cần:
- Tạo 1 ảnh banner với nội dung khuyến mãi.
- Upload lên Media, copy link ảnh.
- Thay vào code.
- Khi khách vào website, popup sẽ bật lên trong 2 giây và biến mất sau khi họ đóng.
Lời khuyên khi dùng popup quảng cáo
- Nên dùng popup cho sự kiện đặc biệt: khai trương, khuyến mãi, flash sale.
- Không nên lạm dụng quá nhiều popup, tránh gây khó chịu.
- Popup nên có nút đóng rõ ràng.
- Nên test trên máy tính + điện thoại để đảm bảo hiển thị đẹp.
Kết luận
Vậy là bạn đã biết cách tạo popup quảng cáo tự động hiển thị giữa màn hình trên WordPress Flatsome chỉ với vài bước đơn giản. Cách này không cần cài thêm plugin, nhẹ và thân thiện với SEO.
👉 Hãy thử áp dụng ngay hôm nay để tăng tỷ lệ chuyển đổi và thu hút khách hàng nhiều hơn!
Nhận xét
Đăng nhận xét