Cara menampilkan "Anda Hemat x%" di bawah harga jual untuk produk sederhana dan variabel di WooCommerce
Diterbitkan: 2019-04-03Kita semua tahu bagaimana diskon memikat pelanggan dan meningkatkan penjualan. Tetapi menunjukkan bahwa Anda menjual barang dengan harga lebih rendah tidak cukup hari ini, dengan semua pengecer & situs web e-niaga menawarkan diskon pada saat yang sama. Ketika hanya harga lama dan baru yang ditampilkan, pelanggan dibiarkan menghitung berapa banyak yang sebenarnya dia hemat. Cara yang lebih baik untuk menangani ini adalah dengan menampilkan persentase jumlah yang dihemat pelanggan saat melakukan pembelian itu. Ini memberi mereka ide yang lebih baik dan cara yang lebih mudah untuk memutuskan apakah akan melakukan pembelian itu. Mari kita lihat bagaimana Anda dapat menampilkan "Anda Hemat x%" di sebelah harga jual untuk produk sederhana dan variabel di WooCommerce.
Cara Menampilkan Anda Hemat % di bawah harga jual untuk produk sederhana
Menampilkan persentase jumlah yang dihemat mudah untuk produk sederhana setelah harga reguler dan harga jual diketahui. Dalam kasus normal, harga untuk produk sederhana ini ditampilkan sebagai berikut:
Menambahkan kode di bawah ini ke file functions.php dari tema anak Anda akan menampilkan "Anda Hemat x%" di bawah harga produk sederhana, sehingga pengguna segera mengetahui seberapa baik atau buruk kesepakatan itu.
fungsi ts_you_save() {
global $produk;
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 );
jika( !kosong($sale_price) ) {
$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$persentase = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<p><b>Anda Menyimpan: <?php echo number_format($percentage,0, '', '').'%'; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );Dalam cuplikan kode ini, kami telah menambahkan fungsi ts_you_save() ke kait WooCommerce bawaan woocommerce_single_product_summary , yang menunjuk ke area di bawah judul produk. Fungsi ts_you_save() mengidentifikasi jenis produk dan menghitung persentase jumlah yang disimpan jika produk sedang dijual. Dengan menambahkan beberapa CSS, Anda dapat mencetak ini dengan cara yang Anda inginkan:
Jika Anda ingin menampilkan jumlah yang disimpan beserta persentasenya, Anda dapat mengubah sedikit cuplikan kode yang sama dengan cara berikut:
fungsi ts_you_save() {
global $produk;
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 );
jika( !kosong($sale_price) ) {
$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$persentase = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<p><b>Anda Menyimpan: <?php echo number_format($amount_saved,2, '.', '')." (". number_format($percentage,0, '', '')."%)" ; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );Fungsi number_format adalah fungsi PHP bawaan yang menerima 4 argumen:
- Jumlah atau dalam kasus kami, jumlah dan persentase yang disimpan masing-masing (kami telah menggunakan fungsi dua kali).
- Jumlah tempat desimal. Kami telah menetapkannya ke 2 untuk jumlah yang disimpan, dan 0 untuk persentase karena kami tidak ingin menampilkan nilai desimal apa pun untuk persentase.
- Pemisah desimal yang ingin Anda gunakan. Kami telah menetapkan ini ke titik (.) untuk jumlah yang disimpan dan nilai kosong untuk persentase.
- Pemisah seribu. Jika jumlah yang disimpan melebihi 1000, Anda dapat menggunakan argumen ini. Kami telah mengaturnya menjadi kosong saat ini.
Jumlah yang disimpan serta persentase sekarang akan ditampilkan di bawah harga:
Cara Menampilkan Anda Hemat % di bawah harga jual untuk produk variabel
Ketika datang ke produk variabel, ini menjadi rumit karena setiap variasi produk dapat memiliki harga yang berbeda. Misalnya, sebuah tshirt mungkin dihargai lebih tinggi untuk ukuran yang lebih besar sementara harganya mungkin lebih rendah untuk tshirt yang sama dalam ukuran yang lebih kecil. Untuk kasus seperti ini, WooCommerce menampilkan kisaran harga promo di bawah judul produk, sedangkan harga reguler & promo setiap variasi produk ditampilkan di atas tombol Tambahkan ke Keranjang saat variasi dipilih. Ini telah diilustrasikan oleh gambar-gambar di bawah ini:
Dalam hal ini, kami akan mencetak teks “Anda Simpan” bersama dengan persentase yang disimpan di bawah harga yang ditampilkan untuk variasi tertentu. Anda perlu menambahkan potongan kode ke file functions.php dan footer.php dari tema anak Anda .
Cuplikan kode berikut yang akan Anda tambahkan di file footer.php berisi fungsi yang dipicu saat variasi diubah. Dalam kasus kami, ini dipicu ketika variasi ukuran dipilih atau diubah menggunakan dropdown Ukuran. Fungsi ini menangkap id variasi tertentu dan mengirimkannya ke functions.php melalui panggilan ajax.
<skrip>
jQuery(dokumen).siap(fungsi($) {
$('input.variation_id').change( function(){
if( '' != $('input.variation_id').val() ) {
var var_id = $('input.variation_id').val(); // ID variasi yang Anda pilih
$.ajax({
url: "https://<your_woocommerce_site_url>/wp-admin/admin-ajax.php",
data: {'action':'ts_calc_percentage_saved','vari_id': var_id} ,
sukses: fungsi(data) {
jika (data>0)
{
$( ".woocommerce-variation-price" ).append( "<p>Anda Menyimpan: "+data+"%</p>");
}
},
kesalahan: fungsi(errorThrown){
console.log(errorThrown);
}
});
}
});
});
</skrip>
Anda perlu mengganti <your_woocommerce_site_url> dengan URL dasar situs web WooCommerce Anda.
Cuplikan kode berikut yang akan Anda tambahkan dalam file functions.php berisi fungsi ts_calc_percentage_saved yang mengambil harga reguler & harga jual produk berdasarkan id variasi, menghitung persentase dan mengembalikan yang sama ke fungsi ajax di footer. file php.
//Ini adalah bagaimana Anda menghubungkan fungsi yang dipanggil oleh ajax, di WordPress
add_action("wp_ajax_ts_calc_percentage_saved", "ts_calc_percentage_saved");
//Fungsi di bawah ini dipanggil melalui skrip ajax di footer.php
fungsi ts_calc_percentage_saved(){
// $_REQUEST berisi semua data yang dikirim melalui ajax
jika ( isset($_REQUEST) ) {
$persentase=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();
jika( !kosong($sale_price) ) {
$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$persentase = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
}
mati($persentase);
}
}Fungsi sanitize_text_field() adalah fungsi WordPress yang membantu membersihkan input yang kami terima dari sisi klien.
Dengan demikian, Anda sekarang akan melihat "Anda Hemat", bersama dengan persentase jumlah yang disimpan, di bawah harga variasi.
Anda dapat mengatur gaya ini sesuka Anda, di dalam fungsi ajax itu sendiri, dengan menambahkan HTML dan CSS di dalam fungsi append pada baris ini:
$( “.woocommerce-variation-price” ).append( “<p>Anda Menyimpan: “+data+”%</p>”);
Tampilkan Anda Hemat % di bawah judul produk alih-alih di atas tombol Tambahkan ke Keranjang untuk produk variabel
Jika mau, Anda dapat menampilkan teks Anda Simpan bersama dengan persentase yang disimpan di bawah judul produk alih-alih di atas tombol “Tambahkan ke Keranjang” dengan menambahkan beberapa cuplikan kode lagi ke yang disebutkan di atas.
Potongan kode ini harus ditambahkan ke file functions.php dari tema anak Anda, selain potongan kode yang disebutkan di atas (dalam file footer.php dan functions.php).
//Kode di bawah ini adalah untuk menggeser harga
fungsi ts_shuffle_variable_product_elements(){
jika ( is_produk() ) {
global $posting;
$produk = wc_get_product( $post->ID );
if ( $produk->is_type( 'variabel' ) ) {
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30 );
}
}
}
add_action( 'woocommerce_before_single_product', 'ts_shuffle_variable_product_elements' );Apa yang dilakukan kode ini pada dasarnya adalah menghapus elemen (termasuk judul) dan mengaturnya kembali seperti yang Anda inginkan. Hasilnya adalah kisaran harga akan dihapus dan harga variasi akan ditampilkan saat Anda memilih variasi, bersama dengan teks Anda Simpan di bawahnya, seperti diilustrasikan:
