Cara Mengoptimalkan Cart, Checkout, dan My Account di WooCommerce
Halaman Cart, Checkout, dan My Account merupakan bagian penting dalam website toko online berbasis WooCommerce. Ketiganya membantu pelanggan mengelola produk yang ingin dibeli, menyelesaikan pembayaran, serta melihat riwayat pesanan dan informasi akun.
Pengaturan yang tepat dapat membuat proses belanja lebih mudah dipahami, mengurangi hambatan saat checkout, dan membantu pelanggan mengelola transaksi secara mandiri.
Dalam panduan ini, Anda akan mempelajari cara mengatur halaman Cart, Checkout, dan My Account di WooCommerce, mulai dari pengaturan dasar, penyesuaian tampilan, hingga pengujian fungsi sebelum toko online digunakan.
Mengenal Halaman Cart, Checkout, dan My Account
WooCommerce biasanya membuat halaman Cart, Checkout, dan My Account secara otomatis ketika proses instalasi dan pengaturan awal selesai.
Setiap halaman memiliki fungsi berbeda dan harus ditetapkan dengan benar agar proses belanja berjalan lancar.
| Halaman | Fungsi utama | Informasi yang ditampilkan |
|---|---|---|
| Cart (Keranjang) | Memeriksa produk sebelum membeli | Produk, jumlah barang, harga, kupon, dan ringkasan belanja |
| Checkout | Menyelesaikan pesanan | Data pelanggan, alamat, pengiriman, metode pembayaran, dan total transaksi |
| My Account (Akun Saya) | Mengelola akun pelanggan | Riwayat pesanan, alamat, informasi akun, dan metode pembayaran yang didukung |
Ketiga halaman ini saling terhubung. Pelanggan biasanya memilih produk, memeriksa keranjang, mengisi informasi pada halaman checkout, lalu melihat detail pesanan atau mengelola akun melalui My Account.
Persiapan Sebelum Mengatur Halaman WooCommerce
Sebelum melakukan konfigurasi, pastikan WordPress dan WooCommerce sudah terinstal serta berfungsi dengan baik. Sebaiknya gunakan versi yang kompatibel dan buat backup website sebelum mengubah halaman atau memasang ekstensi tambahan.
Siapkan juga informasi dasar toko, seperti alamat bisnis, mata uang, metode pembayaran, aturan pengiriman, dan kebijakan transaksi. Informasi tersebut akan digunakan saat mengatur proses checkout.
1. Cara Mengatur Halaman Cart di WooCommerce
Halaman Cart atau keranjang belanja digunakan untuk menampilkan produk yang dipilih pelanggan sebelum melanjutkan ke proses pembayaran.
Pada halaman ini, pelanggan dapat memeriksa jumlah barang, harga, kupon diskon, dan ringkasan biaya pesanan.
Langkah mengatur halaman Cart
- Masuk ke dashboard WordPress.
- Buka menu Pages → All Pages.
- Cari halaman Cart atau Keranjang Belanja, lalu klik Edit.
- Periksa apakah halaman tersebut sudah berisi blok WooCommerce Cart.
- Jika belum tersedia, tambahkan blok Cart melalui editor blok WordPress.
- Klik Update untuk menyimpan perubahan.
WooCommerce versi modern menggunakan blok Cart pada instalasi baru, sedangkan toko yang menggunakan konfigurasi lama mungkin masih memakai shortcode.
Jika diperlukan, halaman Cart klasik dapat menggunakan shortcode berikut:[woocommerce_cart]
Masukkan shortcode tersebut melalui blok Shortcode pada editor WordPress, lalu simpan halaman. Gunakan blok Cart atau shortcode yang sesuai dengan konfigurasi toko dan ekstensi yang digunakan.
Elemen yang perlu diperhatikan pada halaman Cart
Agar pelanggan lebih mudah memeriksa keranjang, pastikan beberapa elemen berikut berfungsi dengan baik:
-
Daftar produk
Menampilkan nama, gambar, dan harga produk. -
Jumlah produk
Memungkinkan pelanggan memperbarui kuantitas barang. -
Kupon diskon
Menyediakan kolom untuk memasukkan kode promo jika fitur kupon digunakan. -
Ringkasan belanja
Menampilkan subtotal dan biaya lain yang sudah dapat dihitung. -
Tombol menuju checkout
Memudahkan pelanggan melanjutkan proses pembelian. -
Tautan belanja kembali
Membantu pelanggan menemukan produk lain jika masih ingin berbelanja.
Pada blok Cart, bagian keranjang dapat memiliki tampilan berbeda ketika berisi produk dan ketika kosong.
Anda dapat menyesuaikan bagian yang tersedia melalui editor blok sesuai kemampuan tema dan versi WooCommerce.
2. Cara Mengatur Halaman Checkout di WooCommerce
Halaman Checkout merupakan bagian tempat pelanggan mengisi informasi yang dibutuhkan untuk menyelesaikan pesanan.
Informasi tersebut biasanya mencakup data kontak, alamat penagihan, alamat pengiriman jika diperlukan, pilihan pengiriman, dan metode pembayaran.
Pengaturan checkout yang baik perlu mengutamakan kemudahan penggunaan, kejelasan biaya, dan keamanan transaksi.
Langkah mengatur halaman Checkout
- Buka Pages → All Pages di dashboard WordPress.
- Cari halaman Checkout atau Pembayaran.
- Klik Edit untuk membuka editor halaman.
- Periksa apakah halaman menggunakan blok WooCommerce Checkout.
- Jika belum ada, tambahkan blok Checkout melalui editor blok.
- Simpan perubahan dengan mengklik Update.
Pada instalasi WooCommerce baru, blok Checkout biasanya sudah disediakan secara otomatis. Jika toko menggunakan checkout klasik, halaman dapat menggunakan shortcode berikut:
[woocommerce_checkout]Masukkan shortcode melalui blok Shortcode jika diperlukan. Jangan menambahkan blok Checkout dan shortcode checkout secara bersamaan pada halaman yang sama karena dapat menyebabkan tampilan atau fungsi yang tidak semestinya.
Atur kolom informasi pelanggan
Informasi yang diminta ketika checkout sebaiknya sesuai kebutuhan pemrosesan pesanan.
| Informasi | Kegunaan | Saran pengaturan |
|---|---|---|
| Nama pelanggan | Identifikasi penerima atau pemesan | Wajib jika dibutuhkan untuk pemrosesan pesanan |
| Mengirim konfirmasi dan informasi pesanan | Pastikan alamat dapat digunakan | |
| Nomor telepon | Koordinasi pengiriman jika diperlukan | Sesuaikan dengan proses bisnis |
| Alamat pengiriman | Mengirim produk fisik | Wajib jika pengiriman membutuhkan alamat |
| Alamat penagihan | Informasi penagihan transaksi | Sesuaikan dengan metode pembayaran dan kebutuhan bisnis |
| Catatan pesanan | Informasi tambahan dari pelanggan | Opsional jika tidak diperlukan |
Pada Checkout Block, sejumlah kolom dapat disesuaikan melalui pengaturan blok, termasuk visibilitas kolom perusahaan dan alamat tambahan serta kewajiban mengisi alamat atau nomor telepon tertentu.
Pilihan yang tersedia bergantung pada versi dan konfigurasi WooCommerce. Hindari meminta terlalu banyak informasi yang tidak relevan. Formulir yang sederhana dapat membantu pelanggan menyelesaikan pesanan dengan lebih nyaman.
Atur metode pembayaran dan pengiriman
Pastikan metode pembayaran yang digunakan toko sudah diaktifkan melalui WooCommerce → Settings → Payments. Pilihan yang muncul di halaman Checkout bergantung pada metode pembayaran aktif serta kompatibilitas ekstensi dengan blok Checkout.
Untuk pengiriman, periksa pengaturan melalui WooCommerce → Settings → Shipping. Pastikan zona pengiriman, tarif, dan ketentuan layanan sesuai dengan wilayah yang dilayani.
Jika menggunakan payment gateway atau plugin ekspedisi, lakukan pengujian untuk memastikan integrasi berfungsi pada halaman Checkout yang dipilih. Tidak semua ekstensi mendukung semua jenis checkout.
Tampilkan kebijakan toko
Tambahkan halaman Syarat dan Ketentuan serta Kebijakan Privasi sesuai kebutuhan bisnis. Kemudian, hubungkan halaman tersebut melalui pengaturan WooCommerce dan WordPress.
WooCommerce dapat menampilkan tautan kebijakan pada checkout agar pelanggan dapat membaca ketentuan sebelum menyelesaikan transaksi. Tampilan persetujuan dapat berbeda antara checkout berbasis blok dan checkout klasik.
3. Cara Mengatur Halaman My Account di WooCommerce
My Account atau Akun Saya merupakan halaman yang memungkinkan pelanggan mengakses informasi akun dan mengelola aktivitas belanja.
Pelanggan yang masuk ke akun dapat melihat riwayat pesanan, mengubah informasi profil, memperbarui alamat, dan menggunakan fitur lain yang tersedia sesuai konfigurasi toko.
WooCommerce menggunakan shortcode untuk menampilkan area My Account pada halaman ini. Berbeda dengan Cart dan Checkout, saat ini belum tersedia blok bawaan berbasis blok yang setara untuk menggantikan seluruh area My Account.
Langkah mengatur halaman My Account
- Buka Pages → All Pages pada dashboard WordPress.
- Cari halaman My Account atau Akun Saya.
- Klik Edit untuk membuka halaman.
- Periksa apakah halaman berisi shortcode berikut:
[woocommerce_my_account] - Jika shortcode belum tersedia, tambahkan blok Shortcode pada editor WordPress, kemudian masukkan shortcode tersebut.
- Klik Update untuk menyimpan perubahan.
Setelah halaman ditampilkan, WooCommerce akan menyediakan area akun berdasarkan status login pelanggan dan pengaturan akun toko. Pengunjung yang belum login dapat melihat formulir login dan, jika pendaftaran diizinkan, formulir registrasi.
Atur fitur akun pelanggan
Buka WooCommerce → Settings → Accounts & Privacy untuk memeriksa pengaturan akun dan privasi. Nama atau susunan opsi dapat berbeda menurut versi WooCommerce.
Beberapa hal yang perlu diperhatikan meliputi:
- Mengizinkan pelanggan membuat akun ketika checkout jika diperlukan.
- Mengizinkan pembuatan akun melalui halaman My Account.
- Mengatur proses pembuatan akun dan pemulihan kata sandi.
- Menentukan kebijakan penyimpanan data pelanggan.
- Memastikan halaman akun dapat diakses dengan aman.
Pendaftaran akun tidak harus diwajibkan untuk setiap pembelian. Toko dapat mempertimbangkan checkout sebagai tamu jika ingin memberikan proses pembelian yang lebih sederhana, sambil tetap menyediakan akun bagi pelanggan yang membutuhkannya.
Fitur yang tersedia pada My Account
Secara umum, area My Account dapat menyediakan sejumlah menu berikut, bergantung pada jenis produk dan pengaturan toko.
| Menu | Fungsi |
|---|---|
| Dashboard | Menampilkan ringkasan area akun |
| Orders | Melihat daftar dan status pesanan |
| Downloads | Mengakses produk digital yang dapat diunduh |
| Addresses | Mengelola alamat penagihan dan pengiriman |
| Account Details | Mengubah nama, email, dan kata sandi |
| Payment Methods | Mengelola metode pembayaran tersimpan jika didukung |
| Logout | Keluar dari akun pelanggan |
WooCommerce mengelola menu tersebut melalui endpoint akun. Sebagian menu hanya muncul ketika fitur terkait tersedia atau relevan bagi pelanggan.
4. Cara Menetapkan Halaman Cart, Checkout, dan My Account
Membuat halaman saja belum cukup. WooCommerce perlu mengetahui halaman mana yang digunakan untuk setiap fungsi toko.
Untuk menetapkannya, ikuti langkah berikut:
- Masuk ke dashboard WordPress.
- Buka WooCommerce → Settings → Advanced.
- Cari bagian Page setup.
- Pilih halaman yang sesuai pada kolom Cart page, Checkout page, dan My account page.
- Pilih halaman Syarat dan Ketentuan jika sudah tersedia.
- Klik Save changes untuk menyimpan pengaturan.
Pengaturan tersebut memastikan WooCommerce mengarahkan pelanggan ke halaman yang benar ketika melihat keranjang, menyelesaikan pesanan, atau mengelola akun.
Penting: halaman Cart, Checkout, dan My Account harus ditetapkan secara terpisah. Menggunakan halaman yang sama untuk beberapa fungsi inti dapat mengakibatkan pengalihan yang salah dan mengganggu integrasi pembayaran.
Jika halaman tidak tersedia, Anda dapat membuka WooCommerce → Status → Tools, kemudian mencari alat Create pages untuk membuat halaman WooCommerce bawaan yang belum ada. Periksa kembali konten dan penetapannya setelah proses selesai.
5. Tips Mengoptimalkan Tampilan Ketiga Halaman
Setelah pengaturan dasar selesai, lakukan penyesuaian tampilan agar halaman belanja terasa konsisten dan mudah digunakan.
-
Gunakan desain yang konsisten.
Sesuaikan warna, tipografi, dan tombol dengan identitas toko. -
Utamakan tampilan mobile.
Pastikan kolom formulir, tombol, dan ringkasan pesanan mudah digunakan di layar ponsel. -
Buat tombol tindakan jelas.
Gunakan label yang mudah dipahami seperti Lanjutkan ke Checkout atau Buat Pesanan. -
Tampilkan biaya secara transparan.
Pastikan subtotal, ongkir, diskon, dan total dapat diperiksa sebelum pesanan dibuat. -
Jaga agar halaman tetap ringan.
Hindari elemen dekoratif berlebihan yang memperlambat pemuatan. -
Jangan mengubah fungsi inti tanpa pengujian.
Periksa kompatibilitas tema dan ekstensi sebelum menambahkan kustomisasi checkout atau akun.
Jika menggunakan tema blok, sebagian tata letak dapat disesuaikan melalui Site Editor. Untuk tema klasik, pengaturan biasanya tersedia melalui opsi tema atau Customizer.
Kemampuan penyesuaian tetap bergantung pada tema dan komponen WooCommerce yang digunakan.
6. Cara Mengatasi Masalah pada Halaman Cart, Checkout, dan My Account
Beberapa kendala dapat muncul setelah pengaturan halaman, terutama jika halaman terhapus, plugin tidak kompatibel, atau konfigurasi toko berubah.
| Masalah | Kemungkinan penyebab | Langkah pemeriksaan |
|---|---|---|
| Keranjang tidak menampilkan produk | Konflik plugin, masalah sesi, atau konfigurasi halaman | Uji penambahan produk dan periksa konflik plugin |
| Checkout tidak dapat dibuka | Halaman belum ditetapkan atau ada konflik ekstensi | Periksa Page setup dan uji integrasi pembayaran |
| Metode pembayaran tidak muncul | Gateway belum aktif atau tidak kompatibel dengan checkout yang digunakan | Periksa pengaturan Payments dan kompatibilitas ekstensi |
| My Account hanya menampilkan halaman kosong | Shortcode tidak ada atau terjadi konflik tema/plugin | Pastikan shortcode benar dan uji dengan tema sementara yang kompatibel |
| Halaman menampilkan error 404 | Permalink atau endpoint bermasalah | Simpan ulang pengaturan permalink dan periksa endpoint |
| Halaman tidak tampil sesuai desain | Tema atau plugin mengubah tata letak | Nonaktifkan komponen terkait pada lingkungan pengujian untuk menemukan sumber masalah |
Lakukan perubahan secara bertahap dan buat backup sebelum menonaktifkan plugin atau mengganti tema.
Jika masalah terjadi pada website aktif, pengujian di staging lebih aman karena tidak mengganggu transaksi pelanggan.
7. Uji Sebelum Website Digunakan
Sebelum toko online digunakan oleh pelanggan, pastikan semua fungsi utama sudah diuji. Gunakan produk uji dan metode pembayaran yang aman untuk memastikan seluruh alur transaksi berjalan sebelum toko menerima pesanan sungguhan.
Kesimpulan
Mengatur halaman Cart, Checkout, dan My Account di WooCommerce merupakan langkah penting untuk memastikan proses belanja berjalan lancar.
Cart membantu pelanggan memeriksa produk, Checkout memfasilitasi penyelesaian pesanan, sedangkan My Account menyediakan akses ke riwayat transaksi dan informasi pelanggan.
Pastikan setiap halaman memiliki fungsi yang benar, ditetapkan melalui pengaturan WooCommerce, serta diuji bersama metode pembayaran dan pengiriman yang digunakan. Untuk mempelajari panduan lainnya seputar WordPress, WooCommerce, hosting, keamanan website, dan teknologi digital, kunjungi artikel informatif lainnya di Blog Hosteko.
