Cara Mengedit Halaman Keranjang WooCommerce dengan Elementor

WooCommerce adalah plugin WordPress open-source yang sangat baik untuk membuat toko online fungsional dalam waktu singkat. Ini secara otomatis menambahkan banyak halaman eCommerce penting termasuk halaman keranjang belanja saat Anda menginstal plugin.

Tetapi Anda tidak dapat mengharapkan konversi yang lebih tinggi dari halaman keranjang default ini. Karena tidak terlihat profesional, kurang optimalisasi SEO, dan tidak dapat memastikan pengalaman pengguna yang lebih baik. Oleh karena itu, adalah suatu keharusan untuk menyesuaikan halaman keranjang default.

Artikel ini akan memberi tahu Anda cara mengedit halaman keranjang WooCommerce di Elementor tanpa pengetahuan coding atau teknis apa pun. Juga, Anda akan belajar cara menambahkan kereta mini ke situs web Anda menggunakan solusi yang sama.

Bagaimana Halaman Keranjang WooCommerce yang Disesuaikan Akan Menguntungkan Bisnis Anda

Halaman keranjang WooCommerce memainkan peran penting dalam perjalanan pembelian online pelanggan. Ini memungkinkan pembeli untuk melihat daftar pesanan mereka, mengubah jumlah pesanan, menambahkan produk ke daftar keinginan, menerapkan kode promo, dan akhirnya checkout.

Saat ini, lebih dari 4+ juta situs web secara aktif menggunakan WooCommerce untuk menjalankan proyek eCommerce mereka. Bisakah Anda bayangkan betapa membosankannya pelanggan jika masing-masing menggunakan halaman default yang sama?

Selain itu, tata letak halaman keranjang sangat tergantung pada tema Anda. Jika Anda memilih tema yang juga digunakan oleh banyak situs web lain, sebagian besar dari Anda mungkin memiliki tampilan yang serupa hingga dioptimalkan. Apakah menurut Anda penampilan peniru ini cukup untuk meyakinkan pelanggan?

Selain itu, hanya dengan menggunakan plugin WooCommerce, Anda tidak dapat mengoptimalkan banyak modul dan fitur eCommerce yang menarik. Seperti cross-selling, kode promo, penawaran khusus, dan sebagainya. Ini juga merupakan alasan utama di balik tingkat pengabaian keranjang yang tinggi.

Menurut Sleeknote , merek eCommerce populer kehilangan sekitar $18 miliar pendapatan per tahun karena pengabaian keranjang. Oleh karena itu, hari ini, adalah suatu keharusan untuk mengedit halaman keranjang WooCommerce untuk membuat situs web lebih dapat dibedakan untuk memastikan pengalaman yang lebih baik bagi pelanggan.

Mengapa Pengkodean Bukan Ide Bagus untuk Membuat Halaman Keranjang WooCommerce Kustom

Biasanya, HTML dan CSS digunakan untuk mengedit halaman website. Tetapi ini hanya efektif bagi mereka yang memiliki keterampilan pengkodean profesional. Tetapi karena Anda menggunakan solusi sumber terbuka, kami dapat menganggap bahwa Anda bukan pembuat kode profesional.

Jika ini benar, ada beberapa alasan mengapa Anda harus menghindari pengkodean untuk mengedit halaman keranjang Anda. Sebagai contoh:

• Jika Anda tidak cukup terampil, pengkodean yang tidak tepat dapat menyebabkan lebih banyak kerusakan pada situs web Anda.
• Kecuali pengkodean Anda dioptimalkan dengan benar, situs web Anda mungkin macet atau melambat.
• Mempekerjakan profesional untuk mengkodekan halaman keranjang Anda mungkin merupakan proyek yang mahal.
• Anda perlu memperbarui pengkodean web setiap kali tema dan plugin Anda memperbarui sendiri.

Sekarang, Anda mungkin bertanya-tanya apakah ada solusi alternatif untuk ini? Ya, dengan menggunakan pembuat halaman seret-dan-lepas, siapa pun dapat membuat atau menyesuaikan halaman keranjang mereka segera terlepas dari pengetahuan pengkodean apa pun. Bahkan pengembang berpengalaman juga dapat menggunakan plugin pembuat situs web untuk memberikan layanan cepat kepada klien mereka.

Happy Addons yang diberdayakan oleh Elementor adalah pembuat halaman dinamis. Di bagian selanjutnya, kami akan menunjukkan cara mengedit halaman keranjang WooCommerce dan menambahkan keranjang mini menggunakan plugin ini. Baca terus.

Sumber Terkait: Shortcode WooCommerce Penting untuk Menyesuaikan Toko Online Anda di WordPress.

Cara Mengedit Halaman Keranjang WooCommerce dengan Elementor

Dengan 200.000+ instalasi aktif, Happy Addons adalah salah satu Elementor Addons terbaik. Ini memiliki 98+ widget yang kuat dan banyak fitur menarik yang dengannya Anda dapat membuat atau menyesuaikan halaman web apa pun.

Dengan menggunakan widget 'WooCommerce Cart' , Anda dapat memberikan tampilan kreatif ke halaman keranjang Anda. Di sini, kami akan menunjukkan cara melakukannya.

Prasyarat untuk Mengedit Halaman Keranjang WooCommerce

Anda harus memastikan persyaratan berikut untuk mengaktifkan widget Keranjang WooCommerce :

• WooCommerce
• elemen
• Selamat Addons gratis
• Selamat Addons Pro

Berikut adalah cara menginstal Happy Addons Pro dengan lisensi. Tepat setelah Anda menginstal dan mengaktifkan semua plugin, mulailah mengikuti langkah-langkah di bawah ini:

• Langkah 01: Buka Halaman Elementor Canvas
• Langkah 02: Seret dan Jatuhkan Keranjang WC dari Galeri Widget Elementor
• Langkah 03: Aktifkan Kupon dan Jual Silang
• Langkah 04: Perbarui Isi Tabel Anda Dari Bagian Gaya
• Langkah 05: Jadikan Tabel Anda Lebih Responsif dari Bagian Lanjutan

Langkah 01: Buka Halaman Elementor Canvas

Pertama, masuk ke Dasbor Admin situs web Anda. Kemudian, klik pada opsi Edit halaman keranjang Anda mengikuti gambar di bawah ini.

Anda akan mendapatkan halaman putih dengan tombol Edit With Elementor . Klik pada tombol.

Ini akan membawa Anda ke halaman kanvas Elementor baru. Di sisi kiri, Anda akan mendapatkan Elementor Widget Gallary . Anda akan menarik dan melepas widget ke sisi kanan di atas Area yang Dipilih .

Di sinilah Anda akan menambahkan widget WooCommerce Cart dan mendesain halaman keranjang Anda.

Langkah 02: Seret dan Jatuhkan Keranjang WC dari Galeri Widget Elementor

Ketik 'WooCommerce Cart' di bilah pencarian sisi kiri. Anda akan mendapatkan ikon Keranjang WC . Seret dan letakkan di atas area yang dipilih.

Catatan: Jangan merasa repot jika Anda tidak menemukan logo web, kategori produk, dan formulir pencarian di atas layar Anda. Kami telah menambahkan barang-barang ini ke foto di atas hanya untuk mempercantik kanvas.

Langkah 03: Aktifkan Kupon dan Jual Silang

Sekarang, dari Content > General , Anda dapat menyembunyikan atau menampilkan kolom Coupon Field dan opsi Cross-Sell di halaman keranjang Anda.

Langkah 04: Perbarui Isi Tabel Anda Dari Bagian Gaya

Buka bagian 'Gaya' . Di sini, Anda akan menemukan tujuh opsi lagi untuk mendesain keranjang Anda. Mereka:

• Meja Keranjang
• Kupon
• Perbarui Tombol Keranjang
• Total Keranjang: Pos
• Total Keranjang: Tabel
• Tombol Keluar
• Cross Sell

Perbarui Tabel Keranjang

Klik Tabel Keranjang . Anda akan mendapatkan banyak pilihan untuk mengedit isi tabel keranjang Anda. Yaitu Tabel, Kepala Meja, Gambar Keranjang, Input Kualitas, Hapus Produk, dan Perbarui Baris Mobil .

Dari opsi Kepala Tabel , ubah warna Teks dan Latar Belakang. Di sini, pada foto, kami telah mengatur warna putih untuk Teks dan Hitam untuk latar belakang.

Terapkan Kode Kupon

Dari opsi Kupon , Anda dapat mengedit Tinggi Input, Padding, Jenis Batas, Radius Batas, Bayangan Kotak, Warna Teks , dan Warna Latar Belakang .

Sedikit turun, Anda akan menemukan opsi untuk mengedit tombol Terapkan kupon . Di sini sekali lagi, kami telah menetapkan warna putih untuk Teks dan hitam untuk latar belakang.

Perbarui Tombol Keranjang

'Perbarui Tombol Keranjang' akan memungkinkan Anda menyesuaikan Tipografi , Lebar, Margin, Jenis Batas, Radius Batas, Padding, Warna Latar, Warna Teks, dan Bayangan Kotak .

Sekali lagi, kami telah mengatur warna putih untuk teks tombol Perbarui Keranjang dan hitam untuk latar belakang.

Total Keranjang: Pos

Sekarang, masuk ke opsi 'Total Keranjang: Pos' . Di sini, Anda dapat menyesuaikan Warna, Tipografi, dan Spasi kotak keranjang Anda.

Total Keranjang: Tabel

Dari sini, Anda dapat menyesuaikan Tabel, Teks Tabel, dan Judul Tabel . Anda juga dapat mengubah Warna Latar Belakang, Jenis Batas, Radius Batas, Bayangan Kotak, Tipografi, dan Warna . Kami telah mengatur warna abu pada latar belakang Total Cart.

Tombol Keluar

Dari 'Tombol Checkout' , Anda dapat menambahkan lebih banyak gaya dalam Tipografi, Lebar, Margin, Jenis Batas, Radius Batas, Padding, Warna Latar, Warna Teks, dan Bayangan Kotak .

Di sini, kami telah mengatur warna biru untuk latar belakang tombol Lanjutkan ke checkout.

Cross Sell

Terakhir, jika Anda telah mengintegrasikan opsi jual-silang, Anda dapat menyesuaikan Judul, Harga, Tombol , dan Lencana Penjualannya dari opsi ini.

Langkah 05: Jadikan Tabel Anda Lebih Responsif dari Bagian Lanjutan

Namun, Anda dapat menyesuaikan halaman keranjang lebih lanjut dari opsi lanjutan. Dari sana, Anda dapat menyesuaikan latar belakang halaman keranjang Anda, menambahkan efek bahagia, membuatnya lebih responsif bagi pengguna.

Sekarang, mari kita lihat pratinjau terakhir dari halaman keranjang WooCommerce Anda yang baru diedit.

Dengan demikian, Anda dapat menyelesaikan pembuatan halaman keranjang baru untuk situs eCommerce Anda.

Cara Menambahkan Keranjang Mini ke Situs Web WooCommerce dengan Elementor

Keranjang mini menyimpan ringkasan produk yang telah ditambahkan pelanggan ke keranjang belanja mereka. Biasanya ditampilkan sebagai ikon troli belanja di situs web eCommerce.

Setiap kali pengguna mengarahkan kursornya pada ikon, itu akan membuka pop-up yang berisi ringkasan singkat produk. Hal ini memungkinkan pelanggan untuk menambahkan lebih banyak atau menghapus item tanpa membuka halaman keranjang belanja.

Menggunakan widget Mini Cart , Anda dapat menambahkan keranjang belanja mini ke situs web Anda.

Prasyarat untuk Menambahkan Mini Cart ke Situs Web WooCommerce

• WooCommerce
• elemen
• Selamat Addon
• Selamat Addons Pro

Karena Anda baru saja mengedit halaman keranjang, kami harap situs web Anda sudah memenuhi persyaratan di atas. Jadi, mulailah mengikuti langkah-langkah di bawah ini segera-

• Langkah 01: Tambahkan Bagian Baru ke Kanvas Elementor Anda
• Langkah 02: Drag and Drop Mini Cart dari Elementor Widget Gallery
• Langkah 03: Perbarui Ikon dan Posisi Mini Cart dari Bagian Konten
• Langkah 04: Ubah Gaya Popup Anda
• Langkah 05: Perbarui Anda Mini Cart Body dari Bagian Style

Langkah 01: Tambahkan Bagian Baru ke Kanvas Elementor Anda

Klik ikon Tambahkan Bagian dari bagian atas Tabel Keranjang Anda. Ini akan menambahkan area baru ke kanvas Anda.

Langkah 02: Drag and Drop Mini Cart dari Elementor Widget Gallery

Ketik Mini Cart di bilah pencarian sisi kiri. Ini akan menunjukkan kepada Anda ikon Mini Cart. Seret dan lepas di area yang baru ditambahkan.

Langkah 03: Perbarui Ikon dan Posisi Mini Cart dari Bagian Konten

Dari Content > Mini Cart , Anda dapat mengubah logo, membuat alignment, dan mengubah posisi. Di sini, kami telah membuat perataan yang benar.

Langkah 04: Ubah Gaya Popup Anda

Di pasar populer, pop-up secara khusus terintegrasi dengan Mini Cart. Ketika seseorang mengambil kursornya atau mengklik ikon keranjang, sebuah pop-up secara otomatis muncul di layar Anda. Anda dapat menentukan pilihan antara Klik atau Arahkan kursor dari opsi 'Pertunjukan Popup Keranjang' . Di sini, kami telah memilih opsi Arahkan.

Sekarang, arahkan kursor pada ikon Mini Cart, Anda akan mendapatkan popup tepat di layar Anda.

Catatan: Terkadang, karena konflik dengan Elementor, pop-up Mini Cart Anda mungkin tidak muncul di backend Anda. Jangan khawatir tentang itu, cukup buka pratinjau dan periksa.

Langkah 05: Perbarui Anda Mini Cart Body dari Bagian Style

Di bagian Style , Anda akan mendapatkan enam opsi lagi untuk menyesuaikan Mini Cart Anda. Mereka

• Kereta Mini
• Munculan:- Tubuh
• Munculan:- Tajuk
• Munculan:- Item
• Munculan:- Subtotal
• Munculan: - Tombol

Dari Style > Mini Cart , Anda dapat menyesuaikan ukuran ikon, warna teks, warna latar belakang, batas, tipografi, dan lainnya. Sebagai contoh, di sini kita telah mengatur warna merah untuk ikon Mini Cart.

Dengan demikian, Anda dapat memeriksa opsi lain dan menyelesaikan kustomisasi Mini Cart Anda. Namun, Anda menghadapi masalah apa pun, Anda akan menemukan sebagian besar jawaban Anda dalam dokumentasi ini. Selain itu, Anda dapat memberi tahu kami masalah Anda dengan berkomentar.

Sekarang, Anda tahu semua langkah bagaimana menyesuaikan halaman keranjang WooCommerce dengan cara yang sederhana namun efektif.

Kiat Bonus: Cara Mengurangi Tingkat Pengabaian Keranjang WooCommerce

Ketika pelanggan menambahkan produk ke keranjang tetapi tidak menyelesaikan pesanan, itu disebut pengabaian keranjang. Hingga saat ini, rata-rata tingkat pengabaian keranjang di semua industri eCommerce adalah 65,23%.

Ini adalah sakit kepala besar bagi setiap pemilik situs eCommerce hari ini. Mengikuti beberapa pendekatan yang telah dicoba dan diuji, Anda dapat membawa perubahan besar dalam tingkat pengabaian keranjang Anda dengan margin yang adil. Mari kita bahas di bawah ini:

1. Tetap Tanpa Biaya Tersembunyi

Biaya tersembunyi adalah alasan nomor satu untuk tingkat pengabaian keranjang yang berlebihan. Baymard Institute mengungkapkan dalam penelitian, 55% pelanggan potensial meninggalkan halaman checkout yang belum selesai setelah mereka menemukan biaya tambahan di sana.

Jadi, jelaskan total biaya setiap produk Anda termasuk biaya belanja, biaya pengepakan, pajak, dan lain-lain di deskripsi produk.

2. Menyediakan Beberapa Opsi Pembayaran

Kecuali Anda mengintegrasikan beberapa metode pembayaran, itu dapat mempersingkat jumlah pelanggan potensial Anda. Saat ini, ada banyak sistem pembayaran di pasar. Dengan demikian, nasabah tidak lagi hanya terpaku pada sistem debit dan kartu kredit.

Jadi, Anda harus mengizinkan dompet digital, transfer bank, kartu prabayar, cash-on-delivery, dan opsi pembayaran lainnya jika memungkinkan.

3. Menawarkan Beberapa Pilihan Pengiriman

Pengiriman yang lambat menyebabkan 19% pengabaian keranjang di dunia eCommerce. Pelanggan selalu menginginkan pengiriman tercepat dengan biaya serendah mungkin. Tetapi ada banyak produk yang biaya pengirimannya sangat tinggi jika dikirim dengan cepat.

Oleh karena itu, Anda harus mengizinkan beberapa opsi pengiriman. Ini akan memungkinkan pelanggan untuk memilih opsi kurir terbaik yang sesuai dengan waktu dan keterjangkauan mereka.

Sumber Terkait: 10+ Cara Efektif untuk Mengurangi Pengabaian Keranjang Belanja & Menargetkan Ulang Pelanggan Anda yang Hilang.

4. Gunakan Tombol Hapus Ajakan Bertindak (CTA)

Tombol CTA yang jelas dapat menciptakan urgensi, komitmen yang kuat, dan memicu emosi pelanggan. Tetapi banyak situs web eCommerce gagal menimbang nilai ini. Beberapa tombol CTA yang paling populer adalah:

• Beli sekarang
• Selesaikan Pembelian Saya
• Ambil Hari Ini
• Dapatkan Diskon Saya
• Tukarkan Voucher Saya

Jadi, Anda harus belajar cara membuat tombol CTA Anda begitu kuat dan menggunakannya dalam situasi apa pun.

5. Ingatkan Pelanggan tentang Isi Keranjang Mereka

Ada banyak pelanggan yang suka menambahkan produk ke troli mereka tetapi lupa untuk memeriksanya nanti. Dalam hal ini, Anda dapat mengirim email tindak lanjut kepada pelanggan termasuk ringkasan singkat produk setelah interval reguler. Hal ini akan membuat mereka berpikir ulang tentang barang yang akan dibeli atau tidak.

6. Ciptakan Urgensi untuk Mengambil Produk Anda

Urgensi dapat mendorong pelanggan untuk menyelesaikan pesanan mereka sesegera mungkin. Tetapi untuk menciptakan situasi seperti itu, Anda harus menawarkan nilai ekstra kepada mereka. Seperti diskon, pengiriman gratis, pengiriman 2 hari, item gratis, dll. Beberapa salinan iklan dengan konversi tinggi untuk menciptakan urgensi adalah:

• Jangan lewatkan
• Penjualan izin stok
• Kesempatan terakhir
• Penjualan eksklusif satu hari!
• Stok terbatas

Pemasaran email juga merupakan cara yang bagus untuk menyebarkan urgensi di pasar. Pelajari cara menulis subjek dan deskripsi email yang menarik.

7. Pastikan Kebijakan Pengembalian dan Pengembalian Dana

Saat ini, pelanggan lebih teliti dalam memilih platform online untuk berbelanja. Setiap tahun 11% pengguna online meninggalkan situs web eCommerce yang tidak memiliki kebijakan pengembalian dan pengembalian uang yang jelas.

Karena tanpa mereka pelanggan tidak bisa terus berbelanja dengan percaya diri. Oleh karena itu, untuk menegakkan nilai merek bisnis Anda, Anda harus menyertakan kebijakan pengembalian dan pengembalian dana di situs web Anda.

8. Jaga agar Halaman Checkout Mudah dan Sederhana

Begitu pelanggan masuk ke halaman checkout, itu berarti mereka hampir siap untuk menyelesaikan pesanan. Jadi, apakah bijaksana untuk membingungkan mereka dengan terlalu banyak bidang bentuk dan kompleksitas? Menurut Semrush, 27% pengabaian keranjang disebabkan karena proses checkout yang rumit.

Jadi, Anda harus menjaga halaman checkout sangat sederhana. Hanya meminta informasi yang paling penting seperti

• Nama
• Alamat Pengiriman
• Alamat email
• Rincian Pembayaran

Selain itu, jangan pernah meminta informasi pribadi atau sensitif apa pun di sini.

Bersiaplah untuk Mengedit Halaman Keranjang WooCommerce

Saat ini, lebih dari 22+ juta situs web eCommerce aktif bekerja di web. Halaman keranjang WooCommerce menjembatani antara detail produk dan halaman checkout. Kesalahan atau kesulitan sekecil apa pun di halaman dapat menyebabkan pelanggan Anda pindah ke tempat lain.

Belum pernah semudah ini mengedit halaman keranjang WooCommerce. Tetapi hari ini, seseorang dapat melakukan ini tanpa pengetahuan pengkodean atau mempekerjakan seorang profesional. Rumus seret dan lepas telah membuat hal itu begitu mudah sehingga Anda bahkan dapat mencobanya sendiri.

Selain mengedit halaman keranjang WooCommerce, artikel ini juga membahas cara menambahkan Keranjang Mini ke situs web Anda. Jika Anda merasa artikel ini bermanfaat, berlangganan kami untuk konten yang lebih menarik.

Apakah Anda memiliki pertanyaan lebih lanjut mengenai halaman keranjang WooCommerce kustom? Bagikan pandangan Anda di bagian komentar di bawah!