Cara Menempatkan Keranjang WooCommerce dan Checkout di Satu Halaman

Diterbitkan: 2020-09-21

Letakkan Keranjang WooCommerce dan Checkout di Satu Halaman

Dalam tutorial singkat ini, saya akan membagikan solusi tentang bagaimana Anda dapat menempatkan keranjang dan checkout WooCommerce di satu halaman. Ini akan sangat mengoptimalkan proses checkout, dan itu akan menghemat banyak waktu pelanggan, karena mereka tidak menunggu halaman lain dimuat. Solusi ini dapat digunakan jika Anda ingin menghemat langkah tambahan, terutama pada produk high-ticket yang dijual kurang lebih satu produk per pesanan.

Keranjang WooCommerce dan Pembayaran di Satu Halaman

Pelanggan yang rutin berbelanja online selalu membutuhkan proses yang cepat dan checkout. Mereka dapat memilih toko lain jika kecepatan pemuatannya rendah atau jika mereka dialihkan ke halaman lain sebelum melakukan pembayaran. Alasan utama mengapa banyak orang menggunakan WooCommerce untuk toko online mereka adalah karena memungkinkan Anda untuk memodifikasinya.

Proses checkout default di WooCommerce memiliki dua halaman terpisah untuk Cart dan Checkout. Saya ingin mengilustrasikan bagaimana Anda dapat menempatkan keranjang dan pembayaran WooCommerce di satu halaman untuk meningkatkan pengalaman pengguna dan meningkatkan konversi Anda.

Ini akan menjadi panduan utama Anda, karena ada campuran kode pendek, pengaturan, dan cuplikan PHP, yang dapat Anda gunakan untuk membuat ini berfungsi. Ini mungkin tampak agak rumit, tetapi jika Anda mengikuti langkah-langkah yang akan saya bagikan, Anda akan merasa lebih mudah daripada yang Anda pikirkan.

Alasan utama untuk melakukan ini adalah bahwa proses Checkout Multi-Langkah lebih cenderung memiliki masalah pengabaian keranjang, sehingga meningkatkan penjualan di toko WooCommerce Anda.

Dengan semua itu, berikut adalah panduan langkah demi langkah yang mudah untuk menempatkan Keranjang dan Checkout di halaman yang sama. Selain itu, Anda dapat memutuskan untuk melakukan beberapa pengujian dan pelacakan WooCommerce, untuk melihat apakah tingkat konversi lebih baik.

Langkah-langkah untuk Menempatkan Keranjang WooCommerce dan Checkout di Satu Halaman

  1. Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
  2. Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Menu . Saat halaman Theme Editor terbuka, cari file theme functions dimana kita akan menambahkan fungsi yang akan menempatkan Cart dan Checkout pada satu halaman.
  3. Tambahkan kode berikut di akhir file php . Artinya kita harus menambahkan shortcode “woocommerce_cart” ke halaman Checkout. Ingatlah untuk menyimpan perubahan :
 /**

 * Tampilan Keranjang @ Hanya Halaman Checkout – WooCommerce

*/

add_action( 'woocommerce_before_checkout_form', 'njengah_cart_on_checkout_page_only', 5 );

function njengah_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'pesanan diterima' ) ) kembali;

echo do_shortcode('[woocommerce_cart]');

}
  1. Untuk melihat hasilnya, cukup segarkan halaman checkout dan Anda akan melihat ini: halaman keranjang di atas checkout

Perlu disebutkan bahwa jika Anda terbiasa dengan tata letak halaman Keranjang, Anda mungkin mengetahui bagian Total keranjang . Potongan kode rapi yang saya bagikan ini secara otomatis menyembunyikan total karena dua kode pendek pada halaman yang sama. Ini adalah fitur yang bagus.

  1. Kode pendek saja sudah cukup, tetapi jika Anda melakukan sedikit pengawasan, Anda akan menemukan bahwa halaman keranjang masih muncul sebagai halaman yang berdiri sendiri . Selain itu, Keranjang dikosongkan di halaman Checkout, dan WooCommerce akan mengarahkan pengguna ke halaman Keranjang dan menampilkan pesan keranjang kosong. Ini berarti bahwa beberapa penyesuaian perlu dilakukan untuk mengubahnya. Anda harus benar-benar menyingkirkan halaman Keranjang sehingga pengguna tidak akan pernah melihatnya.

Di Dasbor WordPress Anda, klik WooCommerce > Pengaturan. Pada halaman pengaturan klik pada Tab Tingkat Lanjut , dan cukup klik pada "x" kecil dan Simpan Perubahan seperti yang ditunjukkan: menghapus halaman keranjang

  1. Setelah itu, Anda perlu menghapus halaman Cart . Ini karena tidak lagi berguna dan pengalihan sudah ada dan tabel keranjang Anda sudah ada di halaman Checkout.
  2. Namun, jika Anda ingin mengarahkan ulang halaman checkout yang kosong jika pengguna mengaksesnya secara langsung atau saat tabel keranjang dikosongkan , berikut adalah sedikit cuplikannya untuk Anda. Ini akan membantu Anda untuk mengarahkan kembali halaman checkout yang kosong ke halaman beranda.

Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Menu . Ketika halaman Theme Editor dibuka, cari file theme functions dimana kita akan menambahkan fungsi yang akan mengarahkan halaman checkout kosong ke homepage.

  1. Tambahkan kode berikut di akhir file php .
 /**

* Redirect Keranjang Kosong/Checkout - WooCommerce

*/




add_action( 'template_redirect', 'njengah_redirect_empty_cart_checkout_to_home' );

function njengah_redirect_empty_cart_checkout_to_home() {

if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {

wp_safe_redirect( home_url() );

keluar;

}

}
  1. Untuk melihat hasilnya, keluarkan semua produk di keranjang dan Anda akan diarahkan ke halaman Beranda seperti yang ditunjukkan: mengalihkan

Kesimpulan

Hanya itu saja! Sekarang Anda memiliki proses checkout yang dioptimalkan dan Anda tidak perlu khawatir tentang masalah pengabaian keranjang di toko WooCommerce Anda. Pada cuplikan pertama, saya menggunakan kode pendek “woocommerce_cart” yang ditambahkan ke halaman Checkout, untuk menambahkan tabel cart di atas dan formulir checkout di bawahnya. Namun, penting untuk dicatat bahwa Anda harus benar-benar menyingkirkan halaman Keranjang sehingga pengguna tidak akan pernah melihatnya.

Selain itu, saya telah menambahkan potongan kode PHP bonus yang akan membantu Anda mengarahkan ulang checkout kosong. Saya harap posting singkat ini memberikan solusi tentang bagaimana Anda dapat menempatkan Keranjang WooCommerce dan Checkout di satu halaman.

Artikel Serupa

  1. Cara Mengubah Ikon Gateway Pembayaran WooCommerce
  2. Cara Menambahkan Ikon Pembayaran WooCommerce Di Footer [HTML]
  3. Cara Menyembunyikan Ikon PayPal di Halaman Checkout WooCommerce
  4. Cara Mengubah Ukuran Gambar Produk WooCommerce
  5. Bagaimana Cara Mengarahkan Halaman WordPress Tanpa Plugin?
  6. Cara Memasang Toko WooCommerce Langkah Demi Langkah [Panduan Lengkap]
  7. Ubah Lanjutkan Ke Teks Checkout Di WooCommerce
  8. Cara Menampilkan Produk WooCommerce Berdasarkan Kategori
  9. Sembunyikan atau Hapus Bidang Kuantitas dari Halaman Produk WooCommerce
  10. Cara Menyembunyikan Subtotal Keranjang Di WooCommerce atau Menghapus Baris Subtotal
  11. Cara Menyembunyikan Bidang Kode Kupon WooCommerce
  12. Cara Menonaktifkan Metode Pembayaran untuk Kategori Tertentu
  13. Cara Menyembunyikan Tombol Tambahkan ke Keranjang di WooCommerce
  14. Cara Mendapatkan Metode Pembayaran di WooCommerce »Contoh Kode
  15. Cara Membuat Halaman Akun Saya Di WooCommerce
  16. Apa itu Tema Toko WooCommerce? [Dijawab]
  17. Cara Redirect ke Keranjang setelah Login di WooCommerce
  18. Cara Mengubah Teks Tombol Tambahkan ke Keranjang Di Halaman Toko WooCommerce
  19. Cara Melewati Keranjang dan Mengarahkan Kembali ke Halaman Checkout WooCommerce
  20. Cara Mengubah Pemberitahuan 'Ditambahkan ke Keranjang' WooCommerce