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/quick-shop/.

Silahkan lakukan modifikasi pada kode-kode tersebut jika ada kebutuhan khusus yang mungkin diterapkan pada toko online Anda.

Kesulitan memasang kode sendiri ? Silahkan download versi plugin dibawah ini.

Happy WordPressing 🙂

4.1 9 votes
Article Rating
Subscribe
Notify of
guest
87 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Deni
Deni
4 years ago

Ada artikel tentang ini ga Hu ? 😊

Screenshot_20201101_193904.jpg
iman
iman
4 years 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
3 years ago
Reply to  Yerie Piscesa

Saya tidak mengerti itu di bagian mana kak.

Ihsan Ray
Ihsan Ray
3 years ago

Alhamdulillah, berhasil, sangat mudah dipahami dan diterapkan.

terima kasih mas Yerie, semoga semakin sukses.

ditunggu tutorial selanjutnya. 🙂

feries
feries
3 years ago

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

Feries
Feries
3 years ago
Reply to  Yerie Piscesa

Baik mas sudah muncul

Feries
Feries
3 years 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 years ago

mengatasi undefined gimana ya?

BelajarEnergi
BelajarEnergi
3 years ago
Reply to  Yerie Piscesa

Ini naruhnya dimana ya Mas?

bagus
bagus
3 years 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 years ago
Reply to  Yerie Piscesa

baik mas terimakasih, sukses..

adi
adi
3 years 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 years ago by adi
Adi
Adi
3 years ago
Reply to  Yerie Piscesa

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

Adi
Adi
3 years 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 years ago by Adi
Adi
Adi
3 years 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 years 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 years ago by bagus
adi
adi
3 years 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 years ago
Reply to  Yerie Piscesa

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

adi
adi
3 years ago
Reply to  Yerie Piscesa

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

Ihsan Ray
Ihsan Ray
3 years 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 years 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
3 years 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 years 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
3 years 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
3 years 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 3 years ago by Farid Naufal
Arif Subarkah
Arif Subarkah
3 years 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
3 years ago

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

Hafizah Maulidya
Hafizah Maulidya
3 years ago

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

teguh
teguh
3 years ago

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 ) {

ibni
ibni
3 years ago

Ada solusi atau cara biar ini work di Safari iphone? 🙏🙏 Makasih.

Fajri
Fajri
3 years ago

Hallo, apakah bisa di tambahakan button place order tambahan, agar button 1 = Checkout ke WA dan Button 2 = Checkout normal ke website ?

Terimakasih.

Ihsan Ray
Ihsan Ray
3 years ago
Reply to  Yerie Piscesa

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

Hiba
Hiba
2 years ago
Reply to  Ihsan Ray

Did you figure out how to do it? I want the same

Hiba
Hiba
2 years ago
Reply to  Fajri

Did you figure out how to do it? I want the same

Last edited 2 years ago by Hiba
Ugun Gunawan
Ugun Gunawan
3 years ago

Terimakasih manfaat banget
Kalo di tambah integrasi ke spread sheet buat simpen data ada min?

Ugun Gunawan
Ugun Gunawan
3 years ago

Kalo untuk nambah payment metode (saya sertakan transfer & COD) supaya terbawa ke pesan whatsapp.
Tambahn scriptnya gimana admin?

Ugun Gunawan
Ugun Gunawan
3 years ago
Reply to  Yerie Piscesa

Wadow makasih banget.
Adakah ref buat belajarnya?
Baru bisa nambahin fieldnya doang 😀
Maaf ane buta coding om.
🙂 🙂

iqbal
iqbal
3 years ago

terimakasih mas sangat bermanfaat

Roli
Roli
3 years ago

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.

heri
heri
3 years ago

gan punya saya :

undefined

apa ada yang kurang ya. web saya masi di localhost apa ada pengaruh ?

heri syahputra
heri syahputra
3 years ago

mas, bisa tidak gambar produk yang dipesan juga terkirim ke whatsapp admin ?

Chandra
Chandra
2 years ago

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

Zaimie Zainal
Zaimie Zainal
2 years ago

Mas, gimana mahu sent receipt ke whatsapp selepas pembayaran? guidenya sebelum pembayaran kan?

Agus
Agus
2 years ago

the code does not work on my website, I followed the steps identical to the video. Any ideas?

Agus
Agus
2 years ago

Hello, in front of all the price texts there is "$". Any idea how to remove it?

anjas
anjas
2 years ago

halo selamat malam ... saya ada kendala. saat di checkout ada pesan error "Error processing checkout. Please try again." mohon bantuannya mas

Screen Shot 2022-04-08 at 19.20.40.png
Hiba
Hiba
2 years ago

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

Rizal Hamdani
Rizal Hamdani
2 years ago

Selamat siang kang, sebelumnya saya ucapkan terimakasih banyak, sangat bermanfaat ilmunya.

saya mau tanya, cara agar popupnya tidak di blokir ?

Ihsan Ray
Ihsan Ray
2 years ago

Supaya support multisite bagaimana ya, saat checkout orderan masuk ke menu order woo tapi stuck di page checkout muter² di situ saja. adakah solusinya? thanks

Suhendra
Suhendra
2 years ago

Halo kak.

Saya udah mengikuti yang di video tetapi ga berhasil, kalo saya debug, saat checkout hanya ada response '0' . apakah perlu mengaktifkan plugin atau fitu r Woocommerce nya dulu ?

Rudi Hartanto
Rudi Hartanto
2 years ago

Sudah sampai redirect whatsapp, cuma hasilnya https://api.whatsapp.com/send?phone=undefined&text=undefined . kalau di video bisa nampil nomer dan detailnya itu bagaimana ya?

bowo
bowo
2 years ago

menggunakan base childthem bootscore tidak bisa mas tetapi kalo pake theme storefront bisa...adakah solusi atau cara ngecek dimana error..terimakasih sebelumnya mass

Untitled-1.jpg
firman Syah
firman Syah
2 years ago

Ketika Send Pake iOS Kok Eror Yah Gan "undifined" Kenapa Yah Bang ?
Terima Kasih Banyak

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