3 Cara Efektif untuk Menyesuaikan & Mengedit Halaman Checkout WooCommerce

Mencari cara terbaik untuk mengedit halaman checkout WooCommerce ?

Mempelajari cara menyesuaikan halaman checkout WooCommerce memungkinkan Anda lebih mengontrol desainnya dan meningkatkan potensi penjualan lebih banyak.

Dalam tutorial terperinci ini, kami akan menunjukkan kepada Anda tiga cara bebas kode untuk menyesuaikan halaman checkout, termasuk sepenuhnya menyesuaikan desain dan/atau mengubah bidang yang muncul di halaman checkout.

Kami juga akan membahas semua fitur bawaan yang ditawarkan WooCommerce untuk menyesuaikan pengalaman checkout.

Mari kita mulai…

Alasan untuk mengedit halaman checkout WooCommerce

Apakah ada alasan mencolok untuk memodifikasi halaman checkout WooCommerce? Itu tergantung. Modul checkout bawaan bersih, fungsional, dan cukup cepat untuk memproses pembayaran tanpa mengganggu pelanggan Anda.

Tetapi Anda mungkin juga memperhatikan kekurangannya. Berikut adalah alasan utama Anda mungkin ingin mengedit halaman checkout WooCommerce :

• Untuk mengganti elemen branding WooCommerce default seperti font preset, gaya, dan ungu WooCommerce.
• Untuk menambahkan item web yang terkait dengan bisnis Anda, seperti logo, warna merek, dan tautan ke dokumentasi pendukung.
• Jika mengoptimalkan checkout untuk konversi diperlukan setelah pengujian.
• Untuk mempercepat proses checkout dengan mengubahnya menjadi satu langkah.
• Untuk menggabungkan upsells, cross-sells, dan produk terkait.
• Untuk menambahkan bidang khusus atau menghapus beberapa bidang yang disediakan oleh WooCommerce.
• Untuk mengubah opsi pengiriman.
• Untuk mengubah elemen desain seperti teks tombol, teks bidang prasetel, dan opsi checkout tamu.

Cara mengedit halaman checkout WooCommerce

Anda memiliki beberapa opsi yang tersedia untuk mengedit halaman checkout WooCommerce. Metode yang paling sesuai untuk Anda akan bergantung pada pengeditan khusus yang Anda coba lakukan dan apakah Anda terbuka untuk menggunakan plugin atau tidak.

Di bawah ini, kita akan membahas tiga metode terbaik:

1. Pengaturan WooCommerce Asli – WooCommerce menyertakan banyak opsi bawaan untuk menyesuaikan checkout, yang akan kami jelaskan di metode pertama. Tema Anda mungkin juga menawarkan opsinya sendiri untuk menyesuaikan desain halaman checkout.
2. Elementor Pro – Elementor Pro sekarang menawarkan widget checkout sendiri yang memungkinkan Anda menyesuaikan desain halaman checkout sepenuhnya. Ini adalah opsi yang bagus jika Anda secara khusus ingin mengedit desain halaman.
3. Editor Bidang Checkout – ini adalah opsi yang bagus jika Anda ingin mengedit bidang formulir yang muncul di halaman checkout. Anda dapat menggunakannya untuk menambahkan bidang baru, menghapus bidang default, dan mengatur ulang semuanya sesuai kebutuhan.

Mari kita lewati mereka..

Metode 1: Gunakan pengaturan checkout WooCommerce default

WooCommerce menawarkan pengaturan bawaan untuk mengedit modul checkout Anda, dan tema WordPress Anda mungkin sudah menyediakan alat untuk menyesuaikan beberapa bidang dan pengaturan checkout di WordPress Customizer.

Itu selalu bijaksana untuk memeriksa pengaturan ini sebelum mencari plugin tambahan, tema, atau penyesuai bidang, karena Anda mungkin sudah memiliki fitur yang Anda butuhkan.

Misalnya, WooCommerce memiliki alat untuk menghapus bidang tertentu, mengaktifkan tarif pajak saat checkout, dan menampilkan bidang kupon.

Langkah 1: Tambahkan perhitungan pajak dan bidang kupon saat checkout

WooCommerce memiliki pengaturan bawaan untuk mengotomatiskan penghitungan pajak dan menerima kupon saat checkout.

Untuk mengaktifkan/menonaktifkan, buka WooCommerce > Pengaturan di WordPress.

Pilih tab Umum , dan gulir ke bawah ke bagian Aktifkan Pajak . Centang kotak untuk Mengaktifkan Tarif dan Perhitungan Pajak saat checkout. Ini menghasilkan dan menampilkan biaya pajak berdasarkan tarif yang Anda konfigurasikan di WooCommerce ( WooCommerce > Pengaturan > Pajak > Tarif Standar ).

Centang kotak Aktifkan Penggunaan Kode Kupon untuk menampilkan bidang tempat pelanggan dapat mengetikkan kode diskon.

Jika Anda lebih suka tidak menampilkan elemen tertentu, cukup hapus kotak centang. Pastikan untuk mengklik tombol Simpan untuk melihat perubahan Anda di frontend.

Langkah 2: Tampilkan harga produk dengan atau tanpa pajak

Menghitung pajak di akhir pembayaran adalah satu hal, tetapi Anda juga harus memutuskan apakah Anda ingin memasukkan pajak ke dalam biaya keseluruhan produk, terutama saat pelanggan melewati proses pembayaran.

Secara umum, ini menunjukkan transparansi yang lebih, daripada menaikkan harga dengan pajak tepat sebelum pelanggan membayar.

Untuk memasukkan pajak dengan harga dalam proses pembayaran, buka WooCommerce > Pengaturan > Pajak .

Gulir ke bawah pada halaman untuk menemukan bidang "Tampilkan harga selama keranjang dan pembayaran."

Pilih dari tarik-turun:

• Termasuk pajak
• Tidak termasuk pajak

Klik Simpan Perubahan .

Langkah 3: Tetapkan item pengiriman apa yang ditampilkan di checkout

Selain itu, di bawah WooCommerce > Pengaturan , Anda dapat menandai zona pengiriman, metode, dan perhitungan mana yang muncul di checkout WooCommerce.

Cukup buka tab Pengiriman dan sesuaikan:

• Perhitungan: untuk mengaktifkan kalkulator pengiriman di halaman keranjang
• Perhitungan: untuk menyembunyikan biaya pengiriman di checkout sampai alamat dimasukkan
• Tujuan pengiriman: untuk mengatur alamat pengiriman default di checkout

Klik Simpan Perubahan .

Langkah 4: Kelola akun dan privasi saat checkout

Sambil tetap berada di bawah WooCommerce > Pengaturan , buka tab Akun & Privasi .

Di bagian atas halaman, Anda akan melihat dua bidang:

• Checkout tamu: sertakan/hapus checkout tamu dan login akun yang ada
• Pembuatan akun: izinkan pelanggan membuat akun atau mulai berlangganan saat checkout

Lanjutkan ke bawah halaman Akun & Privasi untuk menemukan area Kebijakan Privasi .

Isi kotak teks Kebijakan Privasi Checkout untuk memastikan pelanggan melihat kebijakan saat mereka check out. Kosongkan bidang jika Anda tidak ingin menampilkan kebijakan privasi di area tersebut.

Langkah 5: Pilih halaman checkout yang sebenarnya dan pengaturan lanjutan lainnya

Arahkan ke tab Advanced untuk membuka bagian Page Setup ; ini mendorong pedagang untuk memberi tahu WooCommerce ke mana harus mengirim pelanggan saat mereka check out.

Secara default, WooCommerce menghasilkan halaman Cart , Checkout , My Account , dan Terms and Conditions , yang dapat Anda temukan dengan membuka Pages > All Pages di WordPress.

Namun, Anda memiliki opsi untuk membuat halaman yang sama sekali baru dan menautkannya di sini. Itu mengesampingkan halaman checkout default dan mengirim pelanggan ke halaman kustom.

Opsi lain di tab Lanjutan adalah dengan Force Secure Checkout , yang memerlukan sertifikat SSL.

Langkah 6: Ubah desain checkout tema Anda di WordPress Customizer

Tema WordPress dengan fungsionalitas WooCommerce sering kali menginstal alat WordPress Customizer untuk menyesuaikan gaya checkout Anda dengan mudah.

Ingatlah bahwa semua tema WooCommerce menawarkan pengaturan WordPress Customizer yang unik (beberapa tidak memiliki pengaturan sama sekali), tetapi secara keseluruhan, ada baiknya memeriksa WordPress Customizer untuk kontrol cepat atas checkout.

Untuk memulai, buka Penampilan > Kustomisasi di WordPress.

Jika tersedia, tema Anda akan menampilkan tombol WooCommerce di suatu tempat di Penyesuai WordPress. Klik itu.

Ini hanyalah sebuah contoh dengan tema Storefront (jadi Anda mungkin tidak melihat hal yang sama), tetapi agak umum untuk tema memiliki tab Checkout di Customizer. Pilih itu, atau sesuatu yang serupa, yang mungkin menunjukkan kontrol atas checkout.

Telusuri semua pengaturan checkout yang ditawarkan oleh tema Anda. Di tema Etalase, Anda dapat membuat bidang ini opsional, wajib, atau tersembunyi:

• bidang nama perusahaan
• Alamat baris 2 bidang
• Bidang telepon

Anda juga dapat menyorot bidang wajib dengan tanda bintang.

Terakhir, tema Storefront menawarkan opsi untuk menampilkan halaman Kebijakan Privasi dan Syarat dan Ketentuan di akhir pembayaran.

Metode 2: Gunakan pembuat halaman untuk mengedit bidang checkout WooCommerce dan gaya keseluruhan

Pembuat halaman seperti Elementor, Beaver Builder, dan Themify semuanya menawarkan widget konten WooCommerce untuk menggantikan apa yang saat ini ada di halaman checkout WooCommerce.

Pembuat halaman hampir secara eksklusif memesan modul checkout WooCommerce mereka untuk paket Premium mereka, jadi ada kemungkinan besar Anda harus membayar untuk fungsi ini. Misalnya, Anda menerima widget Elementor Checkout dengan paket Pro.

Karena itu, pembuat halaman memberi Anda kontrol hampir penuh atas halaman checkout Anda, jadi ini adalah cara mudah untuk mengedit checkout WooCommerce tanpa pengetahuan pengkodean, dan hanya sekitar $50 hingga $100 per tahun.

Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana kustomisasi checkout umumnya bekerja dengan pembuat halaman, menggunakan Elementor.

Langkah 1: Buka Halaman Checkout yang ditunjuk di Elementor

Untuk mengedit checkout WooCommerce di Elementor, Anda harus membuka halaman Checkout yang dibuat secara otomatis oleh WooCommerce. Temukan itu di bawah Pages > All Pages .

Buka halaman berlabel “Halaman Checkout”, lalu klik Edit dengan Elementor .

Langkah 2: Hapus kode pendek checkout WooCommerce

WooCommerce telah secara otomatis menambahkan "WooCommerce" -nya checkout” ke dalam editor, yang membuat modul checkout WooCommerce default.

Tujuannya adalah untuk menukarnya dengan modul checkout dari pembuat halaman Anda. Jadi, hapus shortcode checkout WooCommerce.

Langkah 3: Masukkan widget Elementor Checkout

Sekarang saatnya untuk menemukan widget checkout pembuat halaman Anda. Elementor menawarkan satu yang disebut Checkout , yang dapat Anda temukan menggunakan bilah pencarian atau dengan menjelajah di bawah judul WooCommerce. Klik dan seret widget Checkout ke halaman kosong, di mana tertulis, “Seret Widget Ke Sini.”

Catatan: Anda mungkin tidak melihat widget Checkout jika belum memutakhirkan ke Elementor versi Premium. Ini adalah kasus untuk sebagian besar pembuat halaman.

Langkah 4: Sesuaikan konten, gaya, dan fitur lanjutan

Setelah menyeret widget checkout, Elementor membuat pratinjau checkout. Anda kemudian dapat mengklik tab ini di sebelah kiri untuk menyesuaikan setiap aspek checkout:

Sebagai contoh, Anda dapat mengalihkan Tata Letak Umum ke satu kolom dan menyesuaikan teks placeholder untuk bidang nama depan.

Tab penyesuaian lainnya meliputi:

• Detail Penagihan
• informasi tambahan
• Pesanan Anda
• Kupon
• Pembayaran

Ada juga banyak cara untuk mengedit checkout WooCommerce di bawah tab Style .

Gunakan tab ini:

• Bagian
• Tipografi
• Formulir
• Ringkasan Pesanan
• Tombol Beli

Sebagai contoh, kami mengganti tombol Beli biru menjadi hijau.

Terakhir, tab Advanced menawarkan alat yang lebih canggih untuk mengedit:

• Tata letak
• Efek Gerak
• Transformasi
• Latar belakang
• perbatasan
• Masker
• Daya tanggap
• Atribut
• CSS khusus

Selama Anda tetap menggunakan halaman yang sebelumnya ditetapkan sebagai "Halaman Checkout" untuk WooCommerce, dan menukar kode pendek checkout WooCommerce untuk widget checkout pembuat halaman, Anda dapat menyimpan perubahan dan menyelesaikan prosesnya!

Metode 3: Instal plugin penyesuai untuk mengedit bidang

Ada banyak plugin penyesuai checkout WooCommerce, seperti:

Sebagian besar plugin checkout WooCommerce menyediakan alat penyesuaian tambahan untuk memodifikasi dan menambahkan bidang, tetapi ada beberapa yang benar-benar mengubah desain, seperti plugin Multi-langkah Checkout.

Kami menyarankan Anda melihat semua plugin yang direkomendasikan di atas, tetapi kami akan melalui tutorial singkat dengan plugin Editor Bidang Checkout untuk membantu Anda memahami cara mengedit checkout WooCommerce dengan sebuah plugin.

Langkah 1: Instal dan aktifkan plugin Editor Bidang Checkout

Instal plugin Checkout Field Editor, lalu ikuti proses mengaktifkan plugin.

Setelah aktif, plugin menambahkan tab baru di WordPress, yang dapat Anda akses dengan membuka WooCommerce > Formulir Checkout .

Langkah 2: Edit bidang saat ini

Plugin menampilkan semua bidang saat ini di dalam checkout WooCommerce Anda, kecuali plugin sekarang menautkan ke checkout WooCommerce default, sehingga Anda memiliki kontrol penuh atas bidang tersebut.

Anda dapat mengedit:

• Bidang Penagihan
• Bidang Pengiriman
• Bidang Tambahan

Untuk mengedit bidang checkout WooCommerce, klik Edit di sebelah bidang yang ingin Anda ubah. Untuk contoh ini, kami akan mengubah bidang Nama Perusahaan .

Di jendela Edit Bidang , Anda dapat mengubah opsi untuk bidang, seperti:

• Label
• Tempat penampung
• Nilai Default
• Kelas
• Validasi

Anda juga dapat menghapus centang pada kotak Wajib , sehingga pelanggan tidak diwajibkan untuk mengisi bidang tersebut. Anda juga dapat menonaktifkan bidang sehingga tidak muncul di checkout sama sekali. Pastikan untuk mengklik Simpan & Tutup .

Plugin biasanya menyimpan semuanya setelah itu, tetapi Anda dapat mengklik tombol Simpan Perubahan lagi untuk memastikannya berfungsi.

Seperti yang Anda lihat, kami menghapus bidang Nama Perusahaan dari area checkout.

Dan itu hilang dari kasir frontend.

Anda juga mungkin ingin mengedit sesuatu seperti teks Placeholder . Dalam hal ini, ini adalah proses yang sama untuk membuka bidang yang dimaksud dan mengubah pengaturan.

Bidang Nama Depan di checkout kami sekarang mengungkapkan teks placeholder baru.

Langkah 3: Tambahkan bidang baru ke checkout WooCommerce

Untuk menambahkan bidang yang sama sekali baru, klik tombol Tambah Bidang .

Pilih Jenis bidang, pilih dari opsi seperti:

• Teks
• Nomor
• Tersembunyi
• Kata sandi
• Telepon
• kotak centang
• Bulan
• URL
• dan masih banyak lagi

Sebagai contoh, kami akan membuat bidang Angka dan meminta pelanggan untuk mengetikkan Nomor Hadiah Loyalitas mereka. Anda juga dapat menetapkan elemen seperti placeholder, nilai default, dan apakah itu bidang wajib.

Pastikan Anda mencentang kotak Enabled , lalu klik Save & Close .

Langkah 4: Lihat hasilnya

Di bagian belakang, Anda akan melihat bidang checkout baru di bagian bawah daftar. Itu ditempatkan di akhir secara default, tetapi Anda dapat mengklik dan menyeret untuk menyusun ulang.

Dan bidang baru juga muncul di modul checkout frontend.

Buat halaman checkout yang sempurna hari ini

Kami menyarankan untuk memulai dengan pengaturan checkout WooCommerce default untuk melihat apakah mereka membantu mencapai hasil yang Anda inginkan. Untuk pengeditan lebih lanjut, pertimbangkan untuk menggunakan bidang khusus. Dan untuk penyesuaian tingkat lanjut, tetapi relatif mudah diterapkan, gunakan salah satu pembuat halaman yang disarankan.

Apa pertanyaan utama Anda tentang cara mengedit checkout WooCommerce? Bagikan pemikiran Anda di komentar!