Hiển thị giảm giá được bao nhiêu tiền và bao nhiêu phần trăm trong WooCommerce

Trong thương mại điện tử, sự minh bạch về lợi ích tài chính là đòn bẩy tâm lý cực mạnh. Thay vì để khách hàng phải tự tính nhẩm, việc hiển thị giảm giá được bao nhiêu tiền và bao nhiêu phần trăm trong WooCommerce ngay cạnh giá bán sẽ thúc đẩy hành vi mua hàng nhanh chóng hơn.

Bài viết này sẽ hướng dẫn bạn cách tùy biến giao diện giá sản phẩm bằng Code (thêm vào functions.php) mà không cần cài đặt thêm plugin nặng nề.

Tại sao nên hiển thị cụ thể số tiền tiết kiệm được?

Trước khi đi vào kỹ thuật, hãy nhìn vào lợi ích thực tế:

• Đánh vào tâm lý “Sợ bỏ lỡ” (FOMO): Nhìn thấy con số “Tiết kiệm 500.000đ” có tác động mạnh hơn nhiều so với việc chỉ thấy giá giảm.

• Cải thiện trải nghiệm người dùng (UX): Giúp khách hàng ra quyết định nhanh hơn mà không cần tính toán.

• Tăng tỷ lệ Click-through (CTR): Nếu hiển thị ở trang danh sách (Shop page), sản phẩm của bạn sẽ nổi bật hơn đối thủ.

Cách 1: Sử dụng Code Snippet (Khuyên dùng cho Dev)

Đây là phương pháp tối ưu nhất vì nó không làm chậm website như khi cài plugin. Bạn sẽ chèn đoạn code sau vào file functions.php của Child Theme.

Đoạn code này sẽ can thiệp vào filter woocommerce_format_sale_price để thay đổi cách hiển thị giá.

Đoạn code PHP hiển thị số tiền và % giảm giá

/**
 * Hiển thị số tiền tiết kiệm và phần trăm giảm giá trong WooCommerce
 */
add_filter( 'woocommerce_format_sale_price', 'expert_custom_format_sale_price', 10, 3 );

function expert_custom_format_sale_price( $price, $regular_price, $sale_price ) {
    // 1. Tính toán số tiền tiết kiệm
    // Đảm bảo các biến là số thực để tính toán chính xác
    $regular_price = (float) $regular_price;
    $sale_price    = (float) $sale_price;
    
    $saving_amount = $regular_price - $sale_price;
    
    // 2. Tính toán phần trăm giảm giá
    $percentage = round( ( $saving_amount / $regular_price ) * 100 );
    
    // 3. Định dạng tiền tệ theo cài đặt của WooCommerce
    $saving_amount_formatted = wc_price( $saving_amount );
    $regular_price_formatted = wc_price( $regular_price );
    $sale_price_formatted    = wc_price( $sale_price );

    // 4. Tạo chuỗi hiển thị mới
    // Cấu trúc: Giá cũ (gạch ngang) - Giá mới - [Tiết kiệm Xđ (Y%)]
    $price_html = '<del aria-hidden="true">' . $regular_price_formatted . '</del> <ins>' . $sale_price_formatted . '</ins>';
    
    // Thêm phần hiển thị tiết kiệm
    $price_html .= sprintf( 
        '<div class="you-save-price">Tiết kiệm: <span class="save-amount">%s</span> <span class="save-percent">(%s%%)</span></div>', 
        $saving_amount_formatted, 
        $percentage 
    );

    return $price_html;
}

Giải thích code:

1. Hook: Sử dụng woocommerce_format_sale_price để đảm bảo thay đổi áp dụng cho cả trang cửa hàng (Shop/Category) và trang chi tiết sản phẩm (Single Product).

2. Tính toán: Code tự động lấy regular_price trừ đi sale_price để ra số tiền thực tế, và dùng công thức toán học để ra phần trăm.

3. Format: Sử dụng wc_price() để đảm bảo số tiền hiển thị đúng định dạng tiền tệ (VND, USD…) mà bạn đã cài trong WooCommerce.

Cách 2: Trang trí (CSS) để làm nổi bật giá giảm

Sau khi thêm code trên, dòng chữ “Tiết kiệm…” có thể trông hơi đơn điệu. Hãy thêm CSS sau vào Appearance (Giao diện) > Customize (Tùy biến) > Additional CSS:

/* Style cho khung hiển thị tiết kiệm */
.you-save-price {
    font-size: 0.9em;
    color: #27ae60; /* Màu xanh lá cây tạo cảm giác lời lãi */
    margin-top: 5px;
    font-weight: 500;
    background-color: #e8f5e9;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
}

.you-save-price .save-amount {
    font-weight: bold;
}

/* Tùy chỉnh hiển thị trên mobile để không bị vỡ khung */
@media (max-width: 768px) {
    .you-save-price {
        display: block; /* Xuống dòng trên điện thoại */
        width: fit-content;
    }
}

Xử lý trường hợp Sản phẩm có biến thể (Variable Product)

Đối với sản phẩm có biến thể (ví dụ: Áo có size S, M, L với giá khác nhau), WooCommerce thường hiển thị khoảng giá (ví dụ: 100k – 200k).

Để hiển thị chính xác giảm giá được bao nhiêu tiền và bao nhiêu phần trăm cho từng biến thể khi khách hàng chọn, bạn sẽ cần can thiệp sâu hơn vào JavaScript hoặc sử dụng hook woocommerce_available_variation.

Tuy nhiên, một giải pháp đơn giản hơn cho biến thể là chỉ hiển thị phần trăm giảm giá cao nhất bằng cách thêm code sau:

add_filter( 'woocommerce_variable_sale_price_html', 'expert_variable_price_format', 10, 2 );

function expert_variable_price_format( $price, $product ) {
    // Lấy tất cả giá của các biến thể
    $prices = $product->get_variation_prices( true );
    
    if ( empty( $prices['price'] ) ) return $price;

    // Lấy giá thấp nhất và cao nhất
    $min_price = current( $prices['price'] );
    $max_regular_price = max( $prices['regular_price'] );

    // Tính % giảm tối đa
    $percentage = round( ( ( $max_regular_price - $min_price ) / $max_regular_price ) * 100 );

    return $price . '<span class="variable-save-badge"> Giảm tới ' . $percentage . '%</span>';
}

Tổng kết

Việc tùy chỉnh hiển thị giảm giá được bao nhiêu tiền và bao nhiêu phần trăm trong WooCommerce là một kỹ thuật nhỏ nhưng mang lại hiệu quả lớn về mặt thị giác và tâm lý.

• Ưu điểm: Không cần plugin, nhẹ web, tùy biến cao.

• Lưu ý: Hãy luôn backup website hoặc sử dụng Child Theme trước khi sửa file functions.php.

Bằng cách áp dụng đoạn code và CSS trên, cửa hàng của bạn sẽ trở nên chuyên nghiệp hơn và kích thích khách hàng “chốt đơn” hiệu quả hơn.