Cara Mendesain Keranjang WooCommerce Di Elementor [Tanpa Coding]

Diterbitkan: 2022-01-11

Apakah pelanggan Anda meninggalkan keranjang WooCommerce mereka , di tengah pembelian mereka? Tahukah Anda bahwa alasan yang sangat umum di balik ini adalah halaman keranjang yang tidak terorganisir yang membuat pengguna bingung untuk berbelanja? Tapi tidak perlu khawatir lagi; dengan pembaruan terbaru dari Essential Addons for Elementor , kami memberikan solusi termudah untuk mengurangi tingkat pengabaian keranjang dan meningkatkan penjualan.

WooCommerce cart

Di blog ini, kami akan memandu Anda melalui alasan mengapa mendesain khusus halaman keranjang WooCommerce di situs web toko Anda adalah pendekatan terbaik untuk dilakukan. Tapi tidak hanya itu, kami juga akan memperkenalkan Anda pada elemen Essential Addons terbaru kami yang dibuat hanya untuk membantu Anda membuat troli yang dirancang secara profesional yang pasti akan menghasilkan penjualan. Jadi, tanpa penundaan lebih lanjut, mari selami dan cari tahu lebih lanjut.

Mengapa Anda Harus Mendesain Halaman Keranjang WooCommerce Kustom?

Penelitian menunjukkan bahwa hampir 7 dari 10 pelanggan akan meninggalkan keranjang belanja Anda dan tidak akan pernah kembali lagi, meskipun mereka puas dengan produk yang Anda jual. Dan seperti yang telah kami sebutkan di awal, alasan utamanya adalah halaman keranjang yang membingungkan atau berantakan yang gagal dinavigasi oleh pelanggan.

Terkadang calon pelanggan Anda mungkin tidak dapat kembali ke halaman belanja dan menambahkan produk lain yang mereka butuhkan. Sementara di lain waktu, itu bisa menjadi masalah dengan melampirkan kode kupon penjualan yang ingin mereka gunakan. Pembeli bahkan mungkin menjadi frustrasi ketika mereka tidak dapat menambahkan lebih banyak jumlah produk yang sama setelah mereka berada di halaman keranjang WooCommerce .

WooCommerce cart

Dan dapat dimengerti, menyediakan produk dan layanan yang sangat baik bisa sangat mengecewakan, dan tetap saja, perhatikan tingkat pengabaian keranjang yang tinggi – terutama jika itu karena masalah desain halaman yang sederhana. Tapi kekhawatiran Anda sekarang akan segera berakhir, dengan rilis terbaru dari tim Essential Addons for Elementor kami . Baca lebih lanjut untuk mengetahui bagaimana Anda dapat dengan mudah meningkatkan penjualan dengan halaman keranjang e Commerce yang dirancang luar biasa dan tampak profesional di Elementor .

Rancang Keranjang WooCommerce Profesional Dengan Addons Esensial 5.0

Tahun 2021 merupakan tahun yang luar biasa bagi tim Essential Addons for Elementor kami. Kami telah mencapai tonggak terbesar dan tumbuh lebih cepat dari yang pernah kami impikan. Dan itu semua berkatmu. Jadi, untuk mengakhiri tahun dengan nada tinggi yang sama dan memberi Anda pengalaman membangun web terbaik, kami menghadirkan pembaruan terbaru kami Essential Addons 5.0.

Rilis terbaru hadir dengan banyak peningkatan, elemen baru, dan ekstensi untuk membantu melepaskan keterampilan mendesain web Anda di Elemen dengan sangat mudah. Dan kami dengan senang hati memberi tahu Anda bahwa pembaruan ini juga dilengkapi dengan widget eksklusif – EA Woo Cart .

Elemen baru yang luar biasa ini memungkinkan Anda dengan mudah membuat halaman keranjang desainer WooCommerce di toko Anda menggunakan Elementor, hanya dalam beberapa klik dan TANPA CODING sama sekali . Jadi, apakah Anda baru mengenal industri eCommerce, atau pemilik toko berpengalaman, Anda dapat dengan mudah menggunakan widget Essential Addons ini untuk mengubah calon pembeli jendela menjadi pelanggan yang membayar.

Dan sorotan terbesarnya adalah bahwa itu sepenuhnya dapat disesuaikan di Elementor dan dilengkapi dengan banyak tata letak desain yang berbeda untuk Anda pilih, dan sama persis dengan estetika toko WooCommerce Anda. Baca terus untuk mengetahui lebih lanjut.

Siapkan Keranjang EA Woo Halus Di Elementor Tanpa Pengodean

Tak perlu dikatakan, Anda harus memastikan bahwa Anda telah menginstal dan mengonfigurasi plugin WooCommerce untuk membangun toko Anda dengan sempurna. Tetapi ini penting dalam hal ini karena agar widget canggih ini berfungsi di dalam Elementor Editor, Anda perlu menambahkan beberapa produk ke troli dari toko WooCommerce Anda. Setelah selesai, kita siap untuk menggunakan widget EA Woo Cart dengan mudah di toko Anda. Ikuti langkah-langkah di bawah ini untuk mempelajari caranya:

Langkah 1: Tetapkan Halaman Keranjang WooCommerce yang Anda Inginkan

Pertama dan terpenting, navigasikan ke halaman WooCommerce → Pengaturan langsung dari dasbor WordPress Anda dan kemudian menuju ke tab 'Lanjutan' . Dari sini, Anda dapat menetapkan halaman yang diinginkan sebagai halaman keranjang baru.

Cukup klik pada opsi 'Halaman keranjang' dan pilih halaman mana saja dari menu tarik-turun sebagai halaman keranjang WooCommerce Anda, seperti yang dapat Anda lihat dari gambar di bawah. Anda akan siap untuk pergi.

WooCommerce cart

Langkah 2: Edit Keranjang WooCommerce Di Elementor

Langkah selanjutnya yang harus dilakukan adalah mengedit halaman Keranjang WooCommerce Anda menggunakan Editor Elemen hanya dalam beberapa klik. Tetapi sebelum Anda dapat melakukannya, Anda harus mengaktifkan elemen EA Woo Cart dengan Essential Addons for Elementor.

Pastikan Anda telah menginstal versi terbaru dari Essential Addons 5.0 PRO , lalu buka tab 'Elements' dari antarmuka pengguna Essential Addons for Elementor. Anda akan menemukan lebih dari 80+ elemen yang tersedia di sini, tetapi yang perlu Anda lakukan hanyalah mengaktifkan opsi ' EA Woo Cart ' dan tekan ' Simpan Pengaturan ' untuk memulai.

WooCommerce cart

Langkah 3: Edit Keranjang WooCommerce Di Elementor

Sekarang Anda siap untuk mendesain halaman keranjang yang menakjubkan di Elementor. Jadi, cukup buka halaman keranjang WooCommerce Anda, dan tekan ' edit dengan Elementor '.

Setelah Anda berada di editor Elementor, temukan elemen ' EA Woo Cart ' dari opsi 'Search' di bawah tab 'Elements' . Kemudian, cukup drag dan drop elemen 'EA Woo Cart' ke bagian mana pun yang Anda inginkan di Editor Elemen, seperti yang ditunjukkan di bawah ini. Ini sangat mudah.

WooCommerce cart

Konfigurasikan Setiap Aspek EA Woo Cart dengan Mudah

Keranjang WooCommerce Anda sekarang telah diatur tetapi perlu ditata dan disesuaikan agar terlihat profesional dan mudah dipahami oleh pelanggan Anda. Dan bagian ini akan fokus pada bagaimana Anda dapat melakukannya dengan mudah.

Langkah 1: Konfigurasi Pengaturan Umum EA Woo Cart

Pada panel samping Editor Elemen, Anda akan menemukan beberapa opsi seperti 'Pengaturan Umum' , 'Pembuat Tabel' , atau 'Komponen Keranjang' di bawah tab 'Pengaturan Konten'.

Dari 'Pengaturan Umum' , Anda akan menemukan 2 gaya tata letak yang berbeda untuk EA Woo Cart Anda untuk dipilih dan disesuaikan dengan keinginan Anda, seperti yang ditunjukkan di bawah ini.

WooCommerce cart

Langkah 2: Ubah Label Dari Pembuat Tabel

Selanjutnya, dari ' Table Builder ', Anda dapat mengubah label tabel dan menyeret bagian untuk mengatur ulang tabel harga EA Woo Cart Anda. Ini memberi Anda fleksibilitas penuh untuk mengubah setiap label dari semua kolom yang telah Anda tambahkan ke halaman keranjang – 'produk', 'harga', 'kuantitas', dll.

WooCommerce cart

Langkah 3: Sesuaikan Fitur Komponen Keranjang

Dan kemudian, kita beralih ke bagian ' Komponen Keranjang ', di mana Anda cukup mengaktifkan ' Tombol Pembaruan Keranjang ' untuk memungkinkan pelanggan Anda menambahkan lebih banyak produk ke keranjang mereka.

Tetapi tidak hanya itu, Anda juga dapat mengaktifkan ' formulir Kupon ' agar pelanggan dapat dengan mudah menambahkan kupon apa pun yang mereka inginkan pada saat checkout di halaman keranjang WooCommerce. Selain itu, Anda juga dapat mengaktifkan opsi ' Lanjutkan belanja ' untuk membantu pelanggan kembali ke halaman toko untuk berbelanja lebih banyak. Selain itu, Anda bahkan dapat mengubah teks 'Tombol Checkout' dari bagian ini dan membuat ajakan bertindak Anda lebih interaktif.

WooCommerce cart

Semua tombol dan opsi ini akan membantu pelanggan Anda memahami halaman keranjang WooCommerce secara menyeluruh dan juga menavigasi halaman ini dengan mudah. Jadi, dengan widget Keranjang EA Woo, Anda dapat langsung mengurangi pengabaian keranjang dan rasio pentalan sekaligus.

Sesuaikan Sepenuhnya Gaya Keranjang EA Woo Dalam Beberapa Klik

Dan akhirnya, setelah Anda mengonfigurasi konten untuk halaman EA Woo Cart Anda, saatnya untuk menatanya agar sesuai dengan situs web WooCommerce atau estetika merek Anda. Dan untuk melakukannya, Anda cukup mengeklik tab 'Gaya' di editor Elementor untuk menyesuaikan berbagai area halaman Anda.

Langkah 1: Sesuaikan Gaya Pengaturan Umum

Dari bagian 'Umum' , Anda dapat mengubah warna latar belakang seluruh bagian EA Woo Cart. Anda akan dapat menyesuaikan warna latar belakang EA Woo Cart secara manual atau memilih warna global.

WooCommerce cart

Langkah 2: Masuk Ke Detail Dengan Bagian Tabel

Dari bagian 'Tabel', Anda dapat mengubah padding, margin, tipografi, jenis batas, dan sebagainya dari seluruh bagian keranjang. Ini pada akhirnya akan membuat halaman EA Woo Cart Anda menonjol dari toko WooCommerce lainnya dan terlihat sepenuhnya disesuaikan.

Langkah 3: Ubah Aspek Desain Lainnya

Tapi itu tidak semua. Dengan cara yang sama, Anda dapat mengubah tampilan ' Cart Total ' , ' Coupon Form ' , ' Continue Shopping ' , ' Button ' , dan 'Notice' . Anda bahkan dapat mengubah teks di dalamnya juga.

WooCommerce cart

Untuk menambahkan lebih banyak fungsionalitas dan membuat halaman EA Woo Cart Anda terlihat lebih interaktif dan menarik, Anda juga dapat menjelajahi opsi pengaturan 'Lanjutan' .

WooCommerce cart

Halaman Keranjang WooCommerce Desainer yang Terlihat Profesional

Dan itu saja. Dengan langkah-langkah kecil ini dan penyesuaian yang mudah, Anda dapat dengan mudah membuat halaman Keranjang WooCommerce yang menakjubkan untuk situs web Anda sesuai keinginan Anda. Itu pun, tanpa menggunakan satu baris kode pun.

Lihat hasil akhir di bawah ini dan lihat bagaimana halaman keranjang desainer Anda yang terlihat profesional di WooCommerce dengan bantuan widget Essential Addons EA Woo Cart premium.

WooCommerce cart

Widget Eksklusif Lainnya Untuk Toko WooCommerce Anda

Dan dengan itu, kami ingin menyimpulkan panduan utama kami tentang cara mendesain keranjang WooCommerce di Elementor tanpa pengkodean dan kemudahan lengkap. Namun sebelum kami pergi, kami ingin memberi tahu Anda tentang semua widget WooCommerce lain yang dapat Anda akses dari Addons Esensial untuk Elementor.

Plugin luar biasa ini memberi Anda widget untuk meningkatkan setiap aspek toko WooCommerce Anda hanya dalam beberapa klik. Ada 7 elemen lagi yang bisa Anda lihat:

WooCommerce cart

Galeri Produk Woo

Penggeser Produk Woo

Caraousel Produk Woo

Kisi Produk Woo

Perbandingan Produk Woo

Koleksi Produk Woo

Woo Checkout

Lihat dari situs Essential Addons dan langsung tingkatkan penjualan toko WooCommerce Anda dengan mudah.

Perbarui Ke Addons Penting 5.0 & Tingkatkan Penjualan WooCommerce

Jadi tunggu apa lagi? Jangan menunggu! Perbarui ke Essential Addons 5.0 sekarang dan bergabunglah dengan kami dalam membuat toko WooCommerce yang unik dan berkonversi tinggi. Atau, lihat salah satu paket PRO kami , mulai dari harga eksklusif hanya $39,97 , dan lalu lintas, penjualan, dan konversi yang meroket dengan menggunakan semua fitur premium kami!

Jika Anda memiliki saran, beri tahu kami di komentar di bawah atau hubungi tim dukungan kami; kami akan senang mengetahui tanggapan Anda. Untuk pembaruan, tutorial, dan tip dan trik lebih lanjut, berlangganan blog kami atau bergabunglah dengan Komunitas Facebook kami yang ramah .