Kustom Halaman Checkout WooCommerce (WooCommerce)

TokoDaring.Com – Kustom Halaman Checkout WooCommerce. Ketika anda membuat website eCommerce menggunakan WordPress dan WooCommerce. System akan membuat beberapa halaman WooCommerce yang wajib ada. Salah satunya adalah halaman checkout atau checkout page.

Artikel Lainnya:

Kustomisasi Breadcrumb WooCommerce

Halaman checkout

Apa itu halaman checkout ? dan apa pula fungsinya pada website eCommerce ? Pada website toko online yang menggunakan WordPress dan WooCommerce, bagaimana pula kita bisa memodifikasi atau mengkustom halaman itu ?

Artikel ini, kami harap bisa memberikan informasi yang anda butuhkan tentang halaman checkout website toko daring.

Dalam sistem toko online, checkout page adalah halaman yang menangani terkait dengan cara bayar dan menentukan alamat pengiriman. Jika di ibaratkan, maka halaman checkout adalah meja kasir pada sebuah toko offline.

Kustomer akan membawa keranjang atau troli yang berisi penuh dengan barang yang ingin di belinya. Kasir akan menjumlahkan total barang belanjaan dengan cara menscannya satu persatu.

Lalu kustomer akan membayar total barang belanjaan dengan pilihan menyerahkan uang cash, ATM / kartu debit atau dengan menggunakan kartu kredit.

Itu pula yang terjadi pada sistem checkout pada sebuah toko online. Kustomer akan memilih apakah akan membayar secara cash dan COD (cash on delivery), transfer bank atau menginput data kartu kredit.

Halaman checkout WooCommerce

Halaman checkout WooCommerce juga tidak berbeda dengan checkout page website eCommerce atau marketplace pada umumnya.

Secara default, WooCommerce meminta informasi kustomer yang di perlukan ketika melakukan registrasi di website eCommerce anda. Misalnya data-data sebagai berikut :

• Detail penagihan.
• Nama depan dan nama belakang pembeli.
• Nama Perusahaan.
• Alamat (Kota/Kota, Negara, Distrik, dan Kode Pos/ZIP).
• Nomor telepon.
• Alamat email.
• Catatan pesanan.
• Pernyataan persetujuan kebijakan privasi.

Itu semua adalah informasi yang disertakan di halaman checkout ketika kustomer ingin menyelesaikan belanjanya. Semua informasi tersebut akan memberikan informasi rinci yang diperlukan bagi sistem website eCommerce anda untuk memproses informasi pembayaran dan pengiriman ke alamat mereka.

Halaman checkout WooCommerce ini benar-benar murni hanya berfungsi seperti tujuan di atas. Sebagai pebisnis anda mungkin berfikir bahwa pada halaman itu masih ada ‘ruang’ untuk sedikit meningkatkan penjualan atau paling tidak membangun kepercayaan pelanggan terhadap bisnis anda.

Halaman checkout dapat membangun kepercayaan pelanggan ?

Membangun kepercayaan pelanggan ? Apa maksudnya ? Apakah ada hubungannya antara halaman checkout dengan membangun kepercayaan pelanggan ?

WooCommerce checkout page secara default, memang terlihat plain-plain saja. Fungsinya murni hanya untuk menghandle urusan pembayaran dan konfirmasi alamat pengiriman kustomer.

Halaman checkout WooCommerce sejatinya adalah halaman dimana kustomer memutuskan untuk membayar produk yang anda jual. Jika mereka memutuskan untuk membayar menggunakan kartu kredit, maka kustomer harus menginput nomor kartu dan nomor CVV (Card Verification Value) yang ada di bagian belakang kartu.

Kombinasi yang benar antara nomor kartu dengan nomor CVV tentu saja akan berimplikasi pada persetujuan pembayaran dana dari pihak bank penerbit kartu yang nantinya akan di bebankan pada tagihan kartu kredit anda.

Jika itu jatuh ke tangan orang yang tidak bertanggung jawab, maka hal itu tentu bisa merugikan si pemilik kartu (nasabah). Jadi, wajar jika ada kustomer yang mungkin bertanya-tanya, apakah aman untuk menginput kombinasi nomor kartu dan nomor CVV yang rahasia itu di website eCommerce anda ?

Guaranteed SAFE Checkout

Maka pada halaman ini, anda bisa memberikan informasi kepada kustomer bahwa website anda aman untuk menerima metode pembayaran apapun.

Yaitu dengan menyematkan bukti atau berupa seal terkait service perlindungan keamanan data yang anda gunakan. Seperti contoh gambar berikut :

Itu sebabnya, banyak pemilik situs toko online WooCommerce, melakukan perubahan (kustomisasi) pada halaman checkout mereka.

Yaitu dengan menyematkan seal yang di sebut dengan Guaranteed SAFE Checkout di halaman checkout. Biasanya itu di sematkan tepat di bawah tombol Place Order atau Buat Pesanan.

Tentang Guaranteed SAFE Checkout ini sebenarnya bukan hanya sekedar seal atau gambar yang bisa disematkan semaunya. Seal ini sebenarnya terhubung ke layanan keamanan yang anda memang gunakan jasanya untuk membantu melindungi data di website eCommerce anda.

Baiklah, tentang seal GSC ini, kami ada bahasan sendiri, bagaimana mendapatkannya, layanan keamanan apa yang bisa anda pilih untuk melindungi transaksi pembayaran di website eCommerce anda.

Pada akhirnya kami akan paparkan bagaimana :

1. Cara membuat halaman checkout WooCommerce.
2. Cara edit halaman checkout WooCommerce, dan
3. Bagaimana mengkustom halaman checkout WooCommerce.

Termasuk jika anda ingin menambahkan sebuah paragraf yang berisi informasi, atau jika jika anda ingin memasang seal tersebut.

Cara membuat halaman checkout WooCommerce

Tidak ada hal yang khusus terkait cara membuat halaman checkout WooCommerce. Website non WooCommerce mungkin tidak memiliki halaman ini. Tapi ketika anda mengintall plugin WooCommerce maka halaman ini akan secara otomatis di buat ketika setup wizard di jalankan.

Jikapun proses itu tidak berjalan maka untuk membuat halaman checkout sama seperti membuat halaman lainnya. Yaitu, buat satu halaman baru, dan masukan shortcode berikut :

[woocommerce_checkout]

Cara edit halaman checkout WooCommerce

Selesai membuatnya anda mungkin ingin mengeditnya. Sebenarnya definisi edit disini bukanlah merubah layout atau tampilan secara frontal. Setiap layout atau tampilan visual halaman WooCommerce di website anda sangat bergantung pada script layout yang sudah di tentukan oleh pengembang tema yang anda gunakan.

Begitu juga setiap field dan data-data pada halaman checkout sudah di tentukan oleh WooCommerce. Tapi tetap ada cara untuk seikit mengkustomnya, Dan satu cara yang paling aman terkait cara edit halaman WooCommerce adalah dengan mengkatrol hook yang ada pada halaman itu.

Contohnya jika anda mungkin ingin menempelkan seal GSC yang sudah di bahas di atas, seperti pada contoh berikut.

Kustom halaman checkout WooCommerce

Script berikut akan menempelkan seal GSC (Guaranteed SAFE Checkout) pada halaman checkout. Dengan mengkatrol woocommerce_review_order_after_payment, maka seal tersebut akan berada tepat di bawah tombol place order atau buat pesanan.

Pastikan seal yang ingin di pasang sudah di upload ke folder uploads anda. Lalu masukan secara tepat URL gambar seal tersebut.

/*
 * Kustom halaman checkout WooCommerce
 * seal safe certificate di halaman checkout
 */ 

add_action( 'woocommerce_review_order_after_payment', 'tkdr_seal_safe_checkout', 10 );
function tkdr_seal_safe_checkout() {

    echo "<div><img src="/wp-content/uploads/gambar/safe-certificate-woocommerce.jpg"></div>";
}

Jika anda menginginkan seal tersebut menempel di bagian lainnya di halaman itu, silahkan menyesuaikan dengan hook yang ada. Daftar hook pada checkout page, lihat artikel kami berikut tentang WooCommerce checkout page hooks.

Opsi lainnya anda bisa menambahkan paragraf yang berisi informasi apapun yang ingin di tampilkan pada posisi tersebut.

/*
 * Kustom halaman checkout WooCommerce
 * Informasi tambahan di halaman checkout
 */ 

add_action( 'woocommerce_review_order_after_payment', 'tkdr_info_checkout', 10 );
function tkdr_info_checkout() { ?>
<style type="text/css">
p.login-teks {
  background-color:#f5f5f5;
  border:1px solid #71b02f;
  box-shadow:2px 2px 4px #71b02f;
  color:#3740ff;
  margin-bottom:2em;
  padding:0.4em 1em 0.5em 1em;
}
</style>
<?php

  echo '<p class="login-teks"Diskon 10% berlaku untuk customer baru/order pertama. Info, klik <a href="/info-registrasi/">Informasi checkout</a></p>';
}

Kustom halaman WooCommerce

Tutorial modifikasi dan kustomisasi halaman WooCommerce lainnya di website ini. Berikutnya kami juga menerbitkan artikel tutorialdan mungkin anda tertarik untuk mengkustom halaman produk WooCommerce.

Artikel terkait :

Feed Ads by Google!