Anda punya website toko online yang dibuat lewat tutorial WooCommerce? Tapi masih menggunakan sistem pembayaran manual lewat transfer bank? Itu artinya Anda perlu membuat halaman konfirmasi pembayaran.
Manfaat WooCommerce dengan halaman konfirmasi pembayaran yaitu pelanggan Anda bisa lebih mudah mengirimkan bukti pembayaran produk yang mereka beli. Jadi, pemesanan mereka bisa segera Anda proses.
Membuat halaman konfirmasi pembayaran WooCommerce tidak sulit kok. Anda dapat menggunakan berbagai macam plugin contact di WordPress. Bagaimana caranya? Simak artikel ini!
Cara Membuat Halaman Konfirmasi Pembayaran WooCommerce
Berikut ini adalah langkah-langkah membuar halaman konfirmasi pembayaran WooCommerce. Yuk simak penjelasan lengkapnya!
1. Install Plugin Form
Anda perlu menginstall plugin WooCommerce untuk halaman konfirmasi pembayaran terlebih dahulu. Ada beberapa plugin yang bisa Anda coba, yaitu Ninja Forms atau Contact Form 7. Di artikel ini kami menggunakan Contact Form 7.
Langkah pertama, log in ke dashboard WordPress Anda. Kemudian klik Plugin > Add New.
Setelah itu, ketikkan “Contact Form 7” di kolom pencarian plugin. Kemudian klik Install Now pada plugin.
Setelah itu, klik Activate.
Baca juga: Tema WooCommerce
2. Buat Form Konfirmasi Pembayaran
Setelah selesai menginstall dan mengaktifkan plugin Contact Form 7, saatnya membuat form konfirmasi pembayaran.
Perhatikan bar di bagian kiri, kemudian klik Contact > Add New
Setelah itu, Anda akan menemukan contact form. Isi judulnya dengan “Konfirmasi Pembayaran”
Setelah itu, buat desain form konfirmasi pembayaran dengan menggunakan tags yang dibutuhkan, yaitu:
- text – form nama lengkap dan order ID
- email – email pelanggan
- tel – nomor telepon pelanggan
- radio buttons – opsi rekening pembayaran
- text area – form keterangan
- file – button upload bukti pembayaran
- submit – button submit bukti pembayaran
Kemudian atur isi form tagsnya. Agar lebih jelas, berikut kami tampilkan data yang harus Anda isi dalam setiap tags:
1. text
Untuk membuat form nama, pada tags text, isilah form tags dengan data berikut:
- Field type – centang “Required field” untuk mewajibkan data diisi
- Name – sudah otomatis terisi
- Default value – Nama Lengkap
- Centang perintah “use this text as placeholder of the field” untuk memasukkan default value sebagai label tags
- Id attribute – cf7-your-name
- Class atribute – cf7-your-name
Setelah itu, klik Insert tag untuk meletakkan shortcode pada form konfirmasi pembayaran.
Sebagai ganti form nama, Anda juga bisa menggunakan tags text untuk membuat form Order ID. Caranya dengan mengisi Default value dengan “Order ID”. Kemudian klik Insert tag.
2. email
Selanjutnya, atur tags email dengan data seperti di bawah ini:
- Field type – centang “Required Field”
- Name – sudah otomatis terisi dengan email-620
- Default value – tulis dengan “Email Anda”
- Centang perintah “use this text as placeholder of the field”
- Id attribute – email
- Class attribute – email
Setelah semua data terisi, klik Insert tag.
3. tel
Setelah pengaturan tags email, atur tags tel dengan data sebagai berikut:
- Field type – centang “Required field”
- Name – sudah otomatis terisi
- Default value – tulis dengan “Nomor Handphone Anda”
- Centang perintah “use this text as placeholder of the field”
- ID attribute – cf7-your-phone-number
- Class attribute – cf7-your-phone-number
Klik Insert tag.
4. radio buttons
Atur tags radio buttons untuk menyediakan opsi pembayaran, caranya dengan mengisi data sebagai berikut:
- Name – sudah otomatis terisi
- Options – isi dengan beberapa pilihan rekening pembayaran toko online Anda
- Centang perintah “Wrap each item with label element”
- ID attribute – cf7-radio
- Class attribute – cf7-radio
Setelah data terisi semua, klik Insert tag.
5. text area
Untuk membuat form keterangan tambahan dalam konfirmasi pembayaran, silakan pilih tags text area, isilah dengan data di bawah ini:
- Field type – centang “Required field”
- Name – sudah terisi otomatis
- Default value – Keterangan
- ID attribute – cf7-your-message
- Class attribute – cf7-your-message
Kemudian klik Insert tag.
6. file
Untuk membuat button upload bukti pembayaran, isi form tags file seperti berikut ini:
- Name – sudah otomatis terisi
- File size limit – 1000kb
- Acceptable file types – jpg|png
- ID attribute – cf7-file
- Class attribute – cf7-file
Lalu klik Insert tag.
7. Submit
Untuk membuat button submit bukti konfirmasi pembayaran, isi form tags submit dengan data berikut:
- Label – Submit
- ID attribute – cf7-submit
- Class attribute – cf7-submit
Kemudian klik Insert tag.
Nah, setelah semua tags selesai diisi, Anda akan memiliki kumpulan shortcode seperti di bawah ini:
[text* text-643 id:cf7-your-name class:cf7-your-name placeholder "Nama Lengkap"]
[email* email-620 id:email class:email placeholder "Email Anda"]
[tel* tel-364 id:cf7-your-phone-number class:cf7-your-phone-number placeholder "Nomor Handphone Anda"]
[radio radio-40 id:cf7-radio class:cf7-radio use_label_element default:1 "BRI (98887535 a/n Gal Gadot) " "Mandiri (98625378 a/n Gal Gadot) " "BCA (98762537 a/n Gal Gadot)"]
[text* text-643 id:cf7-your-name class:cf7-your-name placeholder "Order ID"]
[textarea* textarea-964 id:cf7-your-message class:cf7-your-message placeholder "Keterangan"]
[file file-990 limit:1000kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]
[submit id:cf7-submit class:cf7-submit "submit"]
Baca juga: Membuat Kategori WooCommerce
3. Atur Desain Email
Setelah form konfirmasi pembayaran terisi, saatnya mengatur desain email pemberitahuan yang akan Anda terima setelah pelanggan mengirim bukti pembayaran.
Caranya, klik tab Mail. Kemudian Anda akan menemukan beberapa pengaturan, yaitu:
- To: alamat email admin Anda, yaitu alamat email aktif Anda
- From: nama website toko online Anda <alamat email toko online Anda>
- Subject: topik email, isi dengan “Konfirmasi Pembayaran Diterima”
- Additional headers: untuk membuat cc, bcc, atau pesan tambahan. Tulis Reply-To [email- nomor email dalam tags email Anda], artinya dalam contoh ini adalah “Reply-To [email-620]”
Kemudian isi message body tab email dengan data kumpulan tags yang telah Anda buat. Dalam contoh ini, berarti isi message body adalah sebagai berikut:
Halo, Anda telah menerima konfirmasi pembayaran dari [text-643] ([email-620]).
No telpon: Tel-364
Order ID: text-64
Pesan: textarea-964
Setelah itu, pada bagian File Attachment yang ada di bawah persis body mail, ketikkan “[file- nomor file dalam tags file Anda]”untuk menyertakan file bukti pembayaran dalam notifikasi email pelanggan. Artinya dalam contoh ini adalah [file-990]
Kemudian klik Save.
Jika Anda tidak mau repot melakukan pengaturan tags, plugin Contact Form 7 Skins bisa jadi alternatif. Dengan plugin ini, Anda cukup menggunakan template untuk mengisi form Anda.
Baca Juga: Cara Mudah Membuat QR Code untuk Toko Online Anda
4. Tambahkan Form ke Laman Depan Website
Setelah form konfirmasi pembayaran Anda jadi, jangan lupa tambahkan form ke laman depan website Anda.
Copy shortcode dari form konfirmasi pembayaran yang sudah Anda buat.
Setelah itu, klik Pages > Add New
Kemudian beri nama pages Anda dengan “Konfirmasi Pembayaran”. Setelah itu paste shortcode form yang Anda buat. Lalu, klik Publish.
Baca juga: Prestashop vs WooCommerce
5. Halaman Konfirmasi Pembayaran Siap Digunakan
Setelah melakukan langkah-langkah di atas, halaman konfirmasi pembayaran Anda sudah siap digunakan. Begini tampilannya di website Anda
Baca juga: Shopify vs WooCommerce
Siap Membuat Halaman Konfirmasi Pembayaran WooCommerce?
Halaman konfirmasi pembayaran WooCommerce menjadi hal penting dalam website toko online Anda jika sistem pembayaran Anda masih manual. Sebab pelanggan akan lebih mudah mengupload bukti pembayaran produk yang mereka beli.
Kami sudah menjelaskan cara membuatnya di atas. Mudah, bukan?
Nah, tapi di era serba digital seperti saat ini, Anda perlu menyediakan sistem pembayaran yang lebih cepat dan aman. Menggunakan WooCommerce payment gateway pada toko online Anda bisa jadi salah satu caranya.
Oya, agar website Anda bekerja dengan maksimal selama 24 jam, jangan lupa untuk menggunakan layanan hosting terpercaya ya!
Tenang, Niagahoster menyediakan berbagai pilihan hosting yang didukung oleh LiteSpeed webserver . LiteSpeed mampu meredam beban server Anda 50% lebih kuat dibanding webserver populer lainnya, misalnya Apache.
Menariknya lagi, saat ini mayoritas website masih menggunakan webserver Apache atau Nginx. Jadi, menggunakan LiteSpeed makin membuat website Anda lebih cepat daripada website lainnya.
