Menyederhanakan Toko WooCommerce dengan Contact Form 7 dan WhatsApp

Anda memiliki toko online berbasis WooCommerce dan merasa pengguna Anda kesulitan memesan produk dari toko Anda? Mungkin Anda perlu menyederhanakan prosesnya sehingga terlihat seperti demo shop ini.

Menggunakan CF7 Send to WA

Bagi pelaku usaha UMKM di Indonesia, WhatsApp adalah aplikasi yang wajib dimiliki pada perangkat mobile/ponsel, dan saya memahami hal itu. Untuk itu saya mengembangkan plugin integrasi antara WooCommerce, Contact Form 7 dan Aplikasi WhatsApp yang bernama Contact Form 7 Send to WhatsApp (CF7SendWA).

Instalasi dan Pengaturan

Untuk menggunakan plugin CF7SendWA, Anda harus menginstall plugin Contact Form 7 terlebih dahulu pada web WordPress Anda. Selanjutnya download dan install plugin CF7SendWA. Cek artikel ini jika Anda belum paham melakukan instalasi plugin pada web WordPress.

Buka menu Contact -> WhatsApp Send, input nomor WhatsApp pada bidang WhatsApp Number, gunakan kode negara seperti pada contoh dibawah.

Pada bagian Quick Shop Options, berikut penjelasannya:

  1. Show Excerpt: Beri centang jika ingin menampilkan deskripsi singkat (short description) produk.
  2. Show Out of Stock: Beri centang jika ingin menampilkan semua produk termasuk yang out of stock (stok kosong/habis)
  3. Unload Unsemantic CSS Grid: Plugin ini menggunakan Unsemantic Framework, namun beberapa theme juga menggunakan framework ini (seperti GeneratePress). Beri tanda centang jika Anda yakin theme Anda juga menggunakan framework yang sama.

Menyisipkan Quick Shop

Untuk menyisipkan quick shop pada contact form, Anda dapat menggunakan shortcode [cf7sendwa-quickshop] dan [cf7sendwa-checkout]. Pastikan urutannya harus quickshop kemudian checkout, berikut contoh penggunaannya

Penggunaan shortcode lainnya dapat dilihat seperti dibawah ini.

Anda dapat mengatur tab Mail seperti biasa, jika ingin contact form 7 tetap mengirimkan email. Namun untuk WhatsApp, Anda dapat mengaturnya seperti contoh berikut.

Shortcode [woo-orderdetail] akan menampilkan item-item pesanan berikut total pembeliannya untuk dikirim ke nomer yang ditentukan oleh input "To Number", default menggunakan nomor WhatsApp pada pengaturan global.

Tab Additional Settings dapat digunakan untuk "menghubungkan" ke data order pada WooCommerce. Berikut contohnya:

Dengan pengaturan diatas maka data order Anda akan terisi sesuai dengan yang user/customer input pada contact form.

Menampilkan Form pada Halaman Web

Copy shortcode yang tertera pada contact form dan tempelkan pada sembarang page/post. Anda juga bisa menambahkan desain menggunakan page builder agar lebih menarik.

Quick Shop Tanpa Contact Form 7

Sebagai informasi tambahan, shortcode [cf7sendwa-quickshop] dan [cf7sendwa-checkout] dapat juga digunakan diluar Contact Form 7. Anda dapat menempelkan shortcode pada sembarang Page atau Post.

Hasil dari penggunaan shortcode diluar CF7 dapat dilihat pada halaman demo ini.

Selamat Berjualan 🙂

0 0 vote
Article Rating
Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ahmad Budairi
Ahmad Budairi
28 days ago

Om, saya pasang [cf7sendwa_woo_checkout] di form tapi kok gak dirender, ya. Tetap tampil shortcodenya gitu. Kira-kira masalahnya apa, ya?

Juls
Juls
27 days ago

Sudah berapa hari ini saya coba ikuti panduan yang diberikan, tapi ternyata belum berhasil, shortcode nya tetap tampil, sy pakai theme generatepress yg free.

shortcode.jpg
envelope-otagscalendarsuitcasewhatsapp
4
0
Would love your thoughts, please comment.x
()
x