Cara Mengatur Keranjang Belanja WordPress Dengan WooCommerce
Diterbitkan: 2022-10-28Jadi, Anda hampir selesai membuat situs web belanja WooCommerce baru Anda. Anda telah selesai membangun tata letak produk pasar utama, menu pemilihan kategori produk, dan footer header dengan isyarat navigasi fungsional.
Aspek terpenting dari situs web e-niaga mana pun adalah kemampuan untuk mengarahkan dan membantu pelanggan menambahkan produk ke keranjang mereka dari mana saja di situs web, hingga proses checkout hingga konfirmasi pesanan.
Ini mungkin terdengar seperti fungsi yang sulit untuk diintegrasikan ke dalam situs web eCommerce WordPress, tetapi pada kenyataannya tidak. WordPress memiliki komunitas besar yang mendukung pengembangannya, dan Anda dapat menambahkan fungsi ini ke situs web Anda dengan menggunakan plugin keranjang belanja WooCommerce yang bekerja dengan mulus dengan tema WordPress WooCommerce apa pun .
Daftar isi
Bagaimana Cara Kerja Keranjang WooCommerce?
Saat produk ditambahkan ke keranjang di WooCommerce, produk tersebut ditambahkan ke daftar terpisah dengan varian dan jumlah yang dipilih oleh pelanggan. Ini membantu pengguna melacak produk yang mereka pilih, dan fungsi ini juga membuat mereka secara otomatis melihat total harga yang dihitung dari pesanan yang akan mereka lanjutkan saat checkout. Dan itu juga memberi pengguna kemampuan untuk mengedit halaman keranjang belanja WooCommerce.
Manfaat Keranjang Belanja di WooCommerce
Ada beberapa manfaat besar menggunakan keranjang belanja di platform belanja WooCommerce. Sebelum kita turun ke panduan langkah demi langkah tentang cara membuat halaman keranjang belanja WooCommerce, beberapa di antaranya adalah:
- Dirancang untuk membantu pelanggan dalam memilih satu atau lebih produk untuk dibeli dan terus menelusuri produk lainnya.
- Ini membantu menghitung nilai total produk saat Anda terus menambahkannya ke troli.
- Menampilkan kuantitas dan variasi produk yang telah Anda pilih dan menghitung nilai total yang sesuai.
- Itu dapat mengarahkan pelanggan ke halaman checkout dengan mengklik tombol.
- Itu bisa datang dengan fitur keranjang belanja WooCommerce tambahan seperti riwayat pesanan, menyimpan keranjang untuk nanti, dll.
- Pengguna bisa mendapatkan plugin keranjang WooCommerce yang hadir dengan elemen desain yang menakjubkan.
Bagaimana cara menambahkan keranjang belanja ke WooCommerce
Sekarang, mari kita melalui proses menambahkan keranjang belanja ke WooCommerce. Di akhir artikel ini, Anda akan dapat mulai menjual berbagai macam produk dengan platform E-commerce fungsional yang menampilkan plugin keranjang belanja terbaik untuk WordPress.
Langkah 1: Instalasi Pra-Persyaratan
Untuk memulai pembuatan keranjang dan proses pengaturan keranjang WooCommerce, Anda harus menginstal dan mengaktifkan item plugin tertentu di akun WordPress Anda. Untuk ini, Anda harus memiliki versi terbaru WordPress , WooCommerce , pembuat halaman Elementor , dan plugin ShopReady WooCommerce Shop Builder.
Untuk menginstal plugin, masuk ke akun WordPress Anda, buka Dashboard WordPress > Plugins > Add New dan cari plugin satu per satu, lalu klik Dan sekarang klik Aktifkan ketika proses instalasi selesai. Ikuti prosedur yang sama untuk menginstal semua plugin dan program yang diperlukan.
Langkah 2: Menggunakan Tema Keranjang Belanja WooCommerce
Sekarang untuk melanjutkan proses pembuatan fungsi keranjang, Anda harus menginstal tema WooCommerce yang berfungsi untuk beberapa fungsi tambahan. Dalam hal ini, kita dapat menggunakan template keranjang belanja WooCommerce daripada menggunakan tema WordPress WooCommerce .
Ini akan sangat mengurangi waktu yang dibutuhkan untuk kustomisasi dan publikasi situs web.
Untuk menginstal template eCommerce yang berfungsi di situs web Anda, mulailah dengan membuat halaman baru dan beri judul dari Dasbor WordPress > Halaman > Tambah Baru dan klik Anda akan diarahkan ke layar Elementor Editor . Di sini Anda akan menemukan ikon perpustakaan template ShopReady – Elementor . Klik pada ikon untuk mendapatkan akses ke perpustakaan template. Pilih dan pilih template yang sesuai dengan identitas merek Anda dan klik Sisipkan untuk menerapkan template.
Tunggu sampai template selesai proses import nya.
Harus terlihat seperti ini.
Bagian produk Anda mungkin terlihat kosong jika Anda belum menambahkan produk ke WooCommerce. Anda harus segera menambahkan produk yang ingin Anda tampilkan di platform WooCommerce Anda. Untuk melakukannya, Anda dapat mengikuti panduan kami sebelumnya tentang – Cara Menambahkan Produk ke Toko WooCommerce .
Setiap produk WooCommerce dapat disesuaikan dengan judul produk, deskripsi, harga, harga diskon, gambar, metadata, variasi, dll. dari dasbor produk WooCommerce.
Langkah 3: Kustomisasi Halaman Produk
Untuk memulai proses personalisasi halaman produk Anda, buka dasbor ShopReady – WooCommerce Builder dan pilih opsi Templates. Dari sana, Anda dapat membuat halaman produk dasar untuk digunakan sebagai titik awal untuk penyesuaian Anda. Nyalakan kategori Template Produk, lalu cari pengaturan Produk Tunggal dalam kategori tersebut. Sekarang, pilih ikon edit dari bilah alat.
Dan setelah itu, layar yang menampilkan Editor Elementor akan dimuat untuk Anda. Cukup mengklik tanda plus yang dapat dilihat di sudut kanan atas antarmuka Elementor akan membantu Anda memulai proses penyesuaian halaman. Ketika datang ke tampilan halaman Anda dan widget yang ingin Anda gunakan, Anda memiliki berbagai pilihan yang tersedia untuk Anda ketika datang ke bagian Elementor yang dapat Anda masukkan ke dalamnya.
Langkah 3: Menggunakan Widget Elementor untuk Menyesuaikan Halaman Produk Toko WooCommerce
Menambahkan Judul Produk
Karena Anda telah membuat struktur bagian utama menggunakan Elementor untuk halaman produk WooCommerce Anda, Anda sekarang dapat memulai proses penambahan judul produk. Anda harus menggunakan pendekatan seret dan lepas untuk memposisikan widget Judul Produk di tempat yang Anda inginkan pada halaman produk untuk mencapai tujuan ini.
Tampilkan judul produk yang tepat dengan masuk ke bilah navigasi Elementor, pilih tab Konten , lalu cari pilihan Editor Refresh di submenu yang muncul setelah melakukannya. Untuk memilih produk yang sesuai, klik namanya di menu tarik-turun yang terletak di bawah Produk Demo.
Anda harus masuk ke Dasbor Produk WooCommerce dan menambahkan atau memodifikasi informasi produk penting di sana agar data ini menampilkan judul produk yang tepat. Ini dapat dilakukan dengan mengklik tombol "Tambah" atau "Edit".
Menambahkan Gambar Unggulan ke Halaman Produk
Setelah itu, Anda ingin memastikan bahwa produk Anda memiliki galeri gambar dan gambar unggulan. Untuk mencapai ini, Anda dapat menggunakan salah satu dari berbagai widget gambar yang disertakan dalam plugin all-in-one untuk eCommerce yang dikemas dengan Elementor.
Demi demonstrasi ini, kami akan memanfaatkan Thumbnail ShopReady dengan widget Zoom, yang seperti namanya, memiliki fitur zoom. Jika Anda menggunakan widget ini, Anda akan dapat menampilkan versi zoom hover produk WooCommerce dari gambar produk Anda kepada pelanggan Anda setiap kali mereka mengarahkan mouse ke gambar produk Anda.
Dengan cara yang sama seperti sebelumnya, Anda dapat memilih gambar produk yang sesuai dengan mengklik tab Konten pada opsi Produk Demo.
Menambahkan Blok untuk Widget Harga
Blok harga produk adalah komponen penting lainnya yang harus ada di halaman produk eCommerce Anda. Untuk melakukannya, Anda perlu mengubah atribut produk WooCommerce dengan penyesuaian yang sesuai dan menggunakan widget Harga ShopReady, yang harus ditempatkan di bawah judul produk.
Untuk memastikan bahwa harga yang benar ditampilkan, pilih judul produk dari menu tarik-turun di opsi Produk Demo tab Konten.
Menambahkan Deskripsi Produk
Dengan menggunakan widget Deskripsi Produk add-on produk WooCommerce ini, Anda tidak hanya memiliki opsi untuk menambahkan deskripsi produk, tetapi Anda juga memiliki kekuatan untuk menyesuaikan deskripsi secara tinggi. Melalui penggunaan tab gaya, Anda akan memiliki kemampuan untuk mengubah bagaimana deskripsi produk akan ditampilkan kepada masyarakat umum.
Menambahkan Fungsionalitas Tambahkan ke Keranjang
Kemampuan pelanggan untuk menambahkan item tambahan ke troli mereka sebelum pindah ke halaman checkout difasilitasi oleh opsi “Tambahkan ke Keranjang”, yang merupakan fitur lain yang sangat penting untuk dimiliki.
Memanfaatkan widget Add to Cart ShopReady akan memungkinkan Anda untuk melengkapi halaman toko eCommerce Anda dengan versi fungsi Add to Cart yang canggih. Dengan bantuan widget ini, Anda akan dapat memberi pelanggan Anda kemampuan untuk menyesuaikan jumlah produk yang mereka miliki di keranjang mereka langsung dari blok Tambahkan ke Keranjang.
Anda juga dapat mengubah tampilan tombol add-to-cart Elementor melalui tab Elementor Style styling produk WooCommerce. Di sini, Anda dapat mengubah font, warna, latar belakang, margin, padding, dan atribut lainnya.
Menambahkan Metadata ke Halaman Produk
Menerapkan filter produk WooCommerce yang memanfaatkan metadata dan atribut produk yang telah Anda tambahkan ke WooCommerce sambil menambahkan produk adalah sesuatu yang harus Anda lakukan jika Anda ingin memberikan pengalaman berbelanja yang lebih memuaskan kepada konsumen Anda.
Cari widget ShopReady Meta dan letakkan tepat di bawah tombol “tambahkan ke troli” pada halaman yang dikhususkan untuk produk Anda. Ini akan memungkinkan Anda untuk menampilkan informasi yang dimaksud.
Saat Anda memilih judul produk yang sesuai dari menu tarik-turun yang terletak di opsi Produk Demo tab Konten, tag produk dan metadata Anda harus ditampilkan secara akurat.
Menambahkan Tombol Bagikan Media Sosial ke Halaman Produk
Dengan memanfaatkan blok tombol berbagi media sosial langsung, Anda dapat memungkinkan konsumen Anda untuk membagikan posting produk Anda di media sosial langsung dari halaman produk WooCommerce untuk item yang telah mereka beli. Yang dapat Anda hasilkan hanya dengan memanfaatkan fungsionalitas drag-and-drop yang ditawarkan oleh widget Elementor Social Share.
Langsung dari tab Konten, blok dapat dipersonalisasi dengan ikon media sosial, teks, dan tautan yang dapat dibagikan yang dipilih pengguna. Selain itu, tab Elementor Style memungkinkan pengguna untuk mengubah tampilan visual dari blok berbagi sosial jika mereka menginginkannya.
Dan dengan itu, Anda selesai dengan dasar-dasar menyesuaikan halaman produk WooCommerce.
Langkah 4: Menambahkan Produk Terkait WooCommerce
Memanfaatkan widget Produk Terkait yang disertakan dalam add-on produk WooCommerce akan memungkinkan Anda untuk menampilkan produk terkait di halaman produk Anda, yang merupakan strategi luar biasa untuk meningkatkan penjualan online. Dengan menggunakan widget Produk Terkait ShopReady, Anda dapat dengan mudah membuat blok penggeser produk cantik yang dibagi menjadi beberapa bagian.
Untuk menggunakan widget, cukup seret-n-lepaskan di bawah satu blok produk, lalu pilih produk tertentu yang ingin Anda tampilkan di halaman produk tunggal Anda dari tab Konten .
Langkah 5: Menambahkan Bidang Checkout Kustom WooCommerce
Seperti disebutkan sebelumnya, ini adalah aspek penting dari platform E-Commerce yang berfungsi. Dengan pembuat toko WooCommerce seperti ShopReady, Anda dapat dengan mudah menggunakan kode pendek keranjang WooCommerce dan menerapkan keranjang eCommerce fungsional seperti itu, atau Anda dapat menggunakan widget ShopReady untuk menerapkan fitur ini.
Untuk memiliki keranjang yang berfungsi, pertama-tama Anda harus menambahkan widget “ Tambahkan ke Keranjang” di halaman produk. Yang sudah kami lakukan. Jadi, mari kita kembali dan membuat halaman troli itu sendiri, di mana semua produk akan ditampilkan setelah ditambahkan ke troli.
ShopReady – WooCommerce Shop Builder memungkinkan pengguna untuk memilih di antara dua templat keranjang yang berbeda, yang tersedia untuk digunakan dari Dasbor ShopReady . Dari Dasbor ShopReady, klik menu Template sekarang aktifkan dan edit template Keranjang Preset WooCommerce yang disediakan oleh ShopReady.
Dengan membuat template keranjang WooCommerce baru atau mengedit yang sudah ada, Anda akan diarahkan ke layar Editor Elemen.
Dari sini, Anda cukup menambahkan widget ShopReady Cart , dan halaman keranjang Anda akan terbentuk secara otomatis, dan membuat keranjang belanja WordPress tanpa plugin adalah proses yang sederhana dengan ShopReady. Itu tidak memerlukan plugin atau alat tambahan.
Jika Anda memiliki produk yang sudah ditambahkan ke keranjang Anda, seharusnya terlihat seperti ini.
Dan begitulah, halaman keranjang WooCommerce fungsional dengan tombol keranjang fungsional. Anda juga memiliki opsi untuk menyesuaikan halaman keranjang lebih lanjut dengan Elementor. Dengan Elementor, Anda bebas mengubah setiap aspek halaman keranjang, dari warna latar belakang hingga pengaturan tipografi Elementor.
Anda juga dapat menggunakan kode pendek keranjang belanja WooCommerce. Dalam hal ini, Anda harus menggunakan widget Elementor ShortCode.
Setelah selesai menyesuaikan halaman toko Anda, pastikan untuk menekan Publikasikan / Perbarui untuk membuat perubahan langsung kepada pengunjung dan pelanggan Anda.
Kesimpulan
Seluruh proses membuat tombol add to cart kustom WooCommerce mungkin tampak seperti tugas yang menakutkan, tetapi saat Anda maju melalui panduan ini, Anda akan melihat bahwa proses pembuatan fungsi teknis ini sama sekali tidak sulit dengan seperangkat alat yang tepat. ShopReady WooCommerce Shop Builder adalah paket lengkap yang menawarkan semua alat yang Anda butuhkan untuk membuat platform eCommerce yang kuat dari awal.
Dan jika Anda mengalami masalah dengan ShopReady atau proses pembuatan keranjang, Anda selalu dapat mencari dokumentasi keranjang WooCommerce .
Pertanyaan yang Sering Diajukan Mengenai Keranjang Belanja WooCommerce
Apakah WordPress memiliki keranjang belanja?
WordPress CMS adalah platform hosting situs web barebone. Itu tidak termasuk keranjang belanja atau fitur terkait eCommerce. Tetapi karena ini adalah platform sumber terbuka, Anda bebas menggunakan alat, plugin, atau modul eCommerce yang dibuat komunitas untuk menambahkan keranjang ke situs web WordPress.
Apakah WooCommerce memiliki keranjang belanja?
Ya, plugin dasar WooCommerce hadir dengan tombol keranjang fungsional dan halaman keranjang. Tapi sifatnya sangat minimalis. Untuk membumbui halaman keranjang, Anda dapat menggunakan sejumlah ekstensi WooCommerce , atau Anda dapat memanfaatkan sepenuhnya opsi kustomisasi pembuat halaman WooCommerce Elementor dan ShopReady untuk halaman keranjang eCommerce. Dari ikon keranjang WooCommerce hingga tata letak halaman yang mendalam, semuanya dapat disesuaikan dengan ShopReady.
Bagaimana cara membuat halaman checkout khusus di WooCommerce?
Unduh dan instal ShopReady – Pembuat Toko WooCommerce. Sekarang buat template Halaman Checkout WooCommerce baru dari Dasbor ShopReady. Anda akan diarahkan ke Editor Elemen, dari sini Anda dapat menggunakan widget ShopReady Checkout untuk membuat halaman checkout kustom fungsional di WooCommerce.