Mengarahkan WooCommerce Checkout ke Pesan WhatsApp

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.

Menyiapkan Plugin Pendukung

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.

Memasang Kode Javascript

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.

Memasang Kode PHP

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.

Demo Hasil Akhir

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 🙂

5 4 votes
Article Rating
Subscribe
Notify of
guest
46 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Deni
Deni
4 months ago

Ada artikel tentang ini ga Hu ? 😊

Screenshot_20201101_193904.jpg
iman
iman
4 months ago

belum berhasil mas
ini contoh web yang saya pasang code tersebut

https://sitedemo.my.id/woo1/product/scott-solid-t-shirt-ocean-blue/

Reyen Kun
Reyen Kun
1 month ago
Reply to  Yerie Piscesa

Saya tidak mengerti itu di bagian mana kak.

Ihsan Ray
Ihsan Ray
4 months ago

Alhamdulillah, berhasil, sangat mudah dipahami dan diterapkan.

terima kasih mas Yerie, semoga semakin sukses.

ditunggu tutorial selanjutnya. 🙂

feries
feries
3 months ago

untuk menampilkan note/catatan bagaimana? karena note di wa message tidak bisa muncul...mohon pencerahannya..
Terimakasih..

Feries
Feries
3 months ago
Reply to  Yerie Piscesa

Baik mas sudah muncul

Feries
Feries
3 months ago
Reply to  Yerie Piscesa

Bagaimana caranya jika proses check out ada pilihan wa admin messager apakah bisa mas? Perlu modifikasi di mananya ya? Trimakasih

abdul khaliq
abdul khaliq
3 months ago

mengatasi undefined gimana ya?

bagus
bagus
3 months ago

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

bagus
bagus
3 months ago
Reply to  Yerie Piscesa

baik mas terimakasih, sukses..

adi
adi
3 months ago

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?

option cs rotator.png
Last edited 3 months ago by adi
Adi
Adi
3 months ago
Reply to  Yerie Piscesa

Maaf mas, masih belum bisa, saya cs rotatornya pakai plugin tmbahan mas, apakah berpengaruh ya?

Adi
Adi
3 months ago
Reply to  Yerie Piscesa

No telp dari csrotatornya 6281xxxxxxx mas
Saya pakai plugin https://wordpress.org/plugins/woo-checkout-field-editor-pro/

Last edited 3 months ago by Adi
Adi
Adi
3 months ago
Reply to  Yerie Piscesa

Sudah hasilnya nomer rotator cs yg dipilih 6281xxxxxxx
Btw Saya pakai plugin ini mas https://wordpress.org/plugins/woo-checkout-field-editor-pro/

bagus
bagus
3 months ago
Reply to  Yerie Piscesa

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

Last edited 3 months ago by bagus
adi
adi
3 months ago
Reply to  Yerie Piscesa

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 woocommerce
jadinya proses chkout cuma loading aja...

adi
adi
3 months ago
Reply to  Yerie Piscesa

tapi saya cs rotatornya pake plugin, apakah sama mas kondisinya?

adi
adi
3 months ago
Reply to  Yerie Piscesa

ok mas sudah bisa..trims..atas pencerahannya..semoga sukses selalu dan ditgg tutor lainnya..

Ihsan Ray
Ihsan Ray
3 months ago

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

Ihsan Ray
Ihsan Ray
3 months ago
Reply to  Yerie Piscesa

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 »

Ihsan Ray
Ihsan Ray
13 days ago
Reply to  Yerie Piscesa

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?

Robet Wijayanto
Robet Wijayanto
3 months ago

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?

Fakhri
Fakhri
11 days ago
Reply to  Yerie Piscesa

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?

Farid Naufal
Farid Naufal
2 months ago

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.

Last edited 2 months ago by Farid Naufal
Arif Subarkah
Arif Subarkah
1 month ago

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.

Wahid Hasyim
Wahid Hasyim
1 month ago

Kenapa tidak bisa langsung ke WA? Harus klik "Click Here if your browser not redirect to whatsapp" dulu baru mau ke WA.

envelope-otagscalendarwhatsapp
46
0
Would love your thoughts, please comment.x
()
x