Nhiều A/E hỏi làm thế nào để hiển thị được % giảm giá hay số tiền giảm giá trong Woocommerce, bài viết này sẽ giúp ae giải quyết vấn đề này. Bắt đầu thôi..!
Code hiển thị % giảm giá cho các sản phẩm đơn giản
Dễ dàng hiển thị phần trăm số tiền tiết kiệm được đối với các sản phẩm đơn giản chỉ có 2 loại giá: giá gốc và giá bán. Đơn giản được hiển thị như sau:
Thêm mã bên dưới vào tệp functions.php của childtheme của bạn sẽ hiển thị “You save x%” bên dưới giá của sản phẩm đơn giản.
function hwp_you_save() {
global $product;
if( $product->is_type('simple') || $product->is_type('external') || $product->is_type('grouped') ) {
$regular_price = get_post_meta( $product->get_id(), '_regular_price', true );
$sale_price = get_post_meta( $product->get_id(), '_sale_price', true );
if( !empty($sale_price) ) {
$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<p style="font-size:24px;color:red;"><b>You Save: <?php echo number_format($percentage,0, '', '').'%'; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'hwp_you_save', 11 );Trong đoạn mã này, thêm một hàm ts_you_save () vào hook WooCommerce có sẵn woocommerce_single_product_summary , trỏ đến khu vực bên dưới tiêu đề sản phẩm. Hàm ts_you_save () xác định loại sản phẩm và tính toán tỷ lệ phần trăm số tiền tiết kiệm được nếu sản phẩm được giảm giá. Chỗ hiển thị kết quả ae tự tùy chỉnh vị trí hiển thị + thay đổi style theo ý các bạn.
Nếu bạn muốn hiển thị số tiền đã tiết kiệm cùng với tỷ lệ phần trăm, bạn có thể sửa đổi cùng một đoạn mã chỉ một chút theo cách sau:
function hwp_you_save() {
global $product;
if( $product->is_type('simple') || $product->is_type('external') || $product->is_type('grouped') ) {
$regular_price = get_post_meta( $product->get_id(), '_regular_price', true );
$sale_price = get_post_meta( $product->get_id(), '_sale_price', true );
if( !empty($sale_price) ) {
$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<p style="font-size:24px;color:red;"><b>You Save: <?php echo number_format($amount_saved,2, '.', '')." (". number_format($percentage,0, '', '')."%)"; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'hwp_you_save', 11 );=> Xem kết quả:
Cách hiển thị % giảm giá cho các sản phẩm có biến thể
Trường hợp có biến thể thì sao, bài toán trở lên phức tạp hơn rồi. Đối với những trường hợp như thế này, WooCommerce hiển thị phạm vi giá ưu đãi bên dưới tiêu đề sản phẩm, trong khi giá thông thường & giá ưu đãi của từng biến thể của sản phẩm được hiển thị phía trên nút Thêm vào giỏ hàng khi biến thể được chọn. Điều này đã được minh họa bằng những hình ảnh dưới đây:
Trong trường hợp này, hiển thị đoạn “You save” cùng với phần trăm đã tiết kiệm bên dưới giá được hiển thị cho biến thể cụ thể. Bạn sẽ cần thêm các đoạn mã vào cả tệp functions.php và footer.php của childtheme .
Đoạn mã sau mà bạn sẽ thêm vào tệp footer.php chứa một hàm được kích hoạt khi biến thể được thay đổi. Trong trường hợp của chúng tôi, điều này được kích hoạt khi biến thể kích thước được chọn hoặc thay đổi bằng cách sử dụng menu thả xuống Kích thước. Hàm này nắm bắt id biến thể cụ thể và gửi nó đến functions.php thông qua một lệnh gọi ajax.
<script>
jQuery(document).ready(function($) {
$('input.variation_id').change( function(){
if( '' != $('input.variation_id').val() ) {
var var_id = $('input.variation_id').val(); // Your selected variation id
$.ajax({
url: "https://<your_woocommerce_site_url>/wp-admin/admin-ajax.php",
data: {'action':'ts_calc_percentage_saved','vari_id': var_id} ,
success: function(data) {
if (data>0)
{
$( ".woocommerce-variation-price" ).append( "<p>You Save: "+data+"%</p>");
}
},
error: function(errorThrown){
console.log(errorThrown);
}
});
}
});
});
</script>Bạn cần thay thế <your_woocommerce_site_url> bằng URL cơ sở của trang web WooCommerce của mình.
Đoạn mã sau mà bạn sẽ thêm vào tệp functions.php chứa một hàm ts_calc_percentage_saved tìm nạp giá thông thường và giá ưu đãi của sản phẩm dựa trên id biến thể, tính toán tỷ lệ phần trăm và trả về giá trị tương tự cho hàm ajax ở chân trang. tập tin php.
//This is how you hook a function called by ajax, in WordPress
add_action('wp_ajax_ts_calc_percentage_saved', 'ts_calc_percentage_saved');
//The function below is called via an ajax script in footer.php
function ts_calc_percentage_saved(){
// The $_REQUEST contains all the data sent via ajax
if ( isset($_REQUEST) ) {
$percentage=0;
$variation_id = sanitize_text_field($_REQUEST['vari_id']);
$variable_product = wc_get_product($variation_id);
$regular_price = $variable_product->get_regular_price();
$sale_price = $variable_product->get_sale_price();
if( !empty($sale_price) ) {
$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
}
die($percentage);
}
}=> Xem kết quả
Bạn có thể tạo kiểu này theo bất kỳ cách nào bạn muốn, trong chính hàm ajax, bằng cách thêm HTML và CSS trong hàm append trên dòng này:
$ (“.Woocommerce-variable-price”) .append (“<p>You save :“ + data + ”% </p>”);
KẾT:
Như vậy là đã chia sẻ cho ae đoạn mã hiển thị % giảm giá trong website sử dụng Woocomerce, Chỉ cần copy và Paste là đã có tính năng này rồi, nếu không rành thì inbox mình hướng dẫn ahihihi….. Ủng hộ mình bằng cách chia sẻ bài viết để mọi người cùng biết … chúc a/e thành công!
Bài viết liên quan: