Giá và giá khuyến mại trong Woocommerce – Hướng dẫn thay đổi 1 cách siêu đẹp

Giá và giá khuyến mại trong Woocommerce – Theo mặc định của woocommerce thì giá gốc và giá khuyến mãi hiển thị theo 1 hàng trông vô cùng đơn điệu và chưa thể hiện được hết độ hấp dẫn của món hàng. Hôm nay, mình sẽ hướng dẫn các bạn thay đổi cách hiển thị giá siêu đẹp trong woocommerce bao gồm giá niêm yết, giá khuyến mãi và phần trăm giảm giá đi kèm chỉ với 1 đoạn code.

Giá và giá khuyến mại trong Woocommerce

Giá và giá khuyến mãi trong Woocommerce – Hướng dẫn thay đổi siêu đẹp

Bước 1: Chèn thêm chữ “Giá niêm yết” và “Giá khuyến mãi” vào phần giá và giá khuyến mại trong Woocommerce

Các bạn hãy copy và paste đoạn code sau vào file functions.php nhé (Giao diện>Theme File Editor>function.php)

function bd_rrp_sale_price_html( $price, $product ) {
if ($product->is_on_sale()) :
$has_sale_text = array(
'<ins>' => '<span class="giakhuyenmai">Giá khuyến mãi: </span>',
'<del>' => '<del><span class="gianiemyet">Giá niêm yết: </span>'
);
$return_string = str_replace(array_keys( $has_sale_text ), array_values( $has_sale_text ), $price);
else:
$return_string = '<span class="giathuong">Giá niêm yết: </span>' . $price;
endif;
return $return_string;
}
add_filter( 'woocommerce_get_price_html', 'bd_rrp_sale_price_html', 100, 2 );

Bước 2: Hiển thị phần giảm giá đẹp hơn vào giữa giá gốc và giá khuyến mãi

Copy và paste đoạn code sau vào file functions.php nhé! (Giao diện > Chỉnh sửa giao diện > functions.php)

function add_discount_woocommerce_format_sale_price( $price, $regular_price, $sale_price ){
if ( is_single()||is_cart() ) :
$percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
$price = '<del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del><br class="xuongdong"><sup class="phantramgiamgia">' . __( ' Giảm: ' ) .$percentage. '</sup> <br><ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) : $sale_price ) . '</ins>';

else:
$price = '<del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del><br><ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) : $sale_price ) . '</ins>';
endif;
return $price;
}
add_filter( 'woocommerce_format_sale_price', 'add_discount_woocommerce_format_sale_price', 99, 3 );

Lưu ý khi sử dụng đoạn code này:

  • Mình có chèn thêm điều kiện là chỉ hiển thị % discount ở Single Product page và Cart page. Ở các phần còn lại ví dụ như ở Product Categories, sẽ không hiển thị % discount. Bạn có thể so sánh giữa hai phần if và else để tùy chỉnh.

Và kết quả là

hien thi phan tram giam gia duoi gia ban

Kết luận

Trên đây mình đã hướng dẫn các bạn các để hiển thị phần giá gốc và giá khuyến mại trên woocommerce 1 cách đẹp hơn. Hy vọng nó sẽ giúo ích cho bạn, chúc bạn thành công!!!

Bài viết liên quan

Đánh giá bài viết

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *