Hook custom trong Flatsome là giải pháp mạnh mẽ giúp bạn mở rộng và tùy chỉnh giao diện website mà không làm ảnh hưởng đến mã nguồn gốc. Đây là công cụ lý tưởng để thêm các phần tử, nội dung hoặc tính năng vào những vị trí mà theme mặc định không hỗ trợ.
1. Hook là gì và Vai Trò của Hook trong Flatsome?
Hook trong WordPress là các “điểm móc” cho phép bạn chèn hoặc chỉnh sửa nội dung tại những vị trí xác định trên website mà không cần sửa trực tiếp vào code của theme.
- Action Hooks: Cho phép thêm mới chức năng tại một thời điểm cụ thể. Ví dụ: Thêm nút “Mua ngay” dưới tiêu đề sản phẩm.
- Filter Hooks: Cho phép chỉnh sửa hoặc lọc dữ liệu trước khi hiển thị ra trang web. Ví dụ: Thay đổi định dạng giá sản phẩm.
Trong Flatsome, ngoài các hook có sẵn, theme còn cung cấp 3 hook custom để người dùng tự thêm nội dung vào trang sản phẩm chi tiết mà không cần can thiệp vào core theme.

2. Danh Sách Hook Custom trong Flatsome
Flatsome bổ sung ba hook tùy chỉnh đặc biệt dành cho trang sản phẩm:
- flatsome_custom_single_product_1
- flatsome_custom_single_product_2
- flatsome_custom_single_product_3
Vị trí hiển thị:
flatsome_custom_single_product_1
: Hiển thị ngay dưới tiêu đề sản phẩm.flatsome_custom_single_product_2
: Xuất hiện dưới phần mô tả ngắn.flatsome_custom_single_product_3
: Nằm ở cuối trang, phía trên khu vực review sản phẩm.
3. Lợi Ích Khi Dùng Hook Custom trong Flatsome
- Tối ưu UX/UI: Thêm banner khuyến mãi, logo hoặc đoạn văn bản giới thiệu vào trang sản phẩm.
- Giữ nguyên bản theme gốc: Dễ dàng cập nhật Flatsome mà không lo mất các tùy chỉnh.
- Nâng cao SEO Onpage: Chèn nội dung liên quan, giảm tỷ lệ thoát trang và cải thiện trải nghiệm người dùng.
- Tiết kiệm thời gian: Không cần sửa trực tiếp trong file template, chỉ cần vài dòng code đơn giản là đủ.
4. Ví Dụ Thực Tế – Thêm Biểu Ngữ Khuyến Mãi vào Trang Sản Phẩm
Giả sử bạn muốn thêm một biểu ngữ (banner) “Giảm giá 20% – Mua ngay hôm nay!” vào dưới tiêu đề sản phẩm.
Bước 1: Kéo Hook Custom trong UX Builder
- Vào UX Builder → Trang sản phẩm chi tiết.
- Kéo phần Product Hooks vào và chọn flatsome_custom_single_product_1.
Bước 2: Thêm Code Tùy Chỉnh trong functions.php
1 2 3 4 5 6 7 8 | // Thêm biểu ngữ khuyến mãi dưới tiêu đề sản phẩm add_action( 'flatsome_custom_single_product_1', 'hien_banner_khuyen_mai' ); function hien_banner_khuyen_mai() { echo '<div class="custom-banner" style="padding: 15px; background-color: #ffcc00; text-align: center;"> <strong>🔥 Giảm giá 20% – Mua ngay hôm nay! 🔥</strong> </div>'; } |
Kết Quả:
- Vị trí hiển thị: Dưới tiêu đề sản phẩm.
- Giao diện: Biểu ngữ màu vàng nổi bật, thu hút khách hàng ngay khi vào trang.
5. Ví Dụ 2 – Thêm Video Giới Thiệu Sản Phẩm Dưới Phần Mô Tả Ngắn
1 2 3 4 5 6 7 8 | // Thêm video dưới phần mô tả ngắn sản phẩm add_action( 'flatsome_custom_single_product_2', 'hien_video_gioi_thieu' ); function hien_video_gioi_thieu() { echo '<div class="product-video" style="margin-top: 20px;"> <iframe width="100%" height="315" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe> </div>'; } |
6. Tối Ưu Hóa và Lưu Ý Khi Sử Dụng Hook Custom
- Sử dụng child theme: Luôn chỉnh sửa trong theme con để tránh mất code khi cập nhật theme chính.
- Kiểm tra trước khi public: Xem trước giao diện để đảm bảo hiển thị đúng vị trí mong muốn.
- Giữ code gọn gàng: Tổ chức hook trong các file riêng để dễ quản lý (ví dụ:
custom-hooks.php
).
Kết Luận
Hook custom trong Flatsome là giải pháp hoàn hảo để cá nhân hóa giao diện mà không làm ảnh hưởng đến core theme. Bằng cách sử dụng các ví dụ cụ thể như thêm banner khuyến mãi, video sản phẩm hoặc các nội dung tùy chỉnh, bạn có thể tạo ra những trang web độc đáo, chuyên nghiệp và gia tăng trải nghiệm người dùng.
👉 Bắt tay vào thực hành ngay hôm nay để biến website của bạn thành công cụ bán hàng mạnh mẽ!
- Cách Tạo Biểu Mẫu Đăng Ký Đơn Giản Cho Website Cực Dễ 2025
- #1 Tùy Chỉnh Thanh Cuộn CSS Đẹp và Chuyên Nghiệp: Hướng Dẫn Từng Bước
- Cách tối ưu hóa code trong website WordPress mới nhất năm 2024 và xu hướng 2025 để chuẩn SEO
- Sharecode plugin bộ lọc khoảng giá cho wordpress không cần plugin
- Sharecode chức năng đăng nhập gần nhất và cột ngày đăng ký tài khoản