Thay thế “chữ” Giảm giá bằng “số” Phần trăm Giảm giá trong Woocommerce

Đối với các Theme có hỗ trợ tối ưu Woocomerce thì đa số sẽ có sẵn hiển thị này. Nhưng không phải ai cũng thích một theme có sẵn hoặc các themes được chia sẻ bới nó có thể “không sạch”.

Nếu tự thiết kế một theme có Woo, thì đoạn code này là một điều có giá trị lớn, chúng tôi tin là thế.

Chia sẻ với các bạn đoạn code và hướng dẫn Thay thế “chữ” Giảm giá bằng “số” Phần trăm Giảm giá trong Woocommerce. Sẽ dễ hình dung hơn với nội dung hình ảnh giải thích bên dưới.

1. Đoạn code

– – – – – – – – – –

// Display the Woocommerce Discount Percentage on the Sale Badge for variable products and single products
add_filter( 'woocommerce_sale_flash', 'display_percentage_on_sale_badge', 20, 3 );
function display_percentage_on_sale_badge( $html, $post, $product ) {

if( $product->is_type('variable')){
$percentages = array();

// This will get all the variation prices and loop throughout them
$prices = $product->get_variation_prices();

foreach( $prices['price'] as $key => $price ){
// Only on sale variations
if( $prices['regular_price'][$key] !== $price ){
// Calculate and set in the array the percentage for each variation on sale
$percentages[] = round( 100 - ( floatval($prices['sale_price'][$key]) / floatval($prices['regular_price'][$key]) * 100 ) );
}
}
// Displays maximum discount value
$percentage = max($percentages) . '%';

} elseif( $product->is_type('grouped') ){
$percentages = array();

// This will get all the variation prices and loop throughout them
$children_ids = $product->get_children();

foreach( $children_ids as $child_id ){
$child_product = wc_get_product($child_id);

$regular_price = (float) $child_product->get_regular_price();
$sale_price = (float) $child_product->get_sale_price();

if ( $sale_price != 0 || ! empty($sale_price) ) {
// Calculate and set in the array the percentage for each child on sale
$percentages[] = round(100 - ($sale_price / $regular_price * 100));
}
}
// Displays maximum discount value
$percentage = max($percentages) . '%';

} else {
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();

if ( $sale_price != 0 || ! empty($sale_price) ) {
$percentage = round(100 - ($sale_price / $regular_price * 100)) . '%';
} else {
return $html;
}
}
return '<span class="onsale">' . esc_html__( '- ', 'woocommerce' ) . ' '. $percentage . '</span>'; // If needed then change or remove "up to -" text
}

– – – – – – – – – –

2. Hướng dẫn thực hiện

Copy đoạn code bên dưới và dán vào file functions.php của theme hiện hành. Nhớ Lưu lại để thực hiện.

Khi kiểm tra đã hiển thị “phần trăm giảm giá” rồi thì đã thành công. Sau đó kiểm tra tiếp trang Web có hiển thị lỗi hay gì không? Nếu không thì bạn có thể an tâm để chuyển qua bước tiếp theo.

Tiếp theo, chỉnh sửa CSS hiển thị để đẹp hơn. (Xem đoạn CSS bên dưới)

3. Chỉnh giao diện hiển thị bằng CSS

Chia sẻ một đoạn code CSS (mẫu) cho hiển thị giao diện, các bạn có thể sửa lại cho phù hợp với mình.

span.onsale {
display: block;
color: #fff;
background-color: #f75406;
font-family: "Helvetica", Sans-serif;
font-size: .8rem;
font-weight: 600;
text-transform: capitalize;
font-style: normal;
text-decoration: none;
line-height: 23px;
letter-spacing: 0px;
border-radius: 5px;
min-width: 80px;
min-height: 23px;
right: auto;
left: 0;
margin: -5px;
}

Đoạn code CSS trên sẽ cho ra hiển thị như sau:

Nếu hướng dẫn trên không giúp được các bạn vì có lỗi hoặc không phù hợp thì hãy để lại comment cho chúng tôi biết nhé !

Chúc các bạn thành công !