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/quick-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 );Saya tidak mengerti itu di bagian mana kak.
Coba ikutin cara yg di video
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 ] ) )"
Ini naruhnya dimana ya Mas?
tergantung konteks sih... tergantung dimana variable itu mau dipake.
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
berhasil email terkirim ke admin dan customer tapi setelah checkout tidak langsung redirect ke hp aplikasi wa tapi berhenti di halaman api wa, harus klik send to wa dulu baru bisa masuk ke wa.
ada solusinya mas?
Memang seperti itu sih kalau di desktop/pc/laptop, kalo di hape kadang2 juga begitu. paling aman sih pake API pihak ketiga atau dari officialnya.
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.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).
Mohon lebih jelasnya mas Yerie, soalnya saya pakai Rajaongkir untuk ongkirnya, bisa tidak di tampikan di pesan yang Terkirim ke WA?
cek pakai fungsi var_dump atau print_r, contoh:
var_dump( $posted_data );exitdi baris 60 ( patokannya ini https://gist.github.com/yeriepiscesa/e6568d9b2854bfef4316b858aab8cc07 )
pantau hasilnya lewat insepctor, tab network.
isi $posted_data itu bisa dimanfaatkan untuk tambah informasi ke variale $wa_message.
Happy coding 🙂
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.
Saya sudah coba tapi kok pas checkout nda mau redirect ke whatssapp ya bro? harus klik link yg menuju whatsapp dulu. Gara garanya itu tak perhatikan ketika klik proses checkout ada pop pup window yg mau muncul tapi ke block sama browser.
mungkin dari browser securitynya
Kenapa tidak bisa langsung ke WA? Harus klik "Click Here if your browser not redirect to whatsapp" dulu baru mau ke WA.
mungkin ada security dari browser yg block pop up
Mas..saya sudah ikuti semua yg ada di video.. setelah saya tes cekout ada bacaan *Kesalahan saat memproses checkout. Silakan coba lagi.*
Ini apa yg salah yah mas?
Terima kasih
saya kurang paham juga sih, barusan saya ulang lagi proses dari pasang plugin code sippets + custom css js, lalu copy dari gist ke code snippets & custom js, normal2 aja sih, berjalan sebagaimana mestinya.
coba lebih teliti lagi, mungkin ada yg terlewat
halo kak, terima kasih sudah berbagi. untuk pemasangan berhasil. namun saat checkout gak langsung muncul. baru klik resend wa muncul. apakah pengaruh di kakak pakai safari? bagimana dengan yang chrome / IE?
var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/); var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; if( isSafari && iOS ) {
saya pake chrome/firefox sih, cek safari itu kalau dibuka via mobile (ipad/iphone/ipad) aja...
biasanya browser mem-block popup untuk alasan security.
Ada solusi atau cara biar ini work di Safari iphone? 🙏🙏 Makasih.
saya pakai safari di iphone jalan normal sih.
Hallo, apakah bisa di tambahakan button place order tambahan, agar button 1 = Checkout ke WA dan Button 2 = Checkout normal ke website ?
Terimakasih.
bisa2 aja sih, tapi perlu custom script lagi
mohon info, bagian mana yang perlu diedit mas supaya tombol bisa ada 2.
1. tombol checkout biasa woo
2. tombil checkout ke wa tapi tetap data kerecord woo.
terima kasih
banyak sih sepertinya, silahkan dipelajari & dimodifikasi sendiri.
ide dasar script ini adalah mencegah submission default dengan action ini:
add_action( 'woocommerce_after_checkout_validation', array( $this, 'wc_prevent_submission' ), 10, 2 );kemudian mengalihkan ke fungsi lain dengan tetap memanfaatkan proses checkout bawaan woocommerce.
$checkout = WC_Checkout::instance();$checkout->process_checkout();
untuk menulis pesan WA secara dinamis, panggil fungsi setelah action process checkout
add_action( 'woocommerce_checkout_order_processed', array( $this, 'checkout_order_processed' ), 50, 3 );happy coding 🙂
Did you figure out how to do it? I want the same
Did you figure out how to do it? I want the same
Terimakasih manfaat banget
Kalo di tambah integrasi ke spread sheet buat simpen data ada min?
belum ada yg ke spreadsheet... soalnya udah masuk ke table order woocommerce kan
Kalo untuk nambah payment metode (saya sertakan transfer & COD) supaya terbawa ke pesan whatsapp.
Tambahn scriptnya gimana admin?
diexplore & dipelajari aja dulu kode2nya terutama bagian fungsi "checkout_order_processed", isi fungsi itu bisa diubah2 sesuai kebutuhan... selamat berkarya 🙂
Wadow makasih banget.
Adakah ref buat belajarnya?
Baru bisa nambahin fieldnya doang 😀
Maaf ane buta coding om.
🙂 🙂
Kalo buta coding sebaiknya belajar dulu dari dasar2 pemrograman (algoritma & struktur data) terus ke pemrograman web dengan PHP, nanti bisa lanjut ke pemrograman wordpress https://codex.wordpress.org/Developer_Documentation.
untuk woocommerce:
https://woocommerce.github.io/code-reference/index.html
https://docs.woocommerce.com/documentation/plugins/woocommerce/woocommerce-codex/extending/
https://www.businessbloomer.com/
terimakasih mas sangat bermanfaat
Untuk Form alamat bisa ditambahkan ga ya?
Misal:
Alamat lengkap:
Desa/Kelurahan:
Kecamatan:
Kab/Kota:
Kode Pos:
Dan bagaimana agar item tersebut supaya wajib diisi.
ya bisa2 aja, seperti tambah field di contact form 7 aja, tapi yg bisa dimapping ke woocommerce cuma ini: (cek https://solusipress.com/download/contact-form-7-send-to-whatsapp/ )
woo_checkout_first_name
woo_checkout_last_name
woo_checkout_email
woo_checkout_phone
woo_checkout_address
woo_checkout_order_note
gan punya saya :
undefined
apa ada yang kurang ya. web saya masi di localhost apa ada pengaruh ?
kurang paham juga, localhost ngga ada pengaruhnya sih
mas, bisa tidak gambar produk yang dipesan juga terkirim ke whatsapp admin ?
kalau model kirim WA via API (seperti twilio dll) bisa, cuma dalam 1 pesan kan cuma bisa 1 gambar.
pastinya ini butuh modifikasi lagi.
Mau nanya Mas, aku udah ikutin artikel dan berhasil, tapi kenapa ya pas aku aktifin CDNnya jadi gak bisa dan mandeg di Checkout Form, gak jalan jalan
kemungkinan ada error di javascriptnya (antara ngga ke-load atau telat nge-load).
coba cek browser consolenya.
Mas, gimana mahu sent receipt ke whatsapp selepas pembayaran? guidenya sebelum pembayaran kan?
coba dimanfaatkan hook woocommerce_payment_complete.
https://rudrastyh.com/woocommerce/payment-complete-hooks.html
the code does not work on my website, I followed the steps identical to the video. Any ideas?
Hello, in front of all the price texts there is "$". Any idea how to remove it?
halo selamat malam ... saya ada kendala. saat di checkout ada pesan error "Error processing checkout. Please try again." mohon bantuannya mas
First, Thank you for the code it helped a lot.
Second, I am having an issue that when I click on order, it briefly shows the error "go_whatsapp_redirect", then it redirects to https://api.whatsapp.com/send?phone=undefined&text=undefined, finally it redirects to the correct WhatsApp number and text