Salsabila Annisa SEO Content Writer at Niagahoster. She developed her writing skill after years of experience in journalism.

Panduan Membuat Halaman Konfirmasi Pembayaran WooCommerce

4 min read

woocommerce payment gateway terbaik 2021

Anda memiliki website toko online WooCommerce? Tapi masih menggunakan sistem pembayaran manual lewat transfer bank? Itu artinya Anda perlu membuat halaman konfirmasi pembayaran.

Dengan halaman konfirmasi pembayaran, 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 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

tambahkan plugin contact form 7 halaman konfirmasi pembayaran

Setelah itu, ketikkan “Contact Form 7” di kolom pencarian plugin. Kemudian klik Install Now pada plugin. 

search dan install contact form 7

Setelah itu, klik Activate.

activate contact form 7

Baca Juga: 10+ Plugin WooCommerce Terbaik untuk Toko Online Anda

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

add new contact

Setelah itu, Anda akan menemukan contact form. Isi judulnya dengan “Konfirmasi Pembayaran” 

beri judul halaman konfirmasi pembayaran woocommerce

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
atur tags halaman konfirmasi 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. 

tags your name

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.

text order id contact form 7

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.

email tags

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.

phone number tags

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.

tags radio button

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.

your message text

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.

file tags

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.

submit tags

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"]

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]”
setting mail

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

message body halaman konfirmasi pembayaran

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

file attachment

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.

shortcode halaman konfirmasi pembayaran

Setelah itu, klik Pages > Add New

add new pages

Kemudian beri nama pages Anda dengan “Konfirmasi Pembayaran”. Setelah itu paste shortcode form yang Anda buat. Lalu, klik Publish

copy shortcode halaman konfirmasi pembayaran 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

tampilan halaman konfirmasi pembayaran woocommerce

Baca Juga: Tutorial WooCommerce Lengkap untuk Membuat Toko Online 

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.

Salsabila Annisa SEO Content Writer at Niagahoster. She developed her writing skill after years of experience in journalism.