Để 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:

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)

  1. Cài đặt plugin “WooCommerce Extra Product Options”

  2. 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:

  1. Vào Products > Tags trong WordPress admin

  2. Tạo tag “hot” (hoặc bất kỳ tag nào bạn muốn)

  3. Gán tag này cho các sản phẩm muốn hiển thị chữ “HOT”

Lưu ý quan trọng:

  1. Luôn sử dụng child theme để không bị mất thay đổi khi update theme

  2. Kiểm tra hook có xung đột với theme/plugin khác không

  3. Đố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ể

Chia sẻ

Tin tức

Cách tạo banner động

Để tạo banner động cho website WordPress, bạn có thể làm theo các bước sau. Banner động thường là hình ảnh hoặc video chuyển động

Tin tức

Các cách kiếm tiền online

Dưới đây là các cách kiếm tiền online phổ biến và hiệu quả tại Việt Nam, phù hợp với nhiều đối tượng, từ người mới

0963286779