Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor?

Diterbitkan: 2022-10-18

Tidak suka halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama? Nah, ini mungkin waktu yang tepat untuk mengedit halaman Anda. Dengan cara ini, pelanggan Anda dapat dengan cepat melakukan pemesanan, yang juga dapat membantu mendorong lebih banyak konversi.

Tapi bagaimana tepatnya Anda menyesuaikan halaman checkout WooCommerce Anda? Ternyata, ada 3 cara efektif, termasuk pengeditan manual, menggunakan plugin, dan pembuat halaman Elementor. Namun, metode terbaik tergantung pada metode mana yang menurut Anda mudah untuk dikerjakan.

Sekarang, tanpa basa-basi lagi, pertama-tama mari kita cari tahu mengapa Anda mungkin ingin menyesuaikan halaman checkout Anda. Setelah itu, kita bisa melihat cara mengedit halaman checkout WooCommerce Anda menggunakan kombinasi Elementor & Shopready .

Daftar isi

Mengapa Anda Mungkin Ingin Mengedit Halaman Checkout WooCommerce Anda

Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor? -... Tidak menyukai halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?
Bagaimana Cara Mengedit Halaman Checkout WooCommerce Elementor WO? -…
Tidak suka halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?

Halaman checkout WooCommerce Anda dapat membuat perbedaan besar dalam proses pembelian pesanan. Karena itu, ada begitu banyak alasan mengapa Anda mungkin ingin mengeditnya. Ini termasuk:

Tingkatkan pengalaman pengguna

Proses checkout pada WooCommerce default mana pun cukup panjang. Oleh karena itu, Anda dapat memilih untuk mengedit halaman dan mempersingkat proses checkout. Dengan cara ini, pelanggan Anda akan memiliki pengalaman berbelanja yang lebih baik.

Jadikan checkout aman e

Jika pelanggan Anda merasa tagihan dan informasi pribadi mereka tidak aman, mereka kemungkinan akan pergi tanpa melakukan pembelian. Oleh karena itu, Anda harus mempertimbangkan untuk mengedit template halaman checkout untuk menyertakan gateway pembayaran yang aman.

Izinkan pembelian cepat dan mudah

Alasan lain Anda mungkin ingin menyesuaikan halaman checkout WooCommerce adalah untuk membantu pelanggan Anda melakukan pemesanan dengan cepat. Misalnya, Anda dapat menyertakan opsi detail pengisian otomatis.

Tingkatkan branding

Merasa seperti merek Anda tidak menonjol dari keramaian? Anda mungkin ingin mengedit halaman checkout WooCommerce Anda untuk memberikan tampilan dan nuansa profesional. Salah satu cara untuk melakukannya adalah dengan mengubah desainnya dan bahkan template halaman.

Bagaimana Cara Mengedit Halaman Checkout WooCommerce Elementor WO?

Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor? -... Tidak menyukai halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?
Bagaimana Cara Mengedit Halaman Checkout WooCommerce Elementor WO? -…
Tidak suka halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?

Ada banyak metode untuk mengedit halaman checkout WooCommerce Anda. Anda dapat memilih untuk melakukannya secara manual, menggunakan kombinasi elementor & Shopready , atau menggunakan plugin. Pilihan ada padamu. Jadi, mari kita bahas cara kerja masing-masing metode.

Metode 1: Pengeditan manual

Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor? -... Tidak menyukai halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?
Bagaimana Cara Mengedit Halaman Checkout WooCommerce Elementor WO? -…
Tidak suka halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?

Metode ini melibatkan penggunaan kode untuk mengedit template halaman checkout Anda. Akibatnya, ini memberi Anda lebih banyak kontrol atas penyesuaian dibandingkan dengan menggunakan metode pengeditan lainnya. Di bawah ini adalah langkah-langkah sederhana tentang cara melakukannya.

Langkah 1: Pilih filter untuk menyesuaikan bidang checkout

Untuk mengedit bidang checkout Anda, Anda akan menggunakan file functions.php di situs web eCommerce Anda. Ini seharusnya mudah karena WooCommerce memberi Anda daftar filter untuk memungkinkan Anda menyesuaikan bidang checkout. Misalnya, ada:

  • WooCommerce_shipping_fields
  • WooCommerce_after_checkout_form
  • WooCommerce_billing_fields
  • WooCommerce_checkout_after_terms_and_conditions

Langkah 2: Edit teks placeholder

Selanjutnya, mulailah dengan menyesuaikan teks placeholder pada order_comments_fields. Anda dapat melakukannya hanya dengan menambahkan potongan kode berikut ke file functions.php Anda.

Langkah 3: Menghapus bidang

Jika Anda ingin menghapus bidang, Anda cukup menambahkan kode di bawah ini ke file functions.php Anda.

Langkah 4: Tambahkan bidang yang diperlukan

Untuk menambahkan bidang ke halaman checkout WooCommerce Anda, Anda cukup memasukkan kode di bawah ini ke file function.php Anda.

Setelah memasukkan kode, Anda akan melihat bahwa bidang tambahan akan muncul. Tidak ada yang perlu dikhawatirkan. Anda tinggal copy kode berikut untuk validasi data.

Langkah Terakhir: Simpan data Anda

Terakhir, masukkan kode berikut untuk memastikan bahwa setiap detail yang dimasukkan pelanggan Anda di halaman checkout disimpan.

Metode 2: Menggunakan Pembuat Halaman Elementor

Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor? -... Tidak menyukai halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?
Bagaimana Cara Mengedit Halaman Checkout WooCommerce Elementor WO? -…
Tidak suka halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?

Mengedit halaman checkout Anda secara manual mengharuskan Anda memiliki pengalaman pengkodean. Untungnya, jika Anda bukan orang yang paham teknologi, Anda bisa menggunakan elementor, salah satu pembuat halaman WordPress terbaik. Berikut ini adalah langkah-langkah bagaimana melakukan editing menggunakan elementor.

Langkah 1: Temukan halaman checkout

Pertama, buka dasbor WordPress Anda dan temukan daftar Halaman. Di bawah daftar Halaman, Anda dapat menemukan halaman checkout default. Cukup klik tombol Edit untuk meluncurkan editor WordPress. Selanjutnya, pilih opsi Edit With Elementor untuk mengaktifkan Elementor dan kemudian luncurkan editor Elementor.

Langkah 2: Tambahkan widget checkout Elementor

Selanjutnya, buka halaman checkout default di elementor dan hapus widget checkout atau kode pendek WooCommerce yang ada. Kemudian, tambahkan widget checkout di Editor Elementor. Anda seharusnya dapat melihat pratinjau langsung dari halaman checkout Anda.

Langkah 3: Edit konten di halaman checkout

Di bawah tab Konten yang terletak di bilah sisi Elementor, klik Pengaturan umum. Dari pengaturan, Anda dapat memutuskan untuk memilih tata letak satu atau dua kolom untuk mengedit dan menyesuaikan konten .

Selain itu, Anda dapat mengedit detail penagihan dan pengiriman, informasi tambahan, pesanan Anda, kupon, dan detail pembayaran. Dan jika Anda ingin menambahkan kotak kupon , itu juga mungkin.

Langkah 4: Edit gaya halaman checkout Anda

Tepat di sebelah tab Konten, klik tab Gaya untuk menyesuaikan lebih lanjut gaya halaman checkout Anda. Anda ingin memastikan desain halaman checkout kustom Anda cocok dengan toko Anda.

Di bawah tab Gaya, Anda dapat memilih opsi desain yang berbeda, termasuk Bagian, Tipografi, Formulir, Ringkasan pesanan, dan tombol Pembelian. Cukup ubah dan coba berbagai opsi untuk menemukan gaya yang membuat halaman checkout Anda menonjol.

Langkah 5: Simpan perubahan Anda

Setelah Anda selesai menyesuaikan gaya template halaman checkout Anda, simpan semua perubahan. Selanjutnya, pratinjau perubahan sebelum Anda akhirnya dapat mempublikasikan halaman Anda.

Metode 3: Menggunakan Plugin

Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor? -... Tidak menyukai halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?
Bagaimana Cara Mengedit Halaman Checkout WooCommerce Elementor WO? -…
Tidak suka halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?

Cara lain yang mudah dan cepat untuk mengedit halaman checkout WooCommerce Anda adalah menggunakan plugin. Sekarang, ada beberapa opsi plugin untuk dipilih. Namun pada artikel kali ini kita akan fokus menggunakan kombinasi Elementor & Shopready .

Langkah 1: Instal add-on Shopready untuk elemen

Sebelum menginstal plugin ini, pastikan WordPress Anda memiliki pembuat halaman Elementor. Ini karena Shopready tidak bisa bekerja sendiri. Kemudian, di dashboard WordPress Anda, klik plugin dan pilih Add New. Selanjutnya, temukan Shopready di kotak pencarian dan klik tombol Activate.

Langkah 2: Sesuaikan konten halaman checkout Shopready Anda

Di dasbor WordPress Anda, pilih untuk membuka Shopready. Anda akan diarahkan ke dashboard Shopready. Di bawah dasbor, ada opsi Widget, Modul, dan Template untuk membantu Anda menyesuaikan halaman Anda. Anda dapat memilih opsi apa saja untuk mengedit dan menyesuaikan konten .

Langkah 3: Aktifkan widget

Klik pada opsi widget dan pilih tab Aktifkan Semua. Kemudian, pilih Simpan perubahan. Tetapi jika Anda tidak ingin mengaktifkan semua bidang, Anda cukup memilih opsi pilihan Anda dan menyimpan perubahannya.

Langkah 4: Aktifkan Modul

Selanjutnya, pilih opsi Modul dan klik Aktifkan Semua. Anda juga dapat memilih opsi Nonaktifkan semua atau aktifkan secara selektif hanya beberapa. Setelah selesai, klik tombol Simpan Perubahan.

Langkah 5: Aktifkan Template

Di bawah bagian ini, Anda akan menemukan opsi seperti Toko, halaman Checkout, Keranjang, halaman detail produk, dan banyak lagi. Klik tab Aktifkan pada opsi templat pilihan Anda, lalu Simpan.

Langkah 6: Aktifkan API mata uang

Klik pada tab API dan masukkan kunci API mata uang Anda di bidang kosong yang disediakan. Kemudian, pilih opsi Simpan Perubahan untuk menyelesaikan proses.

Mengapa menggunakan Shopready Untuk Mengedit Halaman Checkout WooCommerce

Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor? -... Tidak menyukai halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?
Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor? -…
Tidak suka halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?

ShopReady hanyalah sebuah add-on untuk Elementor. Dikembangkan oleh QuomodoSoft, plugin ini menawarkan begitu banyak manfaat saat menggunakannya untuk mengedit halaman checkout kustom WooCommerce Anda. Ini termasuk:

Berbagai macam widget

Plugin ini memberi Anda lebih dari 100 widget halaman toko yang dapat Anda tambahkan dengan mudah ke halaman Elementor Anda. Akibatnya, Anda dapat dengan cepat menyesuaikan halaman checkout WooCommerce sesuai kebutuhan Anda.

Template yang sudah dibuat sebelumnya

Jika Anda adalah pengguna WooCommerce baru, Anda harus mempertimbangkan untuk menggunakan Shopready untuk mengedit halaman checkout Anda. Ini karena plugin ini memiliki templat yang telah dirancang sebelumnya untuk kemudahan penyesuaian.

Fitur berorientasi pelanggan

Alasan lain Anda harus menggunakan plugin ini untuk mengedit halaman WooCommerce Anda adalah karena fitur berorientasi pelanggannya. Beberapa di antaranya termasuk Halaman Terima Kasih, tambahkan opsi kotak kupon , dan perbandingan produk.

Ramah seluler

Plugin ini memungkinkan Anda untuk mengedit halaman checkout Anda dan menjadikannya mobile-friendly. Hasilnya, pelanggan Anda dapat memiliki pengalaman berbelanja yang luar biasa terlepas dari perangkat yang mereka gunakan.

Kesimpulan

Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor? -... Tidak menyukai halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?
Bagaimana Mengedit Halaman Checkout WooCommerce Tanpa Elementor? -…
Tidak suka halaman checkout WooCommerce default Anda karena terlihat membosankan, dan proses checkoutnya juga lama?

Secara keseluruhan, ada begitu banyak alasan mengapa Anda mungkin ingin mengedit halaman checkout WooCommerce Anda. Bisa jadi Anda ingin meningkatkan pengalaman pengguna pelanggan Anda, membuat halaman aman, atau meningkatkan branding Anda. Apapun masalahnya, Anda dapat memilih untuk mengedit menggunakan plugin, elemen, atau melakukannya secara manual.

Tentu saja, menggunakan plugin atau kombinasi elemen & Shopready adalah cara termudah. Ini karena Shopready menawarkan berbagai macam widget untuk dipilih. Akibatnya, Anda dapat mengedit halaman checkout Anda dan menjadikannya sebagai pribadi yang Anda inginkan. Namun, jika Anda berpengalaman dalam pengkodean, Anda selalu dapat mengedit halaman Anda secara manual.

Cara Menambahkan Wishlist Di Plugin WooCommerce W/O