Cara memformat harga WooCommerce

Untuk alasan desain, presentasi, atau agar sesuai dengan tema toko atau merek, kami mungkin sering ingin menampilkan harga kami dalam format yang berbeda. Dalam posting ini, Anda akan belajar cara memformat harga WooCommerce menggunakan opsi Pengaturan serta Editor Kode.

Postingan tersebut mencakup tiga poin berikut:

1. Mengganti Pemisah Desimal
2. Mengganti Seribu Pemisah
3. Memformat Harga untuk menerapkan gaya seperti tebal, miring, atau garis bawah

1. Mengganti Pemisah Desimal:

Seringkali, Anda mungkin memiliki nilai desimal dalam harga produk Anda. Ini cukup umum dalam kasus toko kelontong online di mana harga ditentukan oleh berat sayuran:

Di banyak negara, pemisah desimal diwakili oleh titik (.). Namun, ini tidak berlaku untuk banyak negara lain seperti Spanyol, Afrika Selatan, Brasil, Swedia, Cina, dan 70 negara lain di mana pemisah desimal adalah koma.

Negara-negara seperti Brasil menggunakan titik (.) untuk terkadang memisahkan ribuan. Misalnya, dua belas ribu lima ratus ditulis bukan sebagai “12.500” tetapi sebagai “12.500” atau bahkan “12.500”.

Dengan demikian, harga perlu ditampilkan secara berbeda saat merancang toko untuk audiens atau kebangsaan tertentu. Kita akan melihat bagaimana kita dapat mengganti titik desimal dengan koma atau spasi di WooCommerce.

Ada dua cara untuk melakukan ini - baik secara langsung melalui Pengaturan WooCommerce atau melalui editor kode.
Mengubah Pemisah Desimal melalui Pengaturan WooCommerce
Arahkan mouse Anda ke label WooCommerce di dasbor WordPress Anda, dan klik Pengaturan. Di WooCommerce->Pengaturan, tab Umum menunjukkan hal berikut saat Anda menggulir ke bawah:

Di sini, Anda dapat mengubah nilai "Pemisah Desimal" dari "." ke ","

Melakukan ini dan mengklik "Simpan Perubahan" akan menampilkan titik desimal sebagai koma:

Dengan cara ini, Anda dapat menggunakan pemisah pilihan Anda.
Mengubah Pemisah Desimal melalui editor kode
Sementara WooCommerce menyediakan cara langsung untuk mengubah pemisah desimal, belajar melakukan ini melalui kode berguna. Dalam contoh ini, kami akan menunjukkan cara mengganti titik desimal dengan spasi menggunakan editor kode.

Ada potongan kode kecil yang dapat Anda masukkan ke dalam file functions.php dari tema anak Anda untuk melakukan hal ini. (Untuk mengetahui mengapa kami mengedit functions.php dari tema anak dan tidak secara langsung mengedit file functions.php, baca posting ini.)

Cuplikan Kode:

 add_filter( 'wc_price', 'woo_hide_decimal_point', 10, 4 );
function woo_hide_decimal_point( $return, $price, $args, $unformatted_price ) {
$satuan = intval( $harga );
$desimal = sprintf( '%02d', ( $harga-$unit ) * 100 );
return sprintf( '%s %d %s', get_woocommerce_currency_symbol(), $unit, $desimal );
}

Dan hasilnya adalah titik desimal dihapus dan diganti dengan spasi:

Catatan: Kode hanya akan berfungsi setelah Anda menyetel pemisah desimal ke "." di WooCommerce-> Pengaturan.

Anda dapat mengganti spasi dengan koma dengan cara yang sama dengan mengubah kode sedikit saja.

 add_filter( 'wc_price', 'woo_replace_decimal_point', 10, 4 );
function woo_replace_decimal_point( $return, $price, $args, $unformatted_price ) {
$satuan = intval( $harga );
$desimal = sprintf( '%02d', ( $harga-$unit ) * 100 );
return sprintf( '%s %d,%s', get_woocommerce_currency_symbol(), $unit, $desimal );
} 

Mengapa lebih baik menggunakan cuplikan kode melalui WooCommerce->Pengaturan untuk mengganti pemisah desimal:

Menggunakan editor kode sebagai lawan WooCommerce->Pengaturan untuk mengganti titik desimal memiliki banyak keuntungan.

Salah satunya adalah Anda dapat memformat harga sesuai keinginan Anda. Jika Anda perhatikan pada gambar di atas, harga memiliki spasi setelah simbol mata uang. Ruang ini tidak ada di tangkapan layar pertama posting ini di mana titik desimal telah diganti melalui WooCommerce-> Pengaturan.

Keuntungan lain adalah ketika Anda ingin perubahan ini dilakukan hanya untuk produk tertentu & tidak semua produk toko Anda. Menggunakan editor kode memberi Anda fleksibilitas itu.

Dengan menggunakan cuplikan kode, Anda juga dapat menampilkan bagian desimal dari harga dalam gaya yang berbeda dengan menyisipkan tag HTML seperti <b>,<u>,<i>,<sup>,<sub> dan banyak lagi.

Contoh: Menambahkan garis bawah ke bagian desimal dari harga.

 add_filter( 'wc_price', 'woo_format_decimal_value', 10, 4 ); 
function woo_format_decimal_value( $return, $price, $args, $unformatted_price ) { 
$satuan = intval( $harga ); 
$desimal = sprintf( '%02d', ( $harga-$unit ) * 100 ); 
return sprintf( '%s %d.<u>%s</u>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

Cuplikan kode di atas, ketika dimasukkan ke dalam file functions.php dari tema anak, menambahkan garis bawah ke bagian desimal dari harga:

Anda dapat menggunakan tag HTML lain dengan cara yang sama. Jika Anda ingin tahu bagaimana Anda dapat menampilkan nilai desimal sebagai superskrip atau subskrip, baca posting ini.

2. Mengganti Seribu Pemisah:

Sama seperti pemisah desimal yang ditampilkan secara berbeda di beberapa negara, demikian pula halnya dengan pemisah ribuan.

Misalnya, di negara-negara seperti Brasil, Afrika Selatan atau Spanyol, pemisah seribu dilambangkan dengan spasi atau titik/titik. Di negara-negara ini, tiga belas ribu lima ratus dapat ditulis sebagai 13 500 atau 13.500

Saat Anda mendesain toko Anda untuk audiens ini, Anda harus memastikan bahwa Anda mengedit pemisah seribu yang sesuai.

Sama seperti pemisah desimal, ada dua cara untuk melakukan ini, baik melalui WooCommerce->Pengaturan atau melalui editor kode.
Mengubah Pemisah Seribu melalui Pengaturan WooCommerce
Arahkan mouse Anda ke label WooCommerce di dasbor WordPress Anda, dan klik Pengaturan. Di WooCommerce->Pengaturan, tab Umum menunjukkan hal berikut saat Anda menggulir ke bawah:

Mengubah nilai dalam kotak teks Pemisah Seribu menjadi spasi sebagai ganti koma (“,"), akan mengubah cara pemisah seribu ditampilkan. Perhatikan bahwa Anda harus memasukkan spasi di kotak ini. Hanya menghapus koma tidak akan menghasilkan pemisah seribu berubah menjadi spasi.

Klik "Simpan perubahan" dan lihat produk:

Anda dapat melihat bahwa sekarang ada ruang di tempat pemisah seribu.

Untuk menghindari kebingungan, Anda dapat mengatur tempat desimal sebagai "0" melalui WooCommerce->Pengaturan untuk harga di mana tidak ada nilai desimal:

Setelah memasukkan jumlah desimal di sini sebagai "0", klik "Simpan perubahan" dan lihat produk lagi:

Mengubah Pemisah Seribu melalui editor kode

Demikian pula, kita dapat mengubah pemisah seribu menggunakan cuplikan kode. Seperti disebutkan di atas di bagian pemisah desimal, menggunakan editor kode selalu memiliki lebih banyak keuntungan karena kita dapat menyesuaikan atau menata harga sesuai keinginan kita, dan bahkan untuk produk tertentu jika bukan seluruh toko.

Sekarang mari kita coba mengubah pemisah seribu menjadi titik (.) menggunakan potongan kode.

Catatan: Prasyarat untuk ini adalah Anda harus membiarkan kotak pemisah seribu kosong di WooCommerce-> Pengaturan. Tidak ada spasi juga.

 add_filter( 'wc_price', 'woo_format_thousand_separator', 10, 4 ); 
fungsi woo_format_thousand_separator( $return, $price, $args, $unformatted_price) 
{ 
  $formatted_price=number_format($price,0,' ','.'); 
  return sprintf( '%s %s', get_woocommerce_currency_symbol(), $formatted_price); 
}

Fungsi number_format adalah fungsi PHP bawaan yang menerima 4 argumen:

1. Jumlah atau dalam kasus kami, harga.
2. Jumlah tempat desimal. Kami telah mengaturnya ke 0 karena kami tidak ingin menampilkan nilai desimal apa pun.
3. Pemisah desimal yang ingin Anda gunakan. Kami telah menetapkan ini ke nilai kosong.
4. Pemisah seribu. Kami telah mengatur ini ke titik (.).

Cuplikan kode ini, ketika ditambahkan ke file functions.php dari tema anak Anda akan menampilkan pemisah seribu sebagai titik atau titik (.) seperti yang diilustrasikan oleh tangkapan layar di bawah ini:

3. Memformat Harga WooCommerce:

Sekarang setelah Anda mengetahui cara memformat nilai desimal dan pemisah ribuan, hal yang sama berlaku untuk harga secara umum. Meskipun Anda tidak dapat langsung memformat nilai-nilai ini menggunakan opsi Pengaturan, Anda dapat melakukannya menggunakan Editor Kode dengan membuat sedikit modifikasi pada kode di atas.

Contoh: Penulisan harga produk dicetak miring.

Dalam keadaan default, harga produk ditampilkan sebagai berikut:

Bagaimana jika Anda ingin menambahkan gaya pada ini, misalnya menulisnya dengan huruf miring?

Anda dapat mencapai ini dengan membuat sedikit modifikasi pada cuplikan kode di atas.

Cukup salin kode ini ke file functions.php dari tema anak Anda:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$satuan = intval( $harga ); 
$desimal = sprintf( '%02d', ( $harga-$unit ) * 100 ); 
return sprintf( '<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

Melakukan ini akan menampilkan harga, bersama dengan titik desimal, dalam huruf miring:

Sedikit perubahan dalam cuplikan kode juga akan membuat bagian desimal tidak ditampilkan:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$satuan = intval( $harga ); 
return sprintf( '<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

Seperti yang Anda lihat, Anda dapat melihat harga dalam huruf miring di sini, tanpa bagian desimal:

Mempelajari cuplikan akan memungkinkan Anda memformat harga WooCommerce dengan mudah dengan cara Anda sendiri.