Cara membuat pembayaran satu halaman WooCommerce

Apakah Anda ingin mengurangi pengabaian keranjang dan meningkatkan tingkat konversi Anda? Dalam panduan ini, Anda akan belajar cara membuat checkout satu halaman WooCommerce baik dengan dan tanpa plugin untuk membantu Anda meningkatkan penjualan.

Bukan rahasia lagi bahwa kasir adalah salah satu halaman terpenting untuk sebuah toko online. Namun, ini juga merupakan langkah di mana banyak pengguna meninggalkan troli mereka. Menurut penelitian terbaru, hampir 70% pembeli meninggalkan keranjang mereka di beberapa titik dan 21% dari mereka melakukannya di kasir. Mengapa? Biasanya karena proses pembelian yang terlalu lama atau rumit.

Meskipun tidak ada solusi tunggal yang berfungsi untuk setiap situs eCommerce, halaman checkout satu halaman berfungsi lebih baik untuk sebagian besar bisnis. Itu sebabnya membuat checkout satu halaman untuk toko WooCommerce Anda dapat membantu Anda mengurangi pengabaian keranjang dan meningkatkan penjualan Anda.

Apa itu checkout satu halaman WooCommerce?

Sebuah checkout satu halaman menampilkan semua bidang checkout pada satu halaman . Ini dapat mencakup konten keranjang, detail pembayaran, alamat penagihan dan pengiriman, opsi pengiriman, dan informasi lain seperti gambar, teks, atau formulir kontak tambahan.

Tujuan utama di balik checkout satu halaman adalah untuk mempersingkat proses pembelian dan mengurangi pengabaian keranjang. Saat pelanggan mengisi semua informasi untuk menempatkan pesanan mereka pada satu halaman, mereka cenderung menyelesaikan prosesnya.

Manfaat checkout satu halaman

Beberapa manfaat dari checkout satu halaman adalah:

• Ini membantu mengurangi pengabaian keranjang
• Mempersingkat proses checkout
• Meningkatkan tingkat konversi
• Mudah dipahami karena pembeli dapat melihat semua informasi yang mereka perlukan untuk diisi dalam satu halaman

Untuk informasi lebih lanjut tentang checkout satu dan beberapa halaman, lihat panduan lengkap ini.

Cara membuat checkout satu halaman WooCommerce

Ada berbagai cara untuk membuat checkout satu halaman WooCommerce :

1. Menggunakan plugin
2. Secara terprogram
3. Dengan pembuat halaman
4. Dari dasbor WordPress

Di bagian ini, kita akan melihat setiap opsi sehingga Anda dapat memilih salah satu yang paling sesuai dengan keahlian dan kebutuhan Anda.

1) Buat checkout satu halaman dengan plugin

Opsi pertama untuk membuat checkout satu halaman di WooCommerce adalah dengan menggunakan plugin. Ada banyak plugin checkout satu halaman di luar sana, baik gratis maupun premium. Untuk demonstrasi ini, kami akan menggunakan WooCommerce Direct Checkout. Plugin ini akan membantu Anda mempersingkat proses checkout dan meningkatkan tingkat konversi Anda. Anda tidak hanya dapat membuat checkout satu halaman tetapi juga menghapus bidang checkout yang tidak perlu, menambahkan tombol beli cepat, dan banyak lagi.

Checkout satu halaman dengan Direct Checkout

Direct Checkout memiliki versi gratis dengan fitur dasar dan 3 paket premium dengan lebih banyak fungsi mulai dari 19 USD (pembayaran satu kali).

Pertama, unduh pluginnya. Anda dapat melakukannya dari tautan ini atau dasbor WordPress Anda. Setelah mengaktifkannya, buka WooCommerce > Direct Checkout . Di sini, atur sebagai berikut sehingga mengarahkan pengguna dari halaman toko dan produk tunggal langsung ke halaman checkout.

• Ditambahkan ke peringatan keranjang : Ini menggantikan peringatan "Lihat keranjang" dengan checkout langsung
• Ditambahkan ke tautan keranjang : Ini menggantikan tautan "Lihat keranjang" dengan checkout langsung
• Pengalihan keranjang : Ini memungkinkan Anda untuk mengubah perilaku tombol Tambahkan ke keranjang
• Cart redirect to : Anda dapat memilih tempat untuk mengarahkan pengguna setelah mereka menambahkan sesuatu ke keranjang mereka. Dalam hal ini, kami akan mengarahkan mereka ke kasir
• Ganti URL troli : Seperti setelah pembeli menambahkan sesuatu ke troli mereka, kami akan mengarahkan mereka ke pembayaran, kami akan mengganti URL troli dengan tautan checkout

Harap dicatat bahwa perubahan ini akan berlaku untuk halaman toko, produk tunggal, dan kategori. Selain itu, pastikan Anda tidak memiliki tautan apa pun yang membawa pengguna ke troli karena kami akan menonaktifkannya.

Itu dia! Anda baru saja menyederhanakan proses checkout dengan mengarahkan pelanggan dari halaman produk dan toko langsung ke kasir. Selain itu, pembeli akan dapat mengedit dan mengonfirmasi pesanan mereka di halaman checkout.

Anda dapat membuat checkout satu halaman dengan versi gratis WooCommerce Direct Checkout, tetapi jika Anda ingin lebih banyak fitur untuk membawa checkout Anda ke tingkat berikutnya, Anda dapat melihat beberapa paket premium.

2) Buat checkout satu halaman secara terprogram

Di bagian ini, kita akan menggunakan beberapa skrip PHP dan gaya CSS untuk menambahkan fungsionalitas ke checkout satu halaman yang telah kita buat dengan plugin. Jadi kami sarankan Anda melihat bagian pertama dan menginstal dan mengatur plugin untuk membuat checkout satu halaman. Ini benar-benar akan memakan waktu beberapa menit.

Setelah Anda selesai melakukannya, mari kita lihat cara menyesuaikan sepenuhnya halaman checkout satu halaman Anda secara terprogram .

CATATAN : Karena kami akan mengedit beberapa file tema inti, sebelum Anda mulai, pastikan Anda membuat cadangan situs Anda dan memasang tema anak di situs Anda. Anda dapat menggunakan salah satu plugin tema anak ini atau membuatnya sendiri dengan mengikuti panduan ini.

2.1) Tambahkan metadata produk ke halaman checkout

Mari kita mulai dengan menambahkan beberapa informasi tentang produk yang dibeli pengguna. Kami akan menampilkan nama, gambar mini, dan deskripsi produk di halaman checkout.

Karena kami telah menonaktifkan halaman keranjang, setelah menambahkan produk ke keranjang, pembeli akan diarahkan ke kasir. Meskipun halaman keranjang disembunyikan, kita dapat menggunakannya untuk mengambil semua informasi produk darinya.

Untuk melakukannya, cukup tempel kode berikut di file functions.php dari tema anak Anda:

 // kait untuk menampilkan data meta produk
 add_action('woocommerce_checkout_before_customer_details','QuadLayers_product_meta');
 fungsi QuadLayers_product_meta(){
 echo '<div class="custom-product"><h2>Anda akan membeli ';
 $keranjang = WC()->keranjang->get_keranjang();
 foreach( $cart sebagai $cart_item_key => $cart_item ){
 $produk = $cart_item['data'];
 echo $produk->get_name()."</h2>";
 echo $produk->get_image();
 echo "<span>".$product->get_description()."</span>";
 }
 echo "<h3>Lengkapi pesanan anda dengan mengisi form dibawah ini</h3>";
 }

Untuk menguji ini, klik tombol beli pada produk apa pun dan setelah diarahkan ke halaman checkout, Anda akan melihat sesuatu seperti ini:

2.2) Menimpa file template checkout WooCommerce

File yang bertanggung jawab untuk mencetak halaman checkout adalah form-checkout-php dan terletak di plugin WooCommerce di folder templates: /woocommerce/templates/checkout.

Untuk menimpa file ini, salin file asli dari plugin WooCommerce dan tempel di folder checkout , di dalam direktori WooCommerce tema anak Anda.

Di checkout WooCommerce default, tata letak diatur ke dua kolom. Penagihan, pengiriman, dan formulir tambahan ditampilkan di kolom pertama dan detail pesanan di kolom lainnya.

Anda dapat mengubah ini dengan mengedit kelas HTML dari elemen <div> yang melampirkan formulir, dari col2-set ke col1-set sebagai berikut:

 <div class="col1-set">

Setelah edisi sederhana ini, semua formulir akan ditampilkan dalam satu kolom lebar penuh seperti ini:

Selanjutnya, kami akan mengedit judul detail pesanan dan mengubahnya dari “Pesanan Anda” menjadi “Tinjauan pesanan” dengan skrip berikut:

 <h3><?php esc_html_e( 'Ulasan pesanan', 'woocommerce' ); ?></h3>

Ini hanya beberapa contoh sederhana dari apa yang dapat Anda lakukan di sini. Jangan ragu untuk melangkah lebih jauh dan membuat kustomisasi Anda sendiri. Anda dapat menggunakan salah satu fungsi WordPress asli di sini. Untuk informasi lebih lanjut tentang kait checkout, Anda dapat melihat artikel ini.

Untuk mengetahui lebih lanjut tentang cara menyesuaikan template WooCommerce secara terprogram, lihat panduan lengkap ini.

2.3) Tambahkan keranjang ke halaman checkout

Anda dapat menggunakan beberapa shortcode di halaman checkout, jadi jika Anda ingin menambahkan cart di sana, Anda dapat menggunakan shortcode cart WooCommerce sebagai berikut:

 echo do_shortcode(' [ woocommerce_cart ] ');

Untuk menampilkan keranjang tepat sebelum detail pesanan, tempel skrip PHP ini di file functions.php tema anak Anda:

 add_action('woocommerce_checkout_after_customer_details','QuadLayers_add_cart_checkout');
 fungsi QuadLayers_add_cart_checkout(){
       echo do_shortcode(' [ woocommerce_cart ] ');
 }

Anda sekarang akan melihat keranjang dengan produk yang telah ditambahkan pengguna di akhir formulir checkout:

2.4) Tambahkan konten khusus ke halaman checkout

Saat pelanggan meninjau detail pesanan, mereka dapat memilih metode pembayaran dan mengklik "Tempatkan Pesanan" untuk menyelesaikan pembelian. Karena blok ini ditampilkan di kolom kanan, kami akan menyisipkan beberapa konten di sisi kiri untuk mencapai desain yang seimbang.

Ini adalah fungsi konten khusus yang akan ditempelkan di file functions.php di mana kami menjelaskan beberapa kebijakan pengembalian, metode pembayaran, pengiriman, dan sebagainya. Jangan ragu untuk menyesuaikan dan menyesuaikannya dengan toko Anda:

 add_action('woocommerce_checkout_before_order_review','QuadLayers_add_column_before_order_review');
fungsi QuadLayers_add_column_before_order_review(){    
    printf(' <div><h3>Informasi lebih lanjut tentang pesanan Anda:</h3>
 <p>Terima kasih banyak telah berbelanja di toko kami. Berikut adalah beberapa informasi berguna yang mungkin perlu Anda ketahui</p>
 <ul>
 <li>Kami melakukan yang terbaik untuk mengirimkan secepat mungkin, tetapi untuk mempertahankan layanan yang optimal, produk Anda mungkin memerlukan waktu hingga dua hari kerja sebelum tiba</li>
 <li>Kebijakan pengembalian kami memungkinkan Anda untuk meminta penggantian hingga 15 hari setelah pembelian. <a href="#">Baca di sini kebijakan toko</a></li>
 <li>Jika memilih metode pembayaran kartu kredit, dalam beberapa kasus hal ini dapat menambah keterlambatan pengiriman selama dua hari</li>
 <li>Jika Anda tidak puas dengan apa yang Anda terima, Anda juga dapat memilih pengembalian dana sesuai dengan kebijakan pengembalian dana kami</li>
 <li>Apakah Anda memiliki kupon diskon? Jika ada catatan, dapatkan di sini dan kembalilah agar Anda dapat menerapkannya</li>
 </ul>
 </div>','woocommerce');
}

Dan inilah hasil akhirnya:

2.5) Menambahkan beberapa gaya CSS ke halaman checkout

Dalam file function.php , Anda akan melihat bahwa kami telah menambahkan kelas kami sendiri, yang kami sebut custom-product . Kita akan menggunakan kelas ini untuk menata konten dengan beberapa skrip CSS. Selain itu, kami dapat memberikan sentuhan akhir pada desain checkout satu halaman baru kami tanpa menggunakan kelas khusus kami.

Ini adalah skrip CSS lengkap yang kami gunakan dalam tutorial ini. Cukup salin dan tempel di file style.css dari tema anak Anda:

 /* menyembunyikan judul formulir Penagihan */
.woocommerce-billing-fields > h3:nth-child(1){
    tampilan: tidak ada;
}
/* Anda akan membeli... */
.produk-kustom > h2:nth-child(1){
    perataan teks: tengah;
}
/* gambar */
img.attachment-woocommerce_thumbnail:nth-child(2){
    margin:otomatis;
}
/* keterangan */
.custom-product > span:nth-child(3){
    margin:otomatis;
    lebar: 50%;
    tampilan: blok;
}
/* Selesaikan pesanan Anda ...*/
.produk-kustom > h3:nth-child(4){
    perataan teks: tengah;
    margin: 25px 0 25px 0;
}
/* informasi lebih lanjut.. */
.custom-product > div:nth-child(8){
    mengapung: kiri;
    lebar: 47%;
}
#detil pelanggan{
    margin-bawah:40px;
}

CATATAN : Untuk demonstrasi ini, kami telah menggunakan tema Storefront sehingga Anda mungkin perlu menyesuaikan pemilih CSS jika Anda menggunakan tema yang berbeda atau jika Anda telah menambahkan kustomisasi Anda sendiri.

Setelah itu, jika semuanya berjalan dengan baik, Anda akan melihat yang berikut di halaman checkout Anda:

Itu dia! Anda baru saja membuat checkout satu halaman WooCommerce yang sepenuhnya disesuaikan secara terprogram .

3) Buat checkout satu halaman dengan pembuat halaman

Opsi menarik lainnya untuk membuat dan menyesuaikan checkout satu halaman di WooCommerce adalah dengan menggunakan pembuat halaman. Ada beberapa pembuat halaman di luar sana. Untuk demonstrasi ini, kami akan menggunakan Asal Situs. Dengan lebih dari 1 juta instalasi aktif, ini adalah salah satu pembuat halaman paling populer karena kesederhanaan dan efisiensinya.

Prosesnya serupa untuk sebagian besar pembuat halaman, jadi apa pun yang Anda gunakan, Anda harus dapat mengikuti panduan ini tanpa masalah.

Pertama, unduh Site Origin dari repositori WordPress, instal dan aktifkan di situs web Anda. Kemudian, buka halaman checkout dengan editor dan tambahkan nama ke dalamnya. Kami akan menyebutnya checkout Satu Halaman.

Seperti yang Anda lihat, halaman checkout hanyalah kode pendek WooCommerce yang ditempatkan di blok Gutenberg. Jika Anda telah menonaktifkan blok Gutenberg di backend, Anda juga akan melihat kode pendek yang sama tetapi di editor teks lama. Cukup hapus blok kode pendek dan tambahkan satu pembuat halaman.

Sekarang kita dapat mulai membuat checkout satu halaman yang sepenuhnya disesuaikan menggunakan pembuat halaman. Anda dapat menambahkan widget apa pun di kolom, dan mengaturnya ke tata letak yang diinginkan. Ingatlah bahwa Anda harus memasukkan

 [ woocommerce_checkout ]

kode pendek lagi, jika tidak maka tidak akan berfungsi.

Dan inilah bagian terbaiknya. Anda juga dapat menggunakan salah satu widget atau modul yang tersedia di tata letak pembuat halaman. Selain itu, Anda dapat menyertakan kode pendek lainnya. Keranjang dan yang "Akun saya" cukup umum.

Ini adalah contoh dasar, jadi Anda harus menyesuaikan setiap widget dan menyesuaikan halaman checkout sesuai dengan kebutuhan Anda. Juga, perlu diingat bahwa setiap pembuat halaman bekerja secara berbeda sehingga meskipun prosesnya serupa, Anda mungkin perlu menyesuaikan beberapa hal. Sebagai rekomendasi umum, templat dengan lebar penuh dan tanpa bilah sisi biasanya berfungsi paling baik.

4) Buat checkout satu halaman menggunakan editor blok Gutenberg

Demikian pula, Anda dapat menyesuaikan checkout satu halaman WooCommerce Anda menggunakan editor blok Gutenberg. Untuk ini, di dasbor WordPress Anda, buka halaman checkout dan Anda akan melihat blok dengan kode pendek checkout. Mari tambahkan lebih banyak blok ke halaman ini dengan mengklik tombol tambah blok ( + ) dan memilih Kolom .

Di sini Anda dapat menggunakan salah satu blok dan kode pendek yang tersedia untuk menyesuaikan halaman checkout Anda sepenuhnya. Atau, jika Anda memiliki keterampilan pengkodean, Anda juga dapat mengedit checkout dengan memasukkan kode HTML Anda sendiri dengan blok kode. Untuk demo ini, kami telah menambahkan cart dan shortcode akun saya di 2 kolom sehingga terlihat seperti ini:

Dan begitulah cara Anda dapat dengan mudah membuat checkout satu halaman di WooCommerce dengan editor blok Gutenberg.

Tips terakhir

• Saat membuat pembayaran satu halaman, selalu ingat tujuan utama pembayaran: memungkinkan pelanggan untuk melakukan pemesanan semudah mungkin. Anda harus menghindari konten apa pun yang mengalihkan perhatian pengguna dari tujuan ini.
• Semua informasi yang perlu ditinjau pengguna sebelum menekan tombol "Pesan" harus tersedia di halaman yang sama, sehingga mereka dapat melakukan semuanya dari halaman checkout. Sertakan semua informasi yang diperlukan dan hindari menyisipkan tautan yang mengarahkan pengguna ke URL yang berbeda.
• Pengguna tidak menyukai halaman konten yang panjang saat mereka membeli. Buat semuanya tetap sederhana dan bersih dan fokus untuk mencapai halaman checkout yang efisien dan profesional

Kesimpulan

Secara keseluruhan, checkout satu halaman akan membantu Anda mempersingkat proses pembelian, mengurangi pengabaian keranjang, dan meningkatkan tingkat konversi. Meskipun dalam beberapa kasus, checkout multi-halaman mungkin lebih efektif, untuk sebagian besar toko, checkout yang lebih pendek cenderung bekerja lebih baik.

Dalam panduan ini, kami telah melihat berbagai cara untuk membuat checkout satu halaman di WooCommerce:

• Dengan plugin
• Secara terprogram
• Dengan pembuat halaman
• Menggunakan editor blok Gutenberg

Jika Anda menginginkan solusi yang cepat dan efisien, menggunakan Direct Checkout adalah pilihan terbaik Anda. Plugin freemium ini memungkinkan Anda membuat checkout satu halaman dalam beberapa menit dan juga mencakup beberapa fitur untuk membantu Anda meningkatkan checkout dan meningkatkan penjualan Anda. Misalnya, Anda dapat menghapus bidang checkout, menambahkan tombol beli cepat dan tampilan cepat, dan banyak lagi. Jika Anda tidak ingin memasang plugin tambahan dan menggunakan pembuat halaman, Anda dapat membuat halaman checkout menggunakan editor blok Gutenberg atau dengan pembuat halaman Anda.

Di sisi lain, jika Anda memiliki keterampilan pengkodean, Anda memiliki lebih banyak opsi untuk mengedit halaman checkout Anda. Setelah membuat checkout dengan plugin Direct Checkout, Anda dapat menambahkan skrip PHP dan CSS untuk menyesuaikan checkout Anda sepenuhnya. Dalam artikel ini, kita telah melihat beberapa contoh tetapi masih banyak lagi yang dapat Anda lakukan. Jangan ragu untuk menggunakannya sebagai basis dan bermain-main untuk menemukan apa yang terbaik untuk Anda.

Manakah metode favorit Anda untuk membuat checkout satu halaman di WooCommerce? Apakah Anda tahu ada yang lain yang harus kami sertakan? Beri tahu kami di bagian komentar di bawah!