[Hướng dẫn] Thay đổi cách hiển thị giá siêu đẹp trong Woocommerce

chèn text phía trước giá bán 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, flatsomea-z 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. Let’s go!

[Hướng dẫn] Thay đổi cách hiển thị giá siêu đẹp trong Woocommerce

Bước 1: Chèn thêm chữ Giá niêm yết và Giá khuyến mãi trước phần giá mặc định của Woocommerce!

Copy và paste đoạn code sau vào file functions.php nhé

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 );

Kết quả sẽ như này:

chèn text phía trước giá bán woocommerce
chèn text phía trước giá bán woocommerce

Bước 2: Thêm % giảm giá vào giữa giá niêm yết và giá khuyến mãi nhé!

Copy và paste đoạn code sau vào file functions.php nhé! (Giao diện > Chỉnh sửa giao diện > Child theme > 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.

Kết quả sẽ như thế này

Thay thế giá mặc định Woocommerce bằng giá của sản phẩm biến thể được chọn-02
Thay thế giá mặc định Woocommerce bằng giá của sản phẩm biến thể được chọn-02

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

 

Trả lời

Email của bạn sẽ không được hiển thị công khai.