Để thêm chữ “Hot” vào đuôi tiêu đề sản phẩm trong WooCommerce, bạn có thể sử dụng hook the_title
trong WordPress. Dưới đây là cách thực hiện:
Mục lục
Cách 1: Sử dụng functions.php
Thêm đoạn code sau vào file functions.php
của theme con (child theme):
/** * Thêm chữ "HOT" vào tiêu đề sản phẩm nếu có tag "hot" */ add_filter('the_title', 'add_hot_to_product_title', 10, 2); function add_hot_to_product_title($title, $id) { // Chỉ áp dụng cho sản phẩm WooCommerce và ở trang shop/archive if (is_admin() || !is_product() && !is_shop() && !is_product_category()) { return $title; } // Kiểm tra nếu là sản phẩm và có tag "hot" if ('product' === get_post_type($id) && has_term('hot', 'product_tag', $id)) { $title .= ' <span class="hot-badge">HOT</span>'; } return $title; }
Cách 2: Thêm CSS tùy chỉnh
Thêm CSS sau để tạo hiệu ứng nổi bật cho chữ “HOT”:
/* Thêm vào file style.css hoặc Customizer */ .hot-badge { display: inline-block; background-color: #ff0000; color: #fff; font-size: 12px; font-weight: bold; padding: 2px 6px; border-radius: 3px; margin-left: 5px; vertical-align: middle; text-transform: uppercase; }
Cách 3: Sử dụng plugin (không cần code)
-
Cài đặt plugin “WooCommerce Extra Product Options”
-
Vào phần cài đặt plugin để thêm custom badge
Cách 4: Nâng cao – Thêm theo điều kiện khác
Nếu muốn thêm “HOT” theo các điều kiện khác (ví dụ: sản phẩm bán chạy), sử dụng code sau:
add_filter('the_title', 'add_hot_to_best_sellers', 10, 2); function add_hot_to_best_sellers($title, $id) { if (is_admin() || !is_product() && !is_shop() && !is_product_category()) { return $title; } // Kiểm tra nếu là sản phẩm bán chạy (tự định nghĩa logic) if ('product' === get_post_type($id) && your_custom_is_bestseller_check($id)) { $title .= ' <span class="hot-badge bestseller">BESTSELLER</span>'; } return $title; } function your_custom_is_bestseller_check($product_id) { // Logic xác định sản phẩm bán chạy // Ví dụ: có trên 100 đơn hàng $sales_count = get_post_meta($product_id, 'total_sales', true); return $sales_count > 100; }
Cách sử dụng:
-
Vào Products > Tags trong WordPress admin
-
Tạo tag “hot” (hoặc bất kỳ tag nào bạn muốn)
-
Gán tag này cho các sản phẩm muốn hiển thị chữ “HOT”
Lưu ý quan trọng:
-
Luôn sử dụng child theme để không bị mất thay đổi khi update theme
-
Kiểm tra hook có xung đột với theme/plugin khác không
-
Đối với sản phẩm variable product, cần thêm xử lý đặc biệt
Bạn muốn tôi điều chỉnh code theo nhu cầu cụ thể nào không? Ví dụ:
-
Thêm icon thay vì chữ
-
Thay đổi vị trí (trước tiêu đề thay vì sau)
-
Áp dụng cho danh mục cụ thể