1 November 2020
Banyak pengguna WooCommerce yang ingin form checkout diarahkan juga ke pesan WhatsApp dengan tujuan memberikan fast response ke pelanggannya. Silahkan lanjutkan membaca jika Anda termasuk salah satunya.
Silahkan install dan aktifkan plugin Code Snippets dan Simple Custom CSS and JS. Untuk keperluan ini, kita akan menggunakan codebase dari Gist ini. Jika Anda paham plugin development di WordPress, Anda juga dapat "membungkusnya" menjadi sebuah plugin.
Tambahkan kode JavaScript baru melalui menu Custom CSS & JS -> Add Custom JS, beri judul "WhatsApp Checkout". Cek anotasi pada gambar dibawah ini untuk hal-hal yang perlu Anda lakukan.
Klik Terbitkan, kemudian nonaktifkan script.
Tambahkan snippet baru pada menu Snippets -> Add New kemudian isi Kode dengan yang didapat pada Gist, lalu sesuaikan pengaturan dengan anotasi gambar dibawah ini.
Akhiri dengan klik Simpan dan Aktifkan snippet.
Silahkan buka form Checkout Anda untuk melakukan uji coba. Contoh working scenario bisa Anda cek disini https://ukmdemo.solusipress.com/shop/.
Silahkan lakukan modifikasi pada kode-kode tersebut jika ada kebutuhan khusus yang mungkin diterapkan pada toko online Anda.
Happy WordPressing 🙂
Ada artikel tentang ini ga Hu ? 😊
belum ada sih.
belum berhasil mas
ini contoh web yang saya pasang code tersebut
https://sitedemo.my.id/woo1/product/scott-solid-t-shirt-ocean-blue/
code js-nya tidak ter-load, pastikan nama file whatsapp-checkout.js sama dengan line PHP berikut:
wp_register_script( 'woo-whatsapp-checkout', $uri . 'whatsapp-checkout.js', array( 'jquery' ), $this->version );Alhamdulillah, berhasil, sangat mudah dipahami dan diterapkan.
terima kasih mas Yerie, semoga semakin sukses.
ditunggu tutorial selanjutnya. 🙂
untuk menampilkan note/catatan bagaimana? karena note di wa message tidak bisa muncul...mohon pencerahannya..
Terimakasih..
terima kasih sudah menemukan bugs, ada sedikit revisi di baris 70. ganti $data dengan $posted_data
Baik mas sudah muncul
Bagaimana caranya jika proses check out ada pilihan wa admin messager apakah bisa mas? Perlu modifikasi di mananya ya? Trimakasih
mengatasi undefined gimana ya?
perlu ada conditional sih, misal di php "if( isset( $arrname[ $index ] ) )"
Bagaimana caranya untuk menampilkan nomor order woocommerce nya, pada saat place order, harus modifikasi di mana ya? agar sama seperti menampilkan note
$fields = array( 'first_name', 'last_name', 'address_1', 'address_2', 'email', 'phone', 'note' );
$wa_message = $this->wa_message_template;
if( $wa_message != ' ' )
{ foreach( $fields as $f ) { if( $f == 'note' )
{
$wa_message = str_replace( "{{note}}", $posted_data['order_comments'], $wa_message ); }
else { $__text = ' ';
if( isset( $customer['billing'][$f] ) ) {
$__text = $customer['billing'][$f]; }
$wa_message = str_replace( "{{".$f."}}", $__text, $wa_message ); } } }.
Mohon pencerahannya, terimakasih
tambah order_id di bagian template
*Nomor Order:* {{order_id}}
tambah 'order_id' di array
$fields = array( 'first_name', 'last_name', 'address_1', 'address_2', 'email', 'phone', 'note', 'order_id' );
modifikasi fields looping
foreach( $fields as $f ) {if( $f == 'note' ) {
// ...
} elseif( $f == 'order_id' ) {
$wa_message = str_replace( "{{order_id}}", $order_id, $wa_message );
} else {
// ...
}
}
baik mas terimakasih, sukses..
Sore mas mohon dibantu, saya coba modif di halaman chckout saya tambahin field cs rotator lalu pada coding snipet : protected $version = '0.9.2';
//protected $wa_number = '628200000123'; (saya non aktifkan)
lalu di coding :
public function checkout_order_processed( $order_id, $posted_data, $order ) {Â
$wa_cs = $order->get_csadmin();
    $wa_send_number = $this->$wa_cs;   ( ini saya ganti dengan nilai cs rotator hasil dari $order->get_csadmin() tapi ndak bisa direct ke wa ya, apakah ada yang kurang tepat dalam coding tersebut?
$wa_cs = $order->get_csadmin();
$wa_send_number = $this->$wa_cs; harusnya $wa_cs aja (ngga pake $this->)
Maaf mas, masih belum bisa, saya cs rotatornya pakai plugin tmbahan mas, apakah berpengaruh ya?
coba cek dulu, method $order->get_csadmin() hasilnya apa?
No telp dari csrotatornya 6281xxxxxxx mas
Saya pakai plugin https://wordpress.org/plugins/woo-checkout-field-editor-pro/
ya coba aja ditampilin hasilnya di pesen WA sebelum dimodifikasi, muncul ngga nomernya.
misal $wa_message .= ' nomernya:' . $order->get_csadmin()
Sudah hasilnya nomer rotator cs yg dipilih 6281xxxxxxx
Btw Saya pakai plugin ini mas https://wordpress.org/plugins/woo-checkout-field-editor-pro/
berarti harusnya tinggal replace aja kan.
$wa_send_number = $this->wa_number;jadi$wa_send_number = $order->get_csadmin();apakah protected $wa_number = '6281xxxxxxx' bisa diganti dengan cara ini karena saya coba hasilnya zonk tdk bisa direct metode $wa_send_number = $order->get_nomorcs_yg dipilih
tetap tidak bisa mas tidak bisa direct ke wa cs rotatornya hanya muncul pada coding ini saja :
elseif( $f== 'csadmin' ){
$wa_message = str_replace( "{{csadmin}}", $posted_data['csadmin'], $wa_message );
}ketika dipakai di
$wa_send_number = $this->wa_number;Â jadiÂ$wa_send_number = $order->get_csadmin(); tidak bisa direct tapi di tetap masuk di data order panel admin woocommercejadinya proses chkout cuma loading aja...saya uji coba untuk generate nomer random, bisa koq
tapi saya cs rotatornya pake plugin, apakah sama mas kondisinya?
pada dasarnya sih sama aja, selama fungsi yg dipanggil return-nya nomer WA.
atau kalo dari form langsung aja ambil dari nilai $_POST. misal $wa_send_number = $_POST['custom_cs_number'];
ok mas sudah bisa..trims..atas pencerahannya..semoga sukses selalu dan ditgg tutor lainnya..
Mas, bagaiman supaya email terkirim ke admin dan buyer walau checkout redirect ke wa supaya admin dan buyer dapet notif email juga. antisipasi jika buyer tidak klik send pesan ke wa.
mohon info code/referensi
terima kasih
bisa ditambah script send mail seperti ini di method "checkout_order_processed":
WC()->mailer();$mail_order = new WC_Email_New_Order();
$mail_order->trigger( $order_id, $order );
$mail = new WC_Email_Customer_Invoice();
$mail->trigger( $order_id, $order );
mantap! berhasil terima kasih banyak mas, semoga semakin bermanfaat dan sukses mas Mau tanya lagi mas, untuk munculkan Kode unik, bikin seperti ini tetapi munculnya Rp1 tidak sesuai kode unik yang ada error dimana ya mas $fees = WC()->cart->get_fees(); if( !empty( $fees ) ) { foreach ( $fees as $fee => $amount ){ array_push( $return['fees'], array( 'uniqfee' => $amount, 'label' Â => $label, ) ); } } ////////////////////////////// $return = array( 'items' => array(), 'coupons' => array(), 'fees' Â => array(), 'subtotal' => 0, ); ////////////////////////// Â if( !empty( $cart['fees']Â ) ){ Â Â Â Â Â Â foreach ( $cart['fees'] as $f ){ Â Â Â Â Â Â Â Â $txt .= "\n"; Â Â Â Â Â Â Â Â $txt .= __(… Read more »
coba di dump dulu isi variable $cart['fees'] itu
Terima kasih banyak mas Yerie, fitur yang sedang saya cari ini, sangat bermanfaat..
Kalau saya ingin menampilkan keterangan kecamatan, kabupaten, dan provinsi di pesan yang terkirim di WA bagaimana caranya ya mas?
coba di-dump dulu isi variable $posted_data, apa sudah tersedia data2 yg dibutuhkan (semisal propinsi, kabupaten, dll), atau perlu lookup ke sumber lain (kalau data yg diterima dalam bentuk ID).
karena ini materi programming, pelajari juga proses/logic yg ada di contoh, terutama method
checkout_order_processedkalo mau modifikasi sesuai kebutuhan.Mau tanya mas, waktu saya kirim ke whatsapp kenapa isiannya ga terisi dari field di form nya ya? Padahal id fieldnya (array) udah saya sesuaikan sama id field web saya.
kurang paham juga sih, kalau dari video rekaman layar harusnya ngga perlu edit2 field lagi kan.