Code thêm banner cho từng danh mục sản phẩm

Chia sẻ anh em Code thêm banner cho từng danh mục sản phẩm để trang trí danh mục sản phẩm thêm đẹp hơn

Ta add code này vào fuction là xong

/** ADD Banner category Product **/
function add_flatsome_banner_breadcrumbs() {
    // Chỉ xử lý nếu là danh mục hoặc trang cửa hàng
    if ( is_product_category() || is_shop() ) {

        // === 1. Xác định ảnh banner ===
        if ( is_product_category() ) {
            $term = get_queried_object();

            // Lấy ảnh nền từ ACF (nếu có)
            $img_breadcrumb = get_field('bg_product_cat', 'product_cat_' . $term->term_id);

            // Nếu chưa có, lấy thumbnail mặc định của danh mục
            if ( empty($img_breadcrumb) ) {
                $thumb_id = get_term_meta($term->term_id, 'thumbnail_id', true);
                if ( $thumb_id ) {
                    $img_breadcrumb = wp_get_attachment_url($thumb_id);
                }
            }

            // Nếu vẫn trống → dùng ảnh mặc định chung
            if ( empty($img_breadcrumb) ) {
                $img_breadcrumb = get_stylesheet_directory_uri() . '/assets/default-cat.jpg';
            }
        } else {
            // Trang shop mặc định dùng ảnh riêng
            $img_breadcrumb = get_home_url() . '/wp-content/uploads/2025/10/bg_product_cat.jpg';
        }

        // === 2. Hiển thị banner ===
        echo '<div class="webrt-banner" style="background: url(' . esc_url($img_breadcrumb) . ') no-repeat center / cover;">';
        echo '  <div class="container">';
        echo '    <div class="wrap_banner">';

        if ( is_product_category() ) {
            echo '      <h1>' . single_cat_title('', false) . '</h1>';
            $note = get_field('note_product_cat', 'product_cat_' . $term->term_id);
            if ( $note ) {
                echo '  <p class="mb-0">' . esc_html($note) . '</p>';
            }
        } else {
            echo '      <h1>SẢN PHẨM</h1>';
            echo '      <p class="mb-0">Hiển thị tất cả sản phẩm</p>';
        }

        echo '    </div>';
        echo '  </div>';
        echo '</div>';
    }
}
add_action( 'flatsome_after_header', 'add_flatsome_banner_breadcrumbs', 3 );

Mỗi danh mục ta chọn dc banner khác nhau , những danh mục nào ko add banner thì sẻ show ra banner mặc định theo đường dẩn themes/child-theme/assets/default-cat.jpg

💡 Kết quả sau khi áp dụng:

• Ảnh nền full-width, auto lấy ảnh riêng từng danh mục hoặc fallback ảnh mặc định.chúc các bạn thành công