Tạo Banner Danh Mục Sản Phẩm Bằng ACF

Để hiển thị Banner Danh mục cho từng danh mục sản phẩm trong WooCommerce bằng Advanced Custom Fields (ACF) là một điểm mạnh cho SEO, bạn có thể làm theo hướng dẫn dưới đây. Với ACF, bạn sẽ tạo một trường tùy chỉnh cho danh mục sản phẩm và sau đó hiển thị nó ở đầu trang danh mục.

Tạo Banner Danh mục sản phẩm bằng ACF

Tạo trường tùy chỉnh Banner Danh mục sản phẩm với ACF

Truy cập vào ACF > Add New để tạo một nhóm trường mới.

Đặt tên cho nhóm trường (ví dụ: “Banner Danh mục”).

Nhấn vào Add Field để thêm trường mới:
Field Label: Banner
Field Name: banner_category
Field Type: Image

Ở phần Location, chọn:

Tạo trường tùy chỉnh Banner Danh mục sản phẩm với ACF - Location — Tạo trường tùy chỉnh Banner Danh mục sản phẩm với ACF – Location

Show this field group if: Taxonomy Term is equal to Product Category.

Xem thêm bài viết khác

Nhấn Publish để lưu lại nhóm trường.

Hiển thị Banner Danh mục sản phẩm trên trang danh mục sản phẩm

Thêm đoạn code sau vào file functions.php của theme con (child theme) hoặc sử dụng plugin Code Snippets:

// Hiển thị banner hình ảnh cho danh mục sản phẩm - Tunlamweb.com
add_action('woocommerce_before_main_content', 'tunlw_category_banner_image', 5);
//Nếu tạo shortcode thì phải bỏ phần add_action trên nhé không nó sẽ chạy 2 đoạn code ý
//--------------------------------------------------------------------------------------------------
// Tạo shortcode nếu bạn muốn đặt lại vị trí khác mong muốn trong phần custom Danh mục sản phẩm
add_shortcode('sc_banner_cat', 'tunlw_category_banner_image'); 
//--------------------------------------------------------------------------------------------------
function tunlw_category_banner_image() {
    if (is_product_category()) {
        $term = get_queried_object();
        $banner_image = get_field('banner_category', $term);
        if ($banner_image) {
            $banner_url = $banner_image['url'];
            $banner_alt = $banner_image['alt'];
            echo '<div class="category-banner">';
            echo '<img src="' . esc_url($banner_url) . '" alt="' . esc_attr($banner_alt) . '" class="category-banner-img" />';
            echo '</div>';
        }
        else{ //Hoặc bạn có thể thay thế 1 hình ảnh mặc định nếu chưa có ảnh Banner nhé - Tunlamweb-com
        	echo '<img src="http://tunlamweb.com/wp-content/uploads/2024/10/bg-banner-1.webp" alt="Banner danh mục" class="category-banner-img" />';
        } ?>
        
        <style>
			.category-banner {
			    margin-bottom: 20px;
			    text-align: center;
			}

.category-banner-img {
			    width: 100%;
			    height: auto;
			    border-radius: 10px;
			}
        </style>
    <?php
    }
}

// Hiển thị banner hình ảnh cho danh mục sản phẩm - Tunlamweb.com

add_action('woocommerce_before_main_content', 'tunlw_category_banner_image', 5);

//Nếu tạo shortcode thì phải bỏ phần add_action trên nhé không nó sẽ chạy 2 đoạn code ý

//--------------------------------------------------------------------------------------------------

// Tạo shortcode nếu bạn muốn đặt lại vị trí khác mong muốn trong phần custom Danh mục sản phẩm

add_shortcode('sc_banner_cat', 'tunlw_category_banner_image');

//--------------------------------------------------------------------------------------------------

function tunlw_category_banner_image() {

if (is_product_category()) {

$term = get_queried_object();

$banner_image = get_field('banner_category', $term);

if ($banner_image) {

$banner_url = $banner_image['url'];

$banner_alt = $banner_image['alt'];

echo '<div class="category-banner">';

echo '<img src="' . esc_url($banner_url) . '" alt="' . esc_attr($banner_alt) . '" class="category-banner-img" />';

echo '</div>';

}

else{ //Hoặc bạn có thể thay thế 1 hình ảnh mặc định nếu chưa có ảnh Banner nhé - Tunlamweb-com

echo '<img src="http://tunlamweb.com/wp-content/uploads/2024/10/bg-banner-1.webp" alt="Banner danh mục" class="category-banner-img" />';

} ?>

<style>

.category-banner {

margin-bottom: 20px;

text-align: center;

}

.category-banner-img {

width: 100%;

height: auto;

border-radius: 10px;

}

</style>

<?php

}

Kết quả:

Khi bạn vào trang danh mục sản phẩm, nếu đã chọn hình ảnh banner trong phần ACF của danh mục, hình ảnh sẽ được hiển thị ở phần đầu trang, ngay phía trên danh sách sản phẩm.

Lưu ý khi tạo Banner Danh mục

Nếu hình ảnh không hiển thị, hãy kiểm tra lại rằng bạn đã thêm trường tùy chỉnh cho đúng danh mục sản phẩm.
Hãy xóa cache của website (nếu có) sau khi thêm mã để đảm bảo thay đổi có hiệu lực.

Hãy thử và cho mình biết nếu bạn cần thêm hỗ trợ nhé!

Theo dỗi thêm ở Fanpage của tôi nhé.

Chúc bạn thành công.