Cara melakukan checkout WooCommerce seperti Shopify
Diterbitkan: 2021-10-07Apakah Anda ingin mengubah pembayaran Anda dan membuatnya terlihat seperti Shopify? Kami punya tutorial yang sempurna untuk Anda. Dalam panduan ini, kami akan menunjukkan cara membuat pembayaran WooCommerce Anda seperti Shopify.
WooCommerce adalah salah satu platform eCommerce paling fleksibel dengan banyak opsi penyesuaian. Namun terkadang, semua keuntungan ini bisa menjadi luar biasa bagi admin situs dan pelanggan. Misalnya, kita telah melihat bahwa halaman checkout yang rumit dengan banyak bidang dapat memengaruhi tingkat konversi Anda. Itu sebabnya Anda harus menghapus bidang yang tidak perlu dan menjaga checkout Anda tetap bersih dan sederhana.
Ini bisa menjadi keuntungan untuk platform lain seperti Shopify yang memiliki halaman checkout yang sangat sederhana. Meskipun Anda dapat menyesuaikan pembayaran Anda dan membuat pembayaran satu halaman, misalnya, beberapa pengguna masih lebih suka memiliki halaman pembayaran seperti Shopify. Kabar baiknya adalah fleksibilitas luar biasa dari WooCommerce memungkinkan Anda melakukan pembayaran seperti yang ditawarkan Shopify.
Sebelum kita melihat bagaimana melakukannya, mari kita lihat perbedaan antara halaman checkout WooCommerce dan Shopify.
Pembayaran WooCommerce vs Pembayaran Shopify
Anda sudah tahu bahwa Anda dapat menambahkan banyak bidang checkout di WooCommerce. Tetapi jika Anda menambahkan terlalu banyak, Anda mungkin berakhir dengan halaman checkout yang panjang dan rumit . Ini dapat meningkatkan pengabaian keranjang dan memengaruhi rasio konversi Anda karena pengguna mungkin merasa bosan untuk mengisi begitu banyak bidang.
Di sisi lain, jika Anda melihat halaman checkout Shopify default, itu memiliki desain yang sederhana dan indah dengan hanya bidang checkout yang diperlukan. Sebagai perbandingan, halaman checkout WooCommerce pasti dapat ditingkatkan agar lebih efisien.
Kabar baiknya adalah karena WooCommerce memiliki banyak opsi penyesuaian, Anda dapat dengan mudah membuat checkout WooCommerce Anda terlihat seperti Shopify.
Cara membuat WooCommerce Checkout seperti Shopify
Cara termudah untuk membuat checkout Shopify di WooCommerce adalah dengan menggunakan plugin . WordPress menawarkan banyak plugin yang dapat Anda gunakan untuk menyesuaikan checkout Anda. Di bagian ini, kami akan menganalisis beberapa alat terbaik untuk membuat checkout WooCommerce Anda terlihat seperti Shopify.
Blok WooCommerce
Blok WooCommerce adalah plugin gratis yang dikembangkan oleh Automattic. Ini memiliki banyak blok Gutenberg yang dirancang khusus untuk WooCommerce dan satu yang didedikasikan untuk checkout.
Dengan bantuan blok checkout, Anda dapat dengan mudah membuat checkout WooCommerce Anda terlihat seperti checkout Shopify. Bahkan memiliki tata letak dan bagian konten yang serupa secara default membuat transformasi cukup mudah. Alat ini juga menyediakan berbagai opsi untuk blok checkout, sehingga Anda dapat menyesuaikannya dengan kebutuhan Anda.
Fitur Utama
- Blok checkout yang disederhanakan
- Beberapa opsi blok produk
- Ulasan berdasarkan kategori dan blok produk
- Dukungan yang luar biasa
Harga
Ini adalah plugin gratis yang dapat Anda unduh dari repositori WordPress.
CheckoutWC
CheckoutWC adalah salah satu plugin paling populer untuk menyesuaikan checkout WooCommerce Anda. Muncul dengan beberapa template yang terinspirasi oleh Shopify, sehingga Anda dapat menggunakannya untuk membuat checkout WooCommerce Anda terlihat seperti Shopify.
Plugin ini juga memiliki desain responsif serta opsi kompatibilitas yang hebat dengan sebagian besar plugin dan tema WordPress utama. Selain itu, ia hadir dengan opsi yang nyaman bagi pelanggan Anda seperti pembuat kata sandi, fitur pelengkapan alamat otomatis, dan banyak lagi.
Fitur Utama
- Beberapa templat halaman checkout
- Desain yang sepenuhnya responsif
- Pelengkapan otomatis alamat
- Pengeditan keranjang
Harga
CheckoutWC adalah plugin premium yang dimulai dari 15 USD per bulan atau 149 USD per tahun. Ini juga mencakup jaminan uang kembali 30 hari, pembaruan gratis, dan dukungan untuk satu situs.
Buat Checkout Shopify di WooCommerce dengan Plugin
Untuk tutorial ini, kami akan menggunakan Blok WooCommerce untuk membuat checkout WooCommerce Anda seperti Shopify. Ini adalah plugin gratis yang sangat baik dengan banyak fitur untuk mengedit toko WooCommerce Anda dan blok checkout khusus.
Sebelum kita mulai, pastikan Anda telah mengatur WooCommerce situs Anda dengan benar. Juga perlu diingat bahwa kami akan menggunakan tema Divi, sehingga beberapa halaman dan opsi mungkin berbeda di situs web Anda jika Anda menggunakan tema lain. Namun, Anda harus dapat mengikuti langkah-langkah tanpa masalah.
1. Instal dan Aktifkan Blok WooCommerce
Pertama, instal dan aktifkan plugin. Untuk itu, buka Plugins > Add New di dashboard WordPress Anda dan cari plugin WooCommerce Blocks. Setelah Anda menemukannya, instal dengan mengklik Instal Sekarang .
Setelah instalasi selesai, Aktifkan plugin. Jika Anda memerlukan informasi lebih lanjut tentang proses ini, lihat panduan kami tentang cara menginstal plugin WordPress secara manual.
2. Konfigurasi dan Kustomisasi Halaman Checkout
Sekarang yang harus Anda lakukan adalah pergi ke Halaman di dasbor Anda, temukan halaman Checkout, dan tekan Edit .
Kemudian, Anda akan melihat kode pendek halaman checkout WooCommerce default di sini. Karena kami ingin membuat checkout WooCommerce terlihat seperti Shopify, Anda harus menghapus kode pendeknya. Untuk menghapusnya, cukup klik pada kode pendek dan buka opsi dengan menekan tiga titik vertikal .
Kemudian, klik Hapus blok untuk menghapus kode pendek. Atau, Anda dapat mengklik blok dan kemudian tekan Ctrl + Alt + Z seperti yang ditunjukkan pada pintasan opsi.
Setelah itu, klik ikon ' + ' atau ketik ' / ' untuk menambahkan blok baru dan cari " Checkout ". Pilih blok checkout dan perbarui halaman. Anda akan dapat melihat halaman checkout baru yang terinspirasi dari Shopify di WooCommerce.
Sekarang Anda memiliki dua opsi: biarkan apa adanya atau sesuaikan. Mari kita lihat cara mengeditnya.
Pertama, buka ikon pengaturan di sudut kanan atas layar Anda. Pengaturan halaman dan blok akan muncul di sidebar kanan. Kemudian, klik salah satu blok dan Anda dapat mulai mengedit blok tertentu dari bilah sisi pengaturan blok .
Misalnya, jika Anda ingin mengedit bidang alamat pengiriman, cukup tekan blok alamat pengiriman dan Anda akan melihat semua pengaturan yang tersedia di bilah sisi kanan. Dari sana, Anda dapat menampilkan atau menyembunyikan editor bidang untuk halaman checkout Anda.
Setelah Anda membuat semua perubahan yang diperlukan, Perbarui halaman. Lihat checkout Anda dari ujung depan dan Anda akan melihat halaman checkout baru yang terinspirasi Spotify.
Kiat Pro: Cocokkan halaman Keranjang dengan halaman Checkout
Jika Anda memiliki halaman troli, Anda dapat mengulangi proses di atas untuk halaman troli dan mencocokkan gaya halaman checkout dan troli.
Di dasbor WordPress Anda, cukup buka Pages , temukan halaman Cart dan hapus shortcode halaman cart WooCommerce default. Kemudian, tambahkan blok keranjang baru dengan halaman keranjang dan perbarui.
Itu tergantung pada jenis produk atau layanan yang Anda miliki, tetapi sebagai aturan umum, sebaiknya lewati halaman keranjang untuk mempersingkat proses pembayaran. Jika Anda ingin tahu lebih banyak tentang ini, lihat panduan kami tentang cara melewati halaman keranjang di WooCommerce.
Cara lain untuk membuat WooCommerce Checkout Anda seperti Shopify
Jika Anda berpikir bahwa menyesuaikan halaman checkout dengan mengeditnya terlalu banyak pekerjaan, ada alternatif lain untuk Anda. Anda dapat menggunakan CheckoutWC , plugin premium, untuk membuat checkout WooCommerce Anda terlihat seperti Shopify.
Untuk itu, Anda harus berlangganan salah satu paket mereka karena ini adalah produk berbayar. Anda juga dapat menggunakan uji coba gratis 7 hari untuk menguji apakah alat tersebut menawarkan apa yang Anda butuhkan.
Sekarang mari kita lihat proses untuk membuat checkout Shopify di WooCommerce dengan CheckoutWC.
1. Instal dan Aktifkan CheckoutWC
Pertama, Anda perlu mengaktifkan dan menginstal plugin untuk mulai menggunakannya. Di dasbor Anda, buka Plugins > Add New dan klik Upload Plugin . Unggah file zip yang Anda unduh selama pembelian dan setelah unggahan selesai, tekan Instal Sekarang .
Setelah instalasi selesai, aktifkan plugin. Sekali lagi, Anda dapat melihat panduan kami untuk menginstal plugin WordPress secara manual jika Anda ragu tentang proses ini.
2. Pilih template checkout
Keuntungan utama dari plugin ini adalah memiliki template checkout yang dirancang khusus dengan halaman checkout Shopify. Ada 4 template, jadi pilih salah satu yang Anda sukai untuk toko Anda.
Cukup buka Pengaturan> Checkout untuk WooCommerce> Templat di dasbor WordPress Anda dan Anda akan disajikan dengan empat opsi templat:
- Bawaan
- futuris
- Salin
- Kaca
Template Copify adalah yang paling mirip dengan halaman checkout Shopify, tetapi tiga lainnya juga memiliki beberapa elemen Shopify.
Setelah Anda memilih template, saatnya untuk menyesuaikannya dengan logo Anda. Buka tab Desain dan klik Unggah Logo . Setelah mengunggah gambar, pastikan untuk menyimpan perubahan.
Itu dia! Sekarang periksa checkout Anda dari ujung depan dan Anda akan melihat halaman checkout Shopify di toko WooCommerce Anda .
Bonus: Hapus Bidang Checkout WooCommerce
Terakhir, mari kita lihat bagaimana Anda dapat menghapus beberapa bidang dari checkout.
Katakanlah Anda tidak ingin membuat checkout WooCommerce Anda persis seperti Shopify, tetapi Anda masih ingin menyederhanakan halaman checkout dan menyembunyikan beberapa bidang yang tidak perlu. Karena ini membuat proses checkout lebih cepat, ini akan membantu Anda meningkatkan tingkat konversi dan mengurangi pengabaian keranjang.
Cara termudah untuk menghapus checkout adalah dengan menggunakan plugin WooCommerce Checkout Manager .
Alat ini memungkinkan Anda menyesuaikan halaman checkout dengan mudah dengan menambahkan, menyembunyikan, dan mengedit bidang checkout sesuai dengan kebutuhan Anda.
Instal dan Aktifkan Plugin
Pertama, buka Plugin > Add New dan cari plugin. Kemudian, instal dan aktifkan . Ini adalah alat freemium sehingga Anda dapat mengunduh versi gratis atau mendapatkan salah satu paket premium yang hadir dengan fitur lebih canggih dan mulai hanya dengan 19 USD (pembayaran satu kali).
Edit Halaman Checkout
Setelah Anda menginstal plugin, buka WooCommerce > Settings dan buka tab Checkout . Anda akan melihat semua opsi untuk mengedit halaman checkout WooCommerce Anda.
Selain itu, buka tab Penagihan karena sebagian besar bidang checkout ada di sana. Cukup buka tab Penagihan dan gunakan sakelar Dinonaktifkan untuk menghapus bidang checkout yang Anda inginkan. Anda juga dapat membuatnya wajib atau tidak menggunakan sakelar Wajib .
Setelah Anda puas dengan pilihan Anda, jangan lupa untuk menyimpan perubahan Anda . Kemudian, lihat kasir dari ujung depan dan Anda akan melihat halaman checkout baru Anda.
Jika Anda memerlukan bantuan lebih lanjut dengan proses ini, lihat panduan kami untuk menghapus bidang checkout WooCommerce. Jika Anda hanya ingin menghapus kolom tanpa menambahkan atau mengedit kolom yang ada, Anda dapat menggunakan plugin lain yang disebut Direct Checkout.
Kesimpulan
Singkatnya, checkout Shopify default lebih bersih dan sederhana daripada WooCommerce. Dalam panduan ini, kami telah melihat bagaimana Anda dapat membuat checkout WooCommerce terlihat seperti Shopify di toko Anda. Metode yang paling mudah untuk melakukannya adalah dengan menggunakan plugin dan kami telah menunjukkan kepada Anda prosesnya menggunakan dua alat yang berbeda.
Blok WooCommerce gratis dan menggunakan blok untuk mengedit halaman checkout, sedangkan CheckoutWC adalah plugin premium yang dilengkapi dengan beberapa template checkout untuk membantu Anda menyesuaikan halaman checkout Anda. Kedua plugin menyelesaikan pekerjaan dan sangat mudah digunakan, jadi pilih salah satu yang paling sesuai dengan kebutuhan Anda.
Selain itu, kami juga telah menunjukkan kepada Anda cara menghapus bidang checkout WooCommerce untuk lebih menyesuaikan halaman checkout Anda dan meningkatkan tingkat konversi Anda. Ini akan membuat halaman checkout Anda lebih sederhana dan mempercepat proses checkout.
Untuk mempelajari lebih lanjut tentang cara memaksimalkan pembayaran, lihat cara mengedit halaman pembayaran WooCommerce. Jika Anda menikmati posting ini, lihat tutorial berikut:
- Cara membuat checkout satu halaman WooCommerce
- Berbagai cara untuk menambahkan biaya ke kasir
- Cara menambahkan bidang bersyarat ke checkout WooCommerce