Bài viết hướng dẫn trên theme Flatsome, các bạn sử dụng theme khác có thể làm tương tự.

Nào, chúng ta cùng thực hành nhé!
Bước 1: Chép code vào function.php
Các bạn thực hiện chép đoạn code sau dán vào function.php nhé! Giao diện – sửa – function.php
/*
* Thay đổi cách hiển thị giá sale trong trang chi tiết sp
*/
functionnbw_price_html($product,$is_variation=false){
ob_start();
if($product->is_on_sale()):
?>
<?php
endif;
if($product->is_on_sale()&&($is_variation||$product->is_type('simple')||$product->is_type('external'))){
$sale_price=$product->get_sale_price();
$regular_price=$product->get_regular_price();
if($regular_price){
$sale=round(((floatval($regular_price)-floatval($sale_price))/floatval($regular_price))*100);
$sale_amout=$regular_price-$sale_price;
?>
<div class="nbw_single_price">
<div>
<span class="nbw_price"><?phpechowc_price($sale_price);?></span>
</div>
<div class="gia-chinh-hang">
<span class="label">Giáchínhhãng:</span>
<span class="nbw_price"><del><?phpechowc_price($regular_price);?></del></span><span class="label-km">-<?phpecho$sale;?>%</span>
</div>
<div class="tiet-kiem-box">
<span class="label">Tiếtkiệm:</span>
<span class="nbw_price sale_amount"><?phpechowc_price($sale_amout);?></span>
</div>
</div>
<?php
}
}elseif($product->is_on_sale()&&$product->is_type('variable')){
$prices=$product->get_variation_prices(true);
if(empty($prices['price'])){
$price=apply_filters('woocommerce_variable_empty_price_html','',$product);
}else{
$min_price =current($prices['price']);
$max_price =end($prices['price']);
$min_reg_price=current($prices['regular_price']);
$max_reg_price=end($prices['regular_price']);
if($min_price!==$max_price){
$price=wc_format_price_range($min_price,$max_price).$product->get_price_suffix();
}elseif($product->is_on_sale()&&$min_reg_price===$max_reg_price){
$sale=round(((floatval($max_reg_price)-floatval($min_price))/floatval($max_reg_price))*100);
$sale_amout=$max_reg_price-$min_price;
?>
<div class="nbw_single_price">
<div>
<span class="nbw_price"><?phpechowc_price($min_price);?></span>
</div>
<div class="gia-chinh-hang">
<span class="label">Giáchínhhãng:</span>
<span class="nbw_price"><del><?phpechowc_price($max_reg_price);?></del></span><span class="label-km">-<?phpecho$sale;?>%</span>
</div>
<div class="tiet-kiem-box">
<span class="label">Tiếtkiệm:</span>
<span class="nbw_price sale_amount"><?phpechowc_price($sale_amout);?></span>
</div>
</div>
<?php
}else{
$price=wc_price($min_price).$product->get_price_suffix();
}
}
echo$price;
}else{?>
<pclass="<?phpechoesc_attr(apply_filters('woocommerce_product_price_class','price'));?>"><?phpecho$product->get_price_html();?></p>
<?php}
returnob_get_clean();
}
functionwoocommerce_template_single_price(){
global$product;
echo nbw_price_html($product);
}
add_filter('woocommerce_available_variation','nbw_woocommerce_available_variation',10,3);
functionnbw_woocommerce_available_variation($args,$thisC,$variation){
$old_price_html=$args['price_html'];
if($old_price_html){
$args['price_html']=nbw_price_html($variation,true);
}
return$args;
}
Bước 2: Trang trí đẹp mắt bằng CSS
Các bạn copy toàn bộ code CSS dưới đây vào Giao diện – Tùy biến – Style – Custom CSS
.nbw_single_price{
margin-bottom:10px;
}
.product-info.price ins bdi,.product-info.price bdi,.nbw_single_price bdi{
font-size:30px;
color:#E5322D;
text-shadow:1px1px0#fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #333;
}
.nbw_single_price.gia-chinh-hang,.nbw_single_price.gia-chinh-hangbdi{
font-size:14px;
color:#565656;
text-shadow:none;
}
del span.amount{
opacity:1;
}
.gia-chinh-hang.label-km{
background:#da0000;
padding:3px7px;
color:white;
border-radius:3px;
}
.nbw_single_price.tiet-kiem-box{
margin-top:5px;
}
Bước 3: Lưu lại và hưởng thành quả
Các bạn thực hiện xem ok không nhé, nếu có lỗi gì báo mình với!