Code thêm badge Hàng mới cho sản phẩm mới đăng trong Flatsome

Bài viết này mình sẽ hướng dẫn bạn cách thêm badge Hàng mới cho sản phẩm mới đăng trong Flatsome nhé.

Shop nhập hàng mới liên tục mà khách vào trang cửa hàng thì không phân biệt được đâu là hàng mới về, đâu là hàng đã bán cả năm nay, món mới cứ chìm giữa cả trăm sản phẩm cũ. Một badge nhỏ màu xanh lá “HÀNG MỚI” dán góc ảnh sản phẩm là đủ để mắt khách dừng lại ngay ở món mới. Flatsome mặc định chỉ có badge Giảm giá, không có badge Hàng mới, nên muốn có thì bạn phải code thêm bằng PHP nhé.

Thêm code badge Hàng mới

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme Flatsome nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
// Badge "Hàng mới" cho sản phẩm mới đăng trong Flatsome
// Cách dùng: dán code này vào cuối file functions.php của child theme Flatsome.
// Badge tự hiện trên ảnh sản phẩm ở trang cửa hàng và trang danh mục,
// rồi tự mất khi sản phẩm đăng quá 14 ngày. Đổi số 14 trong code nếu bạn
// muốn giữ badge lâu hơn hoặc ngắn hơn.
add_action( 'woocommerce_before_shop_loop_item_title', 'nn_badge_hang_moi_flatsome', 15 );
function nn_badge_hang_moi_flatsome() {
    global $product;
    if ( ! $product ) {
        return;
    }
    $ngay_tao = $product->get_date_created();
    if ( ! $ngay_tao ) {
        return;
    }
    $so_ngay = 14;
    if ( time() - $ngay_tao->getTimestamp() > $so_ngay * DAY_IN_SECONDS ) {
        return;
    }
    echo '<span class="nn-badge-hang-moi">Hàng mới</span>';
}

add_action( 'wp_head', 'nn_badge_hang_moi_css' );
function nn_badge_hang_moi_css() {
    if ( ! function_exists( 'is_shop' ) ) {
        return;
    }
    if ( ! is_shop() && ! is_product_category() && ! is_product_tag() && ! is_search() ) {
        return;
    }
    echo '<style>.product-small .box-image { position: relative; } .nn-badge-hang-moi { position: absolute; top: 12px; right: 12px; z-index: 2; background: #16a34a; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .5px; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; }</style>';
}

Code trên móc vào hook woocommerce_before_shop_loop_item_title với độ ưu tiên 15, tức chạy ngay sau ảnh sản phẩm và badge Giảm giá mặc định của WooCommerce (độ ưu tiên 10), nên badge mới không đè lên badge cũ. Hàm lấy ngày đăng sản phẩm qua $product->get_date_created()->getTimestamp() rồi so với thời điểm hiện tại, sản phẩm nào đăng trong vòng 14 ngày thì in ra thẻ span “Hàng mới”, quá 14 ngày thì thôi nên badge tự biến mất mà bạn không cần gỡ tay. Phần CSS đặt badge ở góc phải trên của ảnh sản phẩm, đối diện với badge Giảm giá ở góc trái, và chỉ nạp ở trang cửa hàng, trang danh mục, trang thẻ và trang tìm kiếm nhờ kiểm tra is_shop(), is_product_category(), is_product_tag() và is_search().

Kiểm tra badge Hàng mới

Bạn đăng thử một sản phẩm mới, hoặc sửa ngày đăng của một sản phẩm cũ về hôm nay, rồi mở trang cửa hàng hoặc trang danh mục chứa sản phẩm đó, ảnh sản phẩm sẽ có badge xanh lá “HÀNG MỚI” ở góc phải trên. Sản phẩm đăng đã quá 14 ngày thì không có badge. Nếu muốn giữ badge lâu hơn, ví dụ 30 ngày cho shop ít nhập hàng mới, bạn chỉ cần đổi số 14 trong code thành 30 là được.

Lưu ý khi dùng

Badge chỉ hiện ở lưới sản phẩm ngoài trang cửa hàng và danh mục, chưa hiện trong trang chi tiết sản phẩm, vì hook dùng ở đây chỉ chạy ở vòng lặp sản phẩm. Con số 14 ngày tính theo ngày đăng sản phẩm chứ không phải ngày nhập kho, nên sản phẩm bạn đăng nháp từ lâu rồi mới bấm đăng thì badge tính từ lúc bấm đăng. Tính năng này đi chung với bài code tùy biến badge giảm giá hiển thị số tiền tiết kiệm trong Flatsome là thành bộ badge đầy đủ cho lưới sản phẩm Flatsome.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm badge Hàng mới cho sản phẩm mới đăng trong Flatsome mà không cần cài thêm plugin rồi nhé. Tính năng này đi chung với bài code tùy biến badge giảm giá hiển thị số tiền tiết kiệm trong Flatsome và bài code hiển thị số lượng còn lại trong kho trong Flatsome là thành bộ thông tin sản phẩm rõ ràng hơn cho khách mua hàng.

Nếu cần mình kèm 1-1 về Flatsome thì cứ liên hệ mình nhé.