Cara Menyesuaikan Halaman Checkout WooCommerce dengan Elementor dan HappyAddons

Halaman checkout yang bagus sangat memengaruhi tingkat konversi Anda. Jika Anda memiliki toko WooCommerce atau berencana untuk memulainya, Anda harus memberikan proses checkout yang nyaman kepada pelanggan.

Menurut Digital Marketing Institutes, pengoptimalan checkout dapat meningkatkan konversi sebesar 35,62% . Terlepas dari kualitas produk, pelanggan dapat meninggalkan situs web Anda jika Anda gagal memberikan pengalaman checkout yang lancar.

Tapi jangan khawatir. Di blog berikut, Anda akan melihat tutorial langkah demi langkah tentang cara menyesuaikan halaman checkout WooCommerce dengan estetika ditambah beberapa praktik terbaik industri. Hal baiknya adalah Anda tidak memerlukan pengalaman pengkodean apa pun untuk mengikuti panduan ini. Mari kita mulai membaca.

Mengapa Anda Harus Menyesuaikan Halaman Checkout WooCommerce Anda?

Dengan menggunakan plugin WooCommerce, Anda dapat membuat hampir semua jenis situs web eCommerce. Dengan plugin yang diinstal, situs web Anda akan secara otomatis menghasilkan halaman checkout default. Tetapi halaman checkout default sangat sederhana sehingga tidak dapat membantu Anda menawarkan pengalaman trendi kepada pelanggan.

Inilah sebabnya mengapa menyesuaikan checkout WooCommerce sangat penting. Kecuali halaman checkout Anda mudah digunakan dan sulit dinavigasi, pelanggan cenderung meninggalkan situs web Anda dan tidak pernah kembali. Di bawah ini adalah beberapa alasan utama mengapa Anda harus menyesuaikan halaman checkout WooCommerce Anda.

1. Hapus Bidang yang Tidak Perlu

Sebagian besar pelanggan tidak akan bersikap ramah jika Anda meminta terlalu banyak informasi pribadi di halaman checkout. Karena tidak ada yang suka berbagi informasi pribadi yang tidak perlu dengan orang lain, sertakan hanya bidang-bidang (nama, email, nomor telepon, alamat, dll.) yang wajib untuk proses checkout.

2. Tambahkan Beberapa Opsi Pembayaran

Tingkat pengabaian checkout bisa sangat tinggi jika pelanggan tidak menemukan opsi pembayaran pilihan mereka. Anda harus mencoba menambahkan metode pembayaran di halaman checkout WooCommerce Anda sebanyak mungkin. Seperti cash on delivery, cek bank, kartu debit & kredit, pembayaran seluler, dan transfer uang elektronik.

3. Ubah Desain Dan Tata Letak Halaman

Tata letak kotak adalah cara yang bagus untuk menampilkan banyak konten web dalam ruang sesingkat mungkin. Kisi dua kolom saat ini merupakan gaya paling populer dalam mendesain halaman checkout WooCommerce. Dengan menyesuaikan halaman checkout WooCommerce, Anda dapat membawa lebih banyak variasi ke sistem grid.

4. Tampilkan Informasi Tambahan

Jika Anda memiliki pesan khusus untuk pelanggan yang ingin mereka baca, Anda dapat menampilkannya di halaman checkout. Misalnya, Anda dapat memberi tahu mereka tentang penawaran yang akan datang, diskon untuk produk tertentu, kode promo untuk pengguna baru, dll.

5. Jadikan Responsif di Semua Perangkat

Kecuali Anda membuat halaman checkout Anda sangat responsif untuk semua perangkat, Anda akan kehilangan banyak pelanggan potensial. Menyesuaikan halaman checkout dapat membuatnya terlihat bagus di semua perangkat- desktop, laptop, tablet, dan smartphone .

Cara Menyesuaikan Halaman Checkout WooCommerce dengan Elementor dan HappyAddons

Menyesuaikan halaman checkout WooCommerce sangat mudah hari ini. Elementor adalah pembuat halaman seret dan lepas yang dengannya Anda dapat membuat segala jenis halaman web yang Anda inginkan. Selain itu, jika Anda perlu menyesuaikan bagian web lain seperti halaman keranjang, halaman produk, header, footer, dan lainnya, Anda dapat melakukannya menggunakan plugin ini.

HappyAddons adalah add-on Elementor yang kuat yang selanjutnya dapat meningkatkan fungsionalitas situs eCommerce Anda. Di sini kita akan menggunakan plugin ini untuk mendemonstrasikan cara mengedit halaman checkout WooCommerce.

Prasyarat untuk Menyesuaikan Halaman Pembayaran WooCommerce

• WooCommerce
• Elemen
• HappyAddons
• HappyAddons Pro

Pastikan plugin ini diinstal dan dikonfigurasi dengan benar di situs web Anda. Kemudian, mulailah mengikuti langkah-langkah yang ditunjukkan di bawah ini.

Langkah 01: Buat Halaman Checkout

Setelah Anda menginstal plugin WooCommerce, Anda akan mendapatkan halaman checkout WooCommerce default di bagian halaman. Anda dapat membukanya dengan Elementor untuk menyesuaikan halaman checkout.

Tetapi jika mau, Anda dapat membuat halaman baru, menautkannya sebagai halaman checkout WooCommerce default, dan kemudian menyesuaikannya dengan Elementor. Tonton video di bawah ini tentang cara membuat halaman checkout WooCommerce baru dan mengaturnya sebagai default.

Praktik terbaiknya adalah Anda membuat halaman checkout baru dan kemudian menyesuaikannya dengan Elementor. Selanjutnya, buka halaman checkout baru di kanvas Elementor dengan video berikut.

Langkah 02: Seret dan Jatuhkan Widget Checkout WC

Ketik WC Checkout pada bilah pencarian widget Elementor. Anda akan mendapatkan widget yang muncul di bawah ini. Seret dan jatuhkan pada bagian yang Anda pilih dari kanvas Elementor.

Tepat setelah Anda menempatkan widget, semua bidang yang diperlukan untuk halaman checkout akan muncul di kanvas. Selanjutnya, Anda harus memodifikasi bidang ini sesuai keinginan menggunakan opsi yang tersedia di panel Elementor.

Langkah 03: Pilih Tata Letak untuk Halaman Checkout

Pilih gaya tata letak dari bagian Umum . Ada dua tata letak di bagian umum: Satu Kolom dan Dua Kolom .

Jika Anda memilih tata letak Dua Kolom, Anda akan mendapatkan beberapa opsi tambahan (Stack-On, Columns Gap, dan Column Width) untuk menyesuaikan halaman WooCommerce. Lihat video di bawah ini untuk menjelajahi cara kerja tata letak Dua Kolom.

Langkah 04: Sesuaikan Gaya Halaman Checkout

Di bagian Style, Anda akan mendapatkan sebelas opsi lagi untuk mendesain halaman checkout. Di bawah ini adalah daftar opsi yang akan Anda temukan di sana.

• Bagian
• Masukan
• Kupon Bar
• Kotak Kupon
• Judul
• Detail Penagihan
• informasi tambahan
• Tinjau pesanan
• Cara Pembayaran
• Kebijakan pribadi
• Tombol

Dengan menggunakan opsi ini, Anda dapat mengubah warna latar belakang, warna bidang, tipografi label, tipografi input, dan warna tipografi. Mari kita jelajahi apa yang dapat Anda lakukan dengan opsi ini.

• Bagian

Dari opsi Bagian, Anda dapat mengedit ruang antar bagian, mengubah warna latar belakangnya, dan menambahkan bayangan ke kotak bidang.

• Masukan

Bagian Input memungkinkan Anda untuk menyesuaikan tinggi, warna, spasi, tipografi, dan bayangan kotak bidang pada halaman checkout Anda.

• Kupon Bar

Anda dapat mengubah warna, tipografi, dan tautan kupon dari Bilah Kupon.

• Kotak Kupon

Kotak Kupon memungkinkan Anda mengubah tipografi teks input, warna kotak, tipografi tombol, dan warna tombol.

• Menuju

Dari opsi heading, Anda dapat mengubah warna dan tipografi heading utama halaman checkout.

• Detail Penagihan

Detail Penagihan akan memungkinkan Anda untuk mengubah warna teks input, warna bidang, warna latar belakang, tipografi label, dan banyak lagi.

• informasi tambahan

Jika Anda ingin menyimpan catatan untuk pembeli, bagian ini memungkinkan Anda melakukannya. Anda dapat menggunakan opsi ini untuk menyesuaikan area teks, memasukkan gaya teks, bayangan kotak, spasi, gaya melayang, dll.

• Tinjau Pesanan

Opsi Tinjau Pesanan memungkinkan pelanggan untuk melihat ringkasan produk yang akan mereka pesan. Dari sini Anda dapat mengubah tipografi, tipografi latar belakang, warna, warna teks, spasi, dan lainnya.

• Cara Pembayaran

Anda dapat mengedit gaya font label, warna, tipografi, warna latar belakang, dan kotak pesan kotak pembayaran Anda dari opsi Metode Pembayaran.

• Kebijakan pribadi

Anda akan mendapatkan Kebijakan Privasi di bawah kotak metode pembayaran di halaman checkout Anda. Dengan menggunakan opsi ini, Anda dapat menyesuaikan warna teks, tipografi, warna kursor tautan, dan warna tautan bagian.

• Tombol

Pada akhirnya, Anda mungkin ingin menyesuaikan Tombol penempatan pesanan di halaman checkout Anda. Opsi Tombol akan memungkinkan Anda untuk mengubah teks tombol, tipografi, warna, warna latar belakang, dan banyak lagi.

Untuk panduan tambahan, silakan kunjungi dokumentasi ini tentang cara menyesuaikan halaman checkout di WooCommerce menggunakan widget HappyAddons ini. Jika Anda masih menghadapi masalah dalam menyesuaikan halaman checkout Anda menggunakan widget, kami meminta Anda memberi tahu kami melalui bagian komentar. Salah satu anggota tim kami akan segera membalas Anda.

Langkah 05: Jadikan Halaman Checkout Mobile Responsif

Menurut banyak statistik, sekitar 50% hingga 60% penjualan eCommerce saat ini dihasilkan dari perangkat seluler. Jadi, Anda harus memastikan halaman checkout WooCommerce Anda dioptimalkan dengan sempurna untuk perangkat seluler.

Cukup klik tombol Responsive Mode dari footer panel Elementor. Ini akan membuka opsi di atas kanvas Elementor dari mana Anda dapat melihat halaman Anda pada ukuran layar yang berbeda dan menerapkan modifikasi. Tonton videonya di bawah ini.

Jangan khawatir, jika Anda mengubah sesuatu untuk tampilan seluler atau tabel, itu tidak akan membuat perubahan apa pun pada tampilan desktop. Perubahan akan diterapkan pada perangkat tertentu.

Sekarang, pratinjau halaman checkout WooCommerce di bawah ini yang telah kami buat menggunakan widget ini.

Bonus – 7 Praktik Terbaik untuk Meningkatkan Konversi di Halaman Checkout

Menurut XP2 Dynamic Yields, lebih dari 70% produk eCommerce ditinggalkan dari keranjang belanja karena toko online kehilangan sekitar $18 miliar setiap tahun . Alasan utama di balik itu adalah bahwa sebagian besar situs web eCommerce gagal menawarkan pengalaman pengguna terbaik kepada pelanggan.

Jika Anda memiliki situs eCommerce atau berencana untuk memulai yang baru, terapkan praktik berikut di halaman checkout Anda untuk meningkatkan tingkat konversi Anda.

1. Beri Nama pada Kolom Checkout

Memberi label pada bidang halaman checkout WooCommerce memudahkan pelanggan untuk mengetahui ke mana harus pergi dan apa yang harus dilakukan. Ini akan mempercepat proses checkout dan menghemat waktu berharga bagi pelanggan.

2. Tambahkan Tooltip Penjelasan

Tooltip adalah potongan teks yang muncul setiap kali seseorang mengarahkan kursornya ke elemen web tertentu. Ini memungkinkan Anda untuk menambahkan informasi tambahan ke halaman checkout tanpa menggunakan banyak ruang. Tooltip adalah fitur gratis dari HappyAddons. Baca cara menambahkan tooltips ke bagian web Anda.

3. Tawarkan Promo dan Diskon Menarik

Penawaran dan diskon memiliki kekuatan untuk meningkatkan penjualan produk Anda dalam semalam. Menurut statistik terbaru dari Statista, sekitar 90% orang AS menggunakan kupon atau kode diskon sepanjang tahun. Coba terapkan promo dan diskon untuk meningkatkan penjualan Anda seperti di bawah ini.

• Persentase Mati
• Selamat tinggal satu dapat satu (BOGO)
• Bebas biaya kirim
• Kartu ucapan
• Kupon Skor Loyalitas

4. Biarkan Pengguna Memperbarui Kuantitas Produk

Pembeli dapat berubah pikiran kapan saja mereka mau. Mereka mungkin ingin mengubah jumlah produk bahkan sebelum mengklik tombol bayar. Anda harus memiliki opsi di halaman checkout agar pelanggan dapat mengubah jumlah produk. Jika tidak, mereka harus mengunjungi halaman keranjang yang akan menghasilkan pengalaman pengguna yang buruk.

5. Tunjukkan Lencana Keamanan dan Kepercayaan

Menampilkan lencana keamanan dan kepercayaan akan meyakinkan pelanggan bahwa itu adalah situs yang sah untuk membeli produk. Ini akan membuat pelanggan merasa percaya diri untuk berbagi informasi pribadi seperti nomor kartu debit/kredit, nomor telepon, alamat email, dll.

6. Tampilkan Periode Pengembalian dan Pengembalian Dana

Dari Shopify, lebih dari 20% produk online dikembalikan ke pengecer karena berbagai alasan. Inilah sebabnya mengapa pelanggan sangat peduli dengan kebijakan pengembalian dan pengembalian uang sebelum membeli secara online. Anda juga harus mengklarifikasi periode pengembalian dan pengembalian dana di halaman checkout di samping halaman produk dan keranjang.

7. Upsell Produk Terkait

Upselling adalah teknik penjualan yang mendorong pelanggan untuk membeli lebih banyak produk atau layanan daripada yang mereka rencanakan sebelumnya. Dengan menampilkan produk terkait di halaman checkout, Anda dapat meyakinkan pelanggan untuk membeli lebih banyak barang ini dan membuat mereka merasa penting. Anda dapat menawarkan barang-barang ini dengan harga diskon untuk penjualan lebih lanjut.

8. Menawarkan Manfaat Unik untuk Pengguna yang Ada

Menawarkan penawaran menarik kepada pelanggan yang sudah ada untuk meyakinkan mereka agar membeli lebih banyak adalah pendekatan pemasaran yang bagus untuk organisasi eCommerce mana pun. Ini akan membuat mereka merasa lebih dihargai daripada pengguna yang tidak terdaftar. Dengan menggunakan fitur Tampilan Bersyarat dari HappyAddons, Anda dapat menawarkan kupon dan kode promo kepada pengguna terdaftar Anda.

FAQ tentang Cara Menyesuaikan Halaman Checkout WooCommerce

Jika Anda masih memiliki pertanyaan yang belum terjawab di seluruh artikel ini, bagian ini mungkin akan menjawabnya. Di sini kami akan membahas beberapa pertanyaan yang paling sering diajukan tentang cara menyesuaikan halaman checkout WooCommerce.

Takeaways Terakhir tentang Cara Menyesuaikan Halaman Checkout WooCommerce

Menyesuaikan halaman checkout WooCommerce penting untuk memastikan pengalaman berbelanja yang positif bagi pembeli. Ini adalah halaman terakhir di mana calon pelanggan mendarat untuk membeli produk yang mereka inginkan. Jadi, menjaga ini tetap sederhana, mudah, dan menarik adalah suatu keharusan untuk keberhasilan bisnis eCommerce apa pun.

Dalam panduan ini, kami telah menjelaskan cara termudah untuk menyesuaikan halaman checkout WooCommerce. Dengan mengikuti tips ini, kami harap sekarang Anda dapat membuat halaman checkout untuk toko WooCommerce Anda meskipun Anda tidak memiliki pengalaman sebelumnya.

Jika Anda masih memiliki masalah, tinggalkan komentar di bawah, dan kami akan dengan senang hati membantu! Selain itu, ikuti saluran Facebook dan Twitter kami untuk mendapatkan pembaruan rutin.