Trong thế giới thiết kế web WordPress, việc hiển thị thông báo (alert, confirmation, toast) đẹp mắt và chuyên nghiệp là yếu tố quan trọng để nâng cao trải nghiệm người dùng (UX). Thay vì dùng alert() mặc định của JavaScript – thô sơ và kém responsive – SweetAlert2 là lựa chọn hàng đầu: đẹp, tùy chỉnh cao, hỗ trợ animation, icon, input, và hoàn toàn miễn phí (MIT license).

SweetAlert2 phiên bản mới nhất (11.26.17 tính đến tháng 12/2025) hỗ trợ theme built-in (dark, minimal, bootstrap, wordpress-admin,…), toast notification, và accessible (WAI-ARIA). Nó được hơn 2.000 dự án sử dụng trên npm và tích hợp dễ dàng với WordPress (Flatsome, Elementor, WooCommerce).

Bài viết này hướng dẫn 2 cách tạo thông báo SweetAlert2:

Code thuần (không dùng plugin) – Linh hoạt, nhẹ, kiểm soát 100%.
Dùng plugin – Nhanh chóng, dành cho form (Contact Form 7, Elementor).

(Minh họa: Các ví dụ popup SweetAlert2 – alert success, confirmation, input modal.)

Lý Do Nên Dùng SweetAlert2 Trong WordPress

Đẹp hơn alert mặc định 10 lần.
Responsive 100% trên mobile.
Hỗ trợ toast (thông báo nhỏ góc màn hình).
Tùy chỉnh icon, button, timer, HTML content.
Không phụ thuộc jQuery (phiên bản mới).
Tích hợp dễ với WooCommerce (thêm giỏ hàng thành công), login, delete post,…

Cách 1: Code Thuần – Enqueue SweetAlert2 Qua Child Theme (Không Plugin)

Phương pháp này nhẹ nhất, không tăng số lượng plugin, và bạn kiểm soát phiên bản.

Bước 1: Tạo Child Theme (Nếu Chưa Có)

Tạo thư mục wp-content/themes/yourtheme-child.
File style.css và functions.php cơ bản.

Bước 2: Enqueue SweetAlert2 Từ CDN

Dán code sau vào functions.php của Child Theme:

PHP

function enqueue_sweetalert2() {
    // Enqueue CSS
    wp_enqueue_style('sweetalert2-css', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.26.17/dist/sweetalert2.min.css', array(), '11.26.17');

    // Enqueue JS
    wp_enqueue_script('sweetalert2-js', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.26.17/dist/sweetalert2.all.min.js', array(), '11.26.17', true);
}
add_action('wp_enqueue_scripts', 'enqueue_sweetalert2');

// Optional: Enqueue cho admin dashboard
// add_action('admin_enqueue_scripts', 'enqueue_sweetalert2');

function enqueue_sweetalert2() {

// Enqueue CSS

wp_enqueue_style('sweetalert2-css', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.26.17/dist/sweetalert2.min.css', array(), '11.26.17');

// Enqueue JS

wp_enqueue_script('sweetalert2-js', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.26.17/dist/sweetalert2.all.min.js', array(), '11.26.17', true);

}

add_action('wp_enqueue_scripts', 'enqueue_sweetalert2');

// Optional: Enqueue cho admin dashboard

// add_action('admin_enqueue_scripts', 'enqueue_sweetalert2');

Properly Add Scripts And Stylesheets To Your Admin Dashboard

(Minh họa: Ví dụ enqueue script trong functions.php và admin dashboard WordPress.)

Bước 3: Sử Dụng SweetAlert2 Trong Code

Thông báo đơn giản (thêm vào file JS hoặc inline script):

JavaScript

Swal.fire({
    title: 'Thành công!',
    text: 'Sản phẩm đã thêm vào giỏ hàng.',
    icon: 'success',
    confirmButtonText: 'OK',
    timer: 3000,
    timerProgressBar: true
});

Swal.fire({

title: 'Thành công!',

text: 'Sản phẩm đã thêm vào giỏ hàng.',

icon: 'success',

confirmButtonText: 'OK',

timer: 3000,

timerProgressBar: true

});

Confirmation trước khi xóa (ví dụ nút delete):

HTML

&lt;button class="delete-btn" data-id="123"&gt;Xóa&lt;/button&gt;

&lt;script&gt;
document.querySelectorAll('.delete-btn').forEach(btn =&gt; {
    btn.addEventListener('click', function() {
        Swal.fire({
            title: 'Bạn chắc chắn?',
            text: 'Không thể khôi phục!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Xóa',
            cancelButtonText: 'Hủy'
        }).then((result) =&gt; {
            if (result.isConfirmed) {
                // Thực hiện xóa (AJAX hoặc submit form)
                Swal.fire('Đã xóa!', '', 'success');
            }
        });
    });
});
&lt;/script&gt;

document.querySelectorAll('.delete-btn').forEach(btn => {

btn.addEventListener('click', function() {

Swal.fire({

title: 'Bạn chắc chắn?',

text: 'Không thể khôi phục!',

icon: 'warning',

showCancelButton: true,

confirmButtonText: 'Xóa',

cancelButtonText: 'Hủy'

}).then((result) => {

if (result.isConfirmed) {

// Thực hiện xóa (AJAX hoặc submit form)

Swal.fire('Đã xóa!', '', 'success');

}

});

</script>

Toast notification (thông báo nhỏ góc màn hình):

JavaScript

const Toast = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true
});

Toast.fire({
    icon: 'info',
    title: 'Đăng nhập thành công!'
});

const Toast = Swal.mixin({

toast: true,

position: 'top-end',

showConfirmButton: false,

timer: 3000,

timerProgressBar: true

});

Toast.fire({

icon: 'info',

title: 'Đăng nhập thành công!'

});

Theme WordPress Admin (nếu dùng trong backend):

JavaScript

Swal.fire({
    title: 'Cập nhật thành công',
    icon: 'success',
    customClass: {
        container: 'swal2-wordpress-admin'
    }
});

Swal.fire({

title: 'Cập nhật thành công',

icon: 'success',

customClass: {

container: 'swal2-wordpress-admin'

}

});

Thêm CSS theme nếu cần: @sweetalert2/theme-wordpress-admin.

Ưu điểm: Nhẹ (chỉ ~50KB), cập nhật tự động qua CDN, không conflict.

Cách 2: Sử Dụng Plugin SweetAlert2 (Nhanh Chóng Cho Form)

Nếu bạn cần tích hợp nhanh với form (Contact Form 7, Elementor Forms), dùng plugin chuyên dụng.

Plugin Khuyến Nghị (Cập Nhật 2026)

Add-on SweetAlert Contact Form 7 (miễn phí, >10.000 install): Thay thông báo CF7 mặc định bằng SweetAlert2 popup. Chỉ activate → tự động hoạt động. Tùy chỉnh title, duration.
Add SweetAlert to Elementor Form (miễn phí): Tương tự cho Elementor Pro Forms.
WP Sweet Alert hoặc SweetAlert2 for Gravity Forms (nếu dùng Gravity).

Hướng Dẫn Cài Đặt & Sử Dụng (Ví Dụ CF7)

Vào Plugins > Add New > Tìm “Add-on SweetAlert Contact Form 7”.
Install & Activate.
Vào Contact > SweetAlert CF7 Settings (nếu có) → set custom title như “Gửi thành công!”, duration 5000ms.
Test form → thông báo sẽ hiện đẹp với SweetAlert2 (success/error).

Plugin tự enqueue SweetAlert2, override submission AJAX của CF7.

Ưu điểm: Không code, setup 2 phút. Nhược điểm: Chỉ dùng cho form cụ thể, thêm 1 plugin (có thể nặng hơn).

Nếu không dùng CF7/Elementor, cách 1 vẫn tốt hơn.