Trong một cửa hàng chắc chắn sẽ luôn có những sản phẩm chính mà chủ cửa hàng muốn bán. Để thu hút người xem thì việc sắp xếp vị trí nổi bật trên cửa hàng và gắn thẻ “nổi bật” sẽ dễ dàng tạo được sự chú ý hơn. Bài viết này leekhoa.com sẽ hướng dẫn bạn cách tạo nhãn (label) nổi bật cho sản phẩm trong WooCommerce.

Tạo nhãn nổi bật cho sản phẩm chính – Show “Featured” label for featured product

Trước khi đến với bước tạo nhãn nổi bật cho sản phẩm, bạn cần thiết lập các sản phẩm chính của mình ở trạng thái “This is a featured product” bằng các cách sau:

Cách 1: Tích chọn vào nút “This is a featured product” ngay ở trang đăng sản phẩm.

Tạo nhãn nổi bật cho sản phẩm trong WooCommerce 5

Cách 2: Tại trang danh sách sản phẩm, bạn tích chọn vào các “ngôi sao” như hình dưới.

Tạo nhãn nổi bật cho sản phẩm trong WooCommerce 1

Như vậy là bạn đã hoàn tất thiết lập sản phẩm nổi bật cho cửa hàng, việc của bạn bây giờ là chèn các đoạn code dưới đây vào website.

Hiện thị nhãn nổi bật cho sản phẩm ra trang chi tiết sản phẩm và trang chủ

Để thực hiện hiển thị nhãn nổi bật cho sản phẩm mà mình đã chọn ở phần trên ra trang chủ hay các trang chi tiết sản phẩm, trang cửa hàng bạn chỉ cần chèn 2 đoạn code sau vào hệ thống.

Lưu ý: Trước khi thực hiện chèn code vào website, hãy backup lại hệ thống của bạn để tránh trường hợp chèn sai hoặc xảy ra xung đột khiến website bị lỗi. Trường hợp bạn không rành về chỉnh sửa code, hãy nhờ người có chuyên môn hỗ trợ.

Bước 1: Vào Giao diện => Child Theme => Theme File Editor => Chọn file Functions.php.

Bạn nên thực hiện chỉnh sửa trên giao diện child theme để an toàn cho giao diện chính.

Tạo nhãn nổi bật cho sản phẩm trong WooCommerce 2 — Trong phần chỉnh sửa giao diện, lưu ý chọn giao diện để chỉnh sửa là child theme. Và chọn các file giao diện đúng như trong bài.

Sau đó chèn đoạn code sau vào cuối trong file functions.php:

// Hiện thị nhãn nổi bật trong trang sản phẩm
add_action( 'woocommerce_before_shop_loop_item_title', 'flatsome_product_featured_badge', 10 );
function flatsome_product_featured_badge() {
    global $product;
    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {
        // Get productID
        $product_id = $product->get_id();
        // Returns an array containing the IDs of the featured products.
        $featured_product_ids = wc_get_featured_product_ids();
        // Checks if a value exists in an array
        if ( in_array( $product_id, $featured_product_ids ) ) {
            echo '<span class="featured-badge">Nổi bật</span>';
        } 
    }
}
// Hiện thị nhãn nổi bật trong chi tiết sản phẩm
add_action( 'woocommerce_single_product_summary', 'flatsome_single_product_featured_badge', 1 );
function flatsome_single_product_featured_badge() {
    global $product;
    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {
        // Get productID
        $product_id = $product->get_id();
        // Returns an array containing the IDs of the featured products.
        $featured_product_ids = wc_get_featured_product_ids();
        // Checks if a value exists in an array
        if ( in_array( $product_id, $featured_product_ids ) ) {
            echo '<span class="featured-badge-sing">Nổi bật</span>';
        } 
    }
}

// Hiện thị nhãn nổi bật trong trang sản phẩm

add_action( 'woocommerce_before_shop_loop_item_title', 'flatsome_product_featured_badge', 10 );

function flatsome_product_featured_badge() {

global $product;

// Is a WC product

if ( is_a( $product, 'WC_Product' ) ) {

// Get productID

$product_id = $product->get_id();

// Returns an array containing the IDs of the featured products.

$featured_product_ids = wc_get_featured_product_ids();

// Checks if a value exists in an array

if ( in_array( $product_id, $featured_product_ids ) ) {

echo '<span class="featured-badge">Nổi bật</span>';

}

// Hiện thị nhãn nổi bật trong chi tiết sản phẩm

add_action( 'woocommerce_single_product_summary', 'flatsome_single_product_featured_badge', 1 );

function flatsome_single_product_featured_badge() {