Hướng Dẫn Thêm “Giảm X%” tiết kiệm Sau Giá Sản Phẩm

Nếu bạn đang quản lý một cửa hàng trực tuyến trên nền tảng WordPress với WooCommerce, việc hiển thị rõ ràng phần trăm giảm giá ngay bên cạnh giá sản phẩm có thể giúp tăng tỷ lệ chuyển đổi và cải thiện trải nghiệm người dùng.

Tôi đã từng được nhiều khách hàng yêu cầu làm việc này, nên trong bài viết hôm nay, tôi sẽ chia sẻ cách thêm “Giảm X%” ngay sau giá trong trang chi tiết sản phẩm một cách đơn giản, sử dụng code PHP và CSS.

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'nguyenlan_single_price_with_sale_percent', 10 );
function nguyenlan_single_price_with_sale_percent() {
global $product;

if ( ! $product ) return;

$html_percent = ”;

if ( $product->is_type(‘simple’) && $product->is_on_sale() ) {
$regular = (float) $product->get_regular_price();
$sale = (float) $product->get_sale_price();
if ( $regular > 0 ) {
$percent = round( ( ( $regular – $sale ) / $regular ) * 100 );
$html_percent = ‘<span class=”nguyenlan_price sale_amount”>(Giảm ‘ . $percent . ‘%)</span> ‘;
}
}
elseif ( $product->is_type(‘variable’) ) {
$prices = $product->get_variation_prices();

if ( $product->is_on_sale() ) {
$regular_min = current($prices[‘regular_price’]);
$regular_max = end($prices[‘regular_price’]);
$sale_min = current($prices[‘sale_price’]);
$sale_max = end($prices[‘sale_price’]);

if ( $regular_min === $regular_max && $sale_min === $sale_max ) {
$percent = round( ( ( (float)$regular_min – (float)$sale_min ) / (float)$regular_min ) * 100 );
$html_percent = ‘<span class=”nguyenlan_price sale_amount”>(Giảm ‘ . $percent . ‘%)</span> ‘;
}
}
}

echo ‘<p class=”price”>’ . $html_percent . $product->get_price_html() . ‘</p>’;
}

add_filter( ‘woocommerce_available_variation’, ‘nguyenlan_add_sale_percent_to_variation_price’, 10, 3 );
function nguyenlan_add_sale_percent_to_variation_price( $data, $product, $variation ) {

if ( $variation->is_on_sale() ) {

$regular = (float) $variation->get_regular_price();
$sale = (float) $variation->get_sale_price();

if ( $regular > 0 && $sale > 0 && !empty($data[‘price_html’])) {
$percent = round( ( ( $regular – $sale ) / $regular ) * 100 );

$data[‘price_html’] =
‘<span class=”nguyenlan_price sale_amount”>(Giảm ‘ . $percent . ‘%)</span> ‘
. $data[‘price_html’];
}
}

return $data;
}

Giải thích chi tiết code:

Remove action: Loại bỏ cách hiển thị giá mặc định của WooCommerce để thay bằng phiên bản tùy chỉnh.
Hàm chính: Tính toán phần trăm giảm dựa trên giá gốc và giá sale, chỉ hiển thị khi sản phẩm đang on sale. Đối với variable, code kiểm tra giá min/max để đảm bảo tính chính xác.
Filter cho variation: Cập nhật giá động khi khách chọn biến thể, giúp phần trăm giảm xuất hiện ngay lập tức mà không cần reload trang.

Sau khi thêm code, lưu file và kiểm tra trang chi tiết sản phẩm. Nếu không thấy thay đổi, hãy clear cache (sử dụng plugin như WP Super Cache).

Tùy Chỉnh CSS Để Hiển Thị Đẹp Mắt

Để “Giảm X%” trông chuyên nghiệp, thêm CSS sau vào phần Customizer > Additional CSS hoặc file style.css của theme. Tôi thiết kế để nó nằm ngay sau giá, với font nhỏ hơn một chút.

span.nguyenlan_price.sale_amount {
font-size: 14px;
font-weight: 400;
letter-spacing: normal;
}
.woocommerce div.product div.summary > p.price {
display: flex;
}
.woocommerce div.product div.summary > p.price span.nguyenlan_price.sale_amount {
order: 3;
margin-left: 10px;
}

Mẹo tùy chỉnh: Điều chỉnh màu sắc phù hợp với theme của bạn (ví dụ: xanh lá cho tích cực). Kiểm tra trên mobile để đảm bảo responsive.
Lưu Ý Khi Triển Khai Và Khắc Phục Lỗi Thường Gặp. Nếu gặp vấn đề, comment bên dưới hoặc liên hệ tôi qua email