Thay đổi cách hiển thị giá siêu đẹp trong Woocommerce

Thay đổi cách hiển thị giá siêu đẹp trong Woocommerce

Như ảnh minh hoạ, vào bài luôn đỡ mất thời gian 😀

Cách 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:

Thay đổi cách hiển thị giá siêu đẹp trong 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

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

Thay đổi cách hiển thị giá siêu đẹp trong Woocommerce
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!

Nguồn: https://flatsomea-z.com/huong-dan-thay-doi-cach-hien-thi-gia-sieu-dep-trong-woocommerce/

Leave a Comment

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.