Bạn đang muốn thêm Badge & Logo cho sản phẩm giống Amazon nhưng chưa biết làm thế nào. Hãy làm theo các hướng dẫn dưới đây nhé, trước khi copy code tôi xin gửi đến bạn tính năng của code này:

Tính năng chính của code Thêm Badge & Logo cho sản phẩm

1. Thêm Nhãn Sản Phẩm (Badge):

• Người quản trị có thể thêm văn bản nhãn tùy chỉnh (ví dụ: “Best Seller”, “Hot”) cho từng sản phẩm.
• Hỗ trợ tùy chỉnh màu nền của nhãn thông qua công cụ chọn màu trong giao diện quản trị.
• Nhãn được hiển thị ở góc trên bên trái của sản phẩm trong danh sách cửa hàng.

2. Thêm Logo Sản Phẩm:

– Cho phép tải lên một hình ảnh logo nhỏ (ví dụ: logo Prime) thông qua trình quản lý media của WordPress.
– Logo được hiển thị bên dưới hình ảnh sản phẩm trong danh sách cửa hàng.

Hướng dẫn Thêm Badge & Logo cho sản phẩm giống Amazon

Bước 1: Bạn copy code dưới đây vào file function.php

add_action('add_meta_boxes', function () {
add_meta_box('nguyenlan_product_labels', 'Product Badge & Logo', function ($post) {
$label = get_post_meta($post->ID, '_nguyenlan_label', true);
$color = get_post_meta($post->ID, '_nguyenlan_label_color', true);
$logo_id = get_post_meta($post->ID, '_nguyenlan_logo', true);
$logo_url = $logo_id ? wp_get_attachment_image_url($logo_id, 'thumbnail') : '';

echo '<p><label><strong>Badge text:</strong></label><br>';
echo '<input type="text" name="nguyenlan_label" value="' . esc_attr($label) . '" style="width:100%" placeholder="Best Seller, Hot, New..."></p>';

echo '<p><label><strong>Badge background color:</strong></label><br>';
echo '<input type="color" name="nguyenlan_label_color" value="' . esc_attr($color ?: '#d14900') . '"></p>';

echo '<p><label><strong>Small logo (e.g. Prime):</strong></label><br>';
echo '<input type="hidden" name="nguyenlan_logo" id="nguyenlan_logo" value="' . esc_attr($logo_id) . '">';
echo '<img id="nguyenlan_logo_preview" src="' . esc_url($logo_url) . '" style="max-width:100px; display:block; margin-bottom:10px;">';
echo '<button type="button" class="button" id="nguyenlan_logo_upload">Choose Logo</button></p>';
}, 'product', 'side');
});

add_action('save_post_product', function ($post_id) {
if (isset($_POST['nguyenlan_label'])) {
update_post_meta($post_id, '_nguyenlan_label', sanitize_text_field($_POST['nguyenlan_label']));
}
if (isset($_POST['nguyenlan_label_color'])) {
update_post_meta($post_id, '_nguyenlan_label_color', sanitize_hex_color($_POST['nguyenlan_label_color']));
}
if (isset($_POST['nguyenlan_logo'])) {
update_post_meta($post_id, '_nguyenlan_logo', absint($_POST['nguyenlan_logo']));
}
});
add_action('admin_footer', function () {
if (!get_current_screen() || get_current_screen()->post_type !== 'product') return;
?>
<script>
jQuery(document).ready(function($){
$('#nguyenlan_logo_upload').on('click', function(e){
e.preventDefault();
const frame = wp.media({
title: 'Select Logo Image',
multiple: false,
library: { type: 'image' },
button: { text: 'Use this logo' }
});
frame.on('select', function(){
const attachment = frame.state().get('selection').first().toJSON();
$('#nguyenlan_logo').val(attachment.id);
$('#nguyenlan_logo_preview').attr('src', attachment.url).show();
});
frame.open();
});
});
</script>
<?php
});
add_action('woocommerce_before_shop_loop_item', function () {
global $product;

$label = get_post_meta($product->get_id(), '_nguyenlan_label', true);
$color = get_post_meta($product->get_id(), '_nguyenlan_label_color', true);

if (!empty($label)) {
echo '<div class="nguyenlan-badge-wrap">';
echo '<div class="nguyenlan-badge-label" style="background:' . esc_attr($color ?: '#e47911') . ';">' . esc_html($label) . '</div>';
echo '</div>';
}
}, 1);
add_action('woocommerce_before_shop_loop_item_title', function () {
global $product;

$logo_id = get_post_meta($product->get_id(), '_nguyenlan_logo', true);
$logo_url = $logo_id ? wp_get_attachment_image_url($logo_id, 'thumbnail') : '';

if ($logo_url) {
echo '<div class="nguyenlan-logo-badge"><img src="' . esc_url($logo_url) . '" alt="Badge Logo" /></div>';
}
}, 1);
add_action('wp_head', function () {
?>
<style>
.nguyenlan-badge-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.nguyenlan-badge-label {
color: white;
padding: 4px 10px;
font-size: 13px;
font-weight: bold;
border-bottom-right-radius: 5px;
text-transform: uppercase;
display: inline-block;
}
.nguyenlan-logo-badge img {
height:auto;
width: 80px;
}
ul.products li.product {
position: relative;
}
</style>
<?php
});

Bước 2: Vào chi tiết sản phẩm sẽ có thêm tùy chọn điền label và upload logo riêng cho sản phẩm.

Đây một công cụ mạnh mẽ để tăng tính chuyên nghiệp và thu hút cho cửa hàng WooCommercekhông chỉ hoạt động tốt cho Flatsome mà còn cho tất cả các theme khác