Cara Membuat Mini Cart WooCommerce: 3 Metode

Apakah Anda mencari cara mudah untuk mengatur kereta mini WooCommerce yp ? Jika pengalaman checkout Anda lamban dan berulang, hal itu dapat memengaruhi pengalaman berbelanja pelanggan Anda. Meningkatkan aliran proses checkout Anda merupakan bagian integral dari meningkatkan konversi prospek Anda dan kereta mini dapat menjadi solusi yang bagus untuk itu.

Jadi untuk membantu Anda menambahkan satu ke situs web Anda, berikut adalah panduan tentang cara membuat keranjang mini WooCommerce. Tapi pertama-tama, mari kita lihat apa sebenarnya kereta mini itu dan mengapa Anda perlu menggunakannya.

Apa itu kereta mini WooCommerce?

Keranjang Mini WooCommerce Anda hanyalah bentuk kecil dari halaman keranjang WordPress Anda yang sebenarnya. Ini berisi produk yang ditambahkan ke keranjang Anda bersama dengan beberapa detail lainnya. Isi dari mini cart tergantung pada tema WordPress aktif Anda, tetapi umumnya meliputi:

• Daftar produk Anda
• Subtotal
• Thumbnail produk
• kuantitas produk

Terlepas dari detail yang ditampilkan keranjang mini WooCommerce Anda, ini adalah bagian penting dari pengalaman pengguna pelanggan Anda saat menjelajahi toko WooCommerce Anda. Ini adalah alat yang dapat diakses yang dapat digunakan pelanggan Anda untuk pindah ke halaman checkout langsung dari bagian mana pun dari situs web Anda dan membantu melacak item keranjang.

Bahkan kami menggunakan kereta mini di QuadLayers. Jika Anda menambahkan produk ke troli, Anda dapat melihat troli mini dengan mengarahkan kursor ke ikon troli di menu header.

Jika Anda melihat tangkapan layar di bawah, kami telah menambahkan produk WooCommerce Checkout Manager ke keranjang. Ini juga ditampilkan di mini cart beserta kuantitas dan subtotalnya.

Mengapa membuat Mini Cart untuk situs web WooCommerce Anda?

Secara default, tema WooCommerce Anda mungkin datang dengan keranjang mini WooCommerce-nya sendiri. Dan bahkan jika ya, posisi dan gayanya sendiri mungkin tidak sepenuhnya dapat disesuaikan dari pengaturan tema Anda. Selain itu, mungkin juga tidak berada di tempat yang tepat untuk kereta mini Anda.

Beberapa pembaca kami mungkin mempertimbangkan untuk menambahkan kereta mini mengambang sedangkan yang lain mungkin menambahkannya ke sidebar atau footer. Ada berbagai kemungkinan pendekatan kereta mini yang mungkin ingin Anda pertimbangkan untuk digunakan. Selain itu, Anda mungkin juga perlu menambahkan lebih banyak konten ke troli mini Anda seperti harga pengiriman, detail troli tambahan, pesan khusus, dan banyak lagi.

Kemudahan kenyamanan saat menggunakan kereta Anda juga dapat menjadi penting bagi Anda dan pelanggan Anda untuk meningkatkan penjualan Anda yang sebenarnya . Pembayaran yang disesuaikan dan siap untuk penjualan yang sangat sesuai dengan estetika situs web Anda dapat menjadi pengubah permainan untuk situs web WooCommerce Anda. Jadi, jika Anda ingin membuat dan menambahkan kereta mini khusus Anda ke halaman berbeda di situs web Anda, maka tidak perlu mencari lagi!

Cara membuat Keranjang Mini WooCommerce di WordPress

Untuk membuat dan menambahkan keranjang Mini WooCommerce Anda , Anda dapat menggunakan 3 metode berbeda :

1. Menambahkan Widget Keranjang
2. Menggunakan Plugin WordPress
3. Secara terprogram

Mari kita lihat setiap metode dan langkah-langkah yang terlibat di dalamnya, dimulai dengan metode default menggunakan Widget WordPress.

1. Buat Keranjang Mini WooCommerce menggunakan Widget WordPress

Secara default, Anda dapat membuat kereta mini WooCommerce menggunakan widget keranjang WooCommerce. Karena kita menggunakan widget, widget hanya dapat diposisikan di area widget tema yang tersedia. Area yang paling umum meliputi:

• Bilah sisi widget
• Di bawah Header
• catatan kaki

Mungkin ada lebih banyak area widget tergantung pada tema Anda. Tetapi pastikan Anda menggunakan salah satu tema yang kompatibel dengan WooCommerce juga.

1.1. Pilih Area Widget

Untuk menambahkan widget keranjang, Anda harus memilih area widget terlebih dahulu. Jadi buka WP Admin Dashboard Anda dan buka Appearance > Widgets . Kemudian, Anda memilih area widget untuk keranjang mini Anda.

Untuk demo kami, kami akan menggunakan Sidebar . Tetapi Anda dapat menggunakan area widget yang paling nyaman bagi Anda.

1.2. Tambahkan Widget Keranjang ke Area Widget

Setelah Anda memilih area widget untuk keranjang mini Anda, klik tombol + untuk menambahkan widget. Gunakan bilah pencarian untuk mencari Keranjang dan klik untuk menambahkan widget .

Jika Anda tidak dapat melihat widget, pastikan Anda telah menyiapkan WooCommerce dengan benar di situs web Anda.

Di sini, Anda juga dapat mengaktifkan atau menonaktifkan opsi Sembunyikan jika keranjang kosong . Kami menyarankan Anda mengaktifkannya karena sidebar cart Anda akan disembunyikan jika keranjang pelanggan Anda kosong. Ini juga akan membuat situs web Anda terlihat lebih fungsional.

Setelah Anda selesai menambahkan widget keranjang, Perbarui widget Anda untuk menyimpan perubahan Anda. Sekarang, gerobak mini sidebar Anda akan muncul di ujung depan Anda.

Tentu saja, Anda juga dapat menambahkan kereta mini Anda ke area widget yang berbeda. Cukup pilih lokasi di bawah halaman widget dan Anda dapat dengan mudah menambahkan widget di bawah header atau footer.

Meskipun ini adalah cara termudah untuk membuat keranjang mini WooCommerce Anda, ia hadir dengan sejumlah batasan yang wajar . Pertama, tidak ada penyesuaian untuk kereta mini Anda. Anda sangat terbatas dalam hal bagaimana tampilan kereta mini Anda dan bagaimana itu diakses oleh pelanggan Anda.

Posisi kereta mini terbatas pada area widget yang disediakan oleh tema Anda. Selain itu, fitur seperti pop-up mini cart atau custom field ke cart juga tidak tersedia untuk pelanggan atau pemilik website. Jadi, jika Anda menginginkan kereta mini yang lebih dapat disesuaikan, kami sarankan Anda terus membaca dan mempertimbangkan metode berikut.

2. Buat Keranjang Mini WooCommerce menggunakan Plugin WordPress

Menggunakan plugin WordPress adalah salah satu cara termudah untuk mengatur pengalaman keranjang belanja Anda. Anda dapat memastikan bahwa pelanggan Anda dapat dengan mudah memeriksa kapan saja dengan mudah dengan bantuan plugin. Mereka juga memungkinkan Anda untuk menyederhanakan pengalaman checkout situs web Anda.

Plugin mini cart menyediakan fitur bagus untuk mempromosikan penjualan produk Anda dan meningkatkan perolehan prospek Anda. Sebagai contoh:

• Anda dapat mengaktifkan ikon troli melayang dan pop-up untuk troli mini. Jadi pelanggan Anda dapat mengaksesnya kapan saja sambil menjaga konten toko lainnya tetap bersih dan bebas gangguan.
• Banyak elemen keranjang dan produk dapat ditambahkan ke kereta mini itu sendiri. Misalnya, informasi produk tambahan, mengubah jumlah, mengedit tampilan total dan subtotal keranjang, dan banyak lagi.
• Dengan plugin, Anda dapat menambahkan beberapa fitur cerdas seperti menambahkan kupon langsung dari mini cart, produk unggulan khusus, dan saran produk yang direkomendasikan.

Jadi, kami sangat menyarankan menggunakan plugin WordPress yang didedikasikan untuk menambahkan dan menyesuaikan mini cart WooCommerce Anda.

Untuk demo kami, kami akan menggunakan plugin Woocommerce Cart All in One . Ini adalah salah satu plugin terbaik untuk membuat kereta mini di situs web Anda. Plugin ini juga sangat mudah digunakan dan memiliki semua fitur yang Anda butuhkan seperti popup mini cart, sidebar cart, atau opsi kustomisasi menu cart.

Kami juga memiliki daftar plugin mini cart WooCommerce terbaik. Jika Anda ingin menggunakan plugin lain, Anda juga dapat melihatnya.

2.1. Instal dan Aktifkan Plugin

Mari kita mulai dengan menginstal dan mengaktifkan plugin.

Buka Dasbor Admin WP Anda dan kemudian pergi ke Plugins > Add New di sidebar Anda.

Kemudian, gunakan bilah pencarian di kanan atas untuk mencari Cart All In One For WooCommerce .

Setelah Anda menemukan plugin, klik Instal Sekarang untuk menginstal plugin. Terakhir, Aktifkan plugin setelah diinstal.

Jika Anda ingin menggunakan plugin premium, Anda harus mengunggah dan menginstalnya secara manual. Lihat panduan terperinci kami untuk menginstal plugin WordPress secara manual untuk informasi lebih lanjut.

Sekarang, kita perlu mengonfigurasi plugin untuk mengaktifkan mini cart WooCommerce Anda.

2.2. Konfigurasikan Keranjang Semua dalam Satu Untuk Plugin WooCommerce

Untuk mengonfigurasi keranjang mini WooCommerce plugin, klik tab Keranjang Semua dalam Satu di Dasbor Admin WP Anda. Ini akan membuka halaman Dasbor plugin.

Dalam versi gratis plugin, Anda dapat mengaktifkan keranjang Mini Sidebar atau keranjang mini Menu . Anda juga dapat menambahkan dan mengonfigurasi tombol AJAX Tambahkan ke Keranjang, tetapi mari kita fokus hanya pada opsi kereta mini untuk saat ini.

Untuk mengaktifkan popup mini cart di situs web Anda, buka Sidebar Cart dan klik Enable . Anda juga dapat menggunakan opsi Pengaktifan Seluler untuk mengaktifkan/menonaktifkan popup kereta mini di perangkat seluler. Terakhir, Simpan perubahan Anda.

Sekarang, buka dan muat ulang bagian depan situs web Anda. Anda akan melihat ikon kereta mini baru di halaman web Anda. Anda cukup mengkliknya untuk membuka keranjang mini Anda.

Selain itu, Anda juga dapat menambahkan keranjang menu ke salah satu menu Anda. Buka saja tab Menu Cart dan Enable seperti langkah-langkah sebelumnya. Anda juga dapat mengaktifkannya di menu seluler jika diperlukan.

Selanjutnya, Anda perlu menambahkan menu WordPress tempat Anda ingin menampilkan keranjang menu di situs web Anda. Cukup pilih menu yang ingin Anda tambahkan ke keranjang mini WooCommerce Anda di bidang Menu . Kemudian klik Simpan .

Anda sekarang akan melihat keranjang mini menu Anda di situs web Anda. Ini akan ditambahkan ke menu yang Anda pilih untuk kereta mini.

2.3. Sesuaikan Keranjang Mini WooCommerce Anda menggunakan plugin

Kustomisasi adalah fitur utama dengan plugin Cart All in One . Anda dapat dengan bebas menyesuaikan keranjang sidebar Anda serta keranjang menu. Ini termasuk warna, gaya mini cart, posisi, animasi khusus, ikon mini cart, gaya menu sidebar, dan banyak lagi.

Untuk mengakses opsi penyesuaian, buka Penampilan > Sesuaikan di Dasbor Admin WP Anda. Anda akan diarahkan ke penyesuai tema Anda. Di sini, klik Keranjang Semua dalam Satu Untuk WooCommerce dan Anda akan melihat semua opsi penyesuaian keranjang mini.

Untuk demo ini, kami akan menyesuaikan Sidebar Cart. Jadi klik Sidecart Cart dan Anda akan melihat semua opsi untuk itu. Untuk saat ini, kami akan mengaktifkan troli mini yang lebih kecil menggunakan opsi konten Display Sidebar dan mengubah posisi troli Sidebar.

Tetapi Anda dapat menyesuaikan lebih lanjut kereta mini Anda menggunakan opsi ini tergantung pada seberapa sesuai dengan situs web Anda. Masih banyak yang harus diedit seperti interaksi dengan ikon troli itu sendiri sehingga troli mini muncul ketika Anda mengarahkan ikon, menyesuaikan ikon memuat, dan banyak lagi.

Setelah Anda selesai dengan perubahan Anda, klik Terbitkan simpan. Anda akan dapat melihat semua penyesuaian keranjang mini ini di situs web Anda.

Dan itulah inti dasar menyesuaikan kereta mini Anda menggunakan plugin. Jika Anda ingin mempelajari lebih lanjut tentang semua opsi penyesuaian yang disediakan oleh plugin, kami sangat menyarankan untuk membaca dokumentasinya .

3) Buat Keranjang Mini WooCommerce Secara Terprogram

Katakanlah Anda lebih suka tidak menggunakan plugin untuk menambahkan keranjang WooComerce Mini Anda untuk mempertahankan kerangka ringan situs web Anda. Kemudian, Anda juga dapat memilih untuk membuatnya secara terprogram.

Ini akan mengharuskan Anda untuk membuat kode pendek khusus menggunakan fungsi khusus dan menempelkannya ke file functions.php tema Anda. Kemudian, Anda dapat menggunakan kode pendek di bagian mana pun dari situs web Anda atau bahkan menambahkannya ke salah satu file template WordPress atau WooCommerce Anda untuk langsung menambahkan keranjang mini WooCommerce.

Karena kami akan mengubah beberapa file inti, sebaiknya Anda membuat cadangan situs web Anda dan juga membuat tema anak secara terprogram atau dengan menggunakan salah satu plugin tema anak. Ini memastikan bahwa Anda tidak akan kehilangan kode khusus saat memperbarui tema WordPress.

3.1. Tambahkan Kode Pendek Kustom ke Fungsi Tema Anda

Kami akan menambahkan kode khusus dalam file tema situs web Anda dari editor file tema. Jika Anda tidak sepenuhnya nyaman menambahkan kode ke WooCommmerce, kami sarankan untuk membaca artikel ini terlebih dahulu.

Setelah Anda siap, buka editor Tema Anda dari Appearance > Theme File Editor di WP Admin Dashboard Anda. Gunakan sidebar file tema di sebelah kanan dan klik functions.php . Ini akan membuka file functions.php pada editor Tema Anda.

Sekarang, rekatkan kode berikut di editor tema Anda:

 fungsi custom_mini_cart() {
echo '<a href="#" class="dropdown-back" data-toggle="dropdown"> ';
echo '<i class="fa fa-shopping-cart" aria-hidden="true"></i>';
echo '<div class="basket-item-count">';
echo '<span class="cart-items-count count">';
echo WC()->cart->get_cart_contents_count();
gema '</span>';
echo '</div>';
gema '</a>';
echo '<ul class="dropdown-menu dropdown-menu-mini-cart">';
echo '<li> <div class="widget_shopping_cart_content">';
woocommerce_mini_cart();
echo '</div></li></ul>';

}
add_shortcode( 'quadlayers-mini-cart', 'custom_mini_cart' ); 

Setelah Anda menambahkan kode, klik Perbarui File . Ini akan membuat kode pendek khusus berjudul '[quadlayers-mini-cart]' untuk situs web Anda. Sekarang, Anda dapat menggunakan kode pendek ini di pos, halaman, atau widget mana pun untuk menambahkan Keranjang Mini WooCommerce khusus Anda.

3.2. Gunakan Kode Pendek di Template WooCommerce

Anda juga dapat menggunakan cuplikan kode berikut untuk menambahkan keranjang mini kustom Anda ke file template tema atau template WooCommerce apa pun.

 <?php echo do_shortcode('[quadlayers-mini-cart]'); ?>

Misalnya, mari tambahkan kode ini ke file template arsip produk WooCommerce Anda. Untuk membuka file template WooCommerce Anda, buka Plugins > Plugin File Editor dari dashboard WordPress Anda.

Kemudian, gunakan opsi Select Plugin to Edit di kanan atas dan pilih WooCommerce dan klik Select. Menggunakan menu File Plugin, klik pada templates > archive-product.php.

Selanjutnya, tambahkan baris kode berikut ke bagian template yang sesuai.

 echo do_shortcode('[keranjang empat lapis-mini]');

Untuk demo kami, kami akan menambahkan baris kode di bawah do_action( 'woocommerce_before_main_content' ) ; garis. Tetapi Anda dapat menambahkan cuplikan pada file template mana pun dan di mana pun diperlukan.

Terakhir, perbarui file setelah Anda menambahkan kode di editor plugin. Kereta mini akan muncul di halaman WooCommerce yang Anda tentukan. Dalam kasus kami, ini adalah halaman Toko/Arsip Produk.

Pendekatan ini akan menambahkan kereta mini Anda ke template. Namun, kereta mini mungkin tidak terlihat persis seperti yang Anda inginkan dan mungkin memerlukan gaya tambahan menggunakan lembar gaya file tema Anda. Jadi, metode ini disarankan hanya jika Anda terbiasa coding dan memiliki sedikit pengetahuan untuk menambahkan PHP dan CSS ke WordPress.

Bonus: Cara melewati halaman keranjang di WooCommerce

Jika Anda ingin pelanggan Anda memiliki proses checkout yang lebih cepat, Anda juga dapat memilih untuk melewati halaman keranjang sepenuhnya. Karena kereta mini sudah disediakan untuk pelanggan Anda, tidak perlu banyak halaman keranjang. Jadi, Anda dapat mengarahkan pelanggan langsung ke halaman checkout saat mereka ingin melakukan pembelian.

Anda dapat melakukannya dengan menggunakan plugin khusus atau dengan menggunakan fungsi khusus. Untuk saat ini, kami akan membahas bagaimana Anda dapat melewati halaman keranjang secara terprogram.

Tetapi sebelum Anda melanjutkan, Anda harus pergi ke WooCommerce > Pengaturan dari dasbor WP Anda dan buka tab Produk . Di bawah opsi Umum , nonaktifkan kedua opsi Tambahkan ke Keranjang Perilaku . Ini memastikan bahwa tidak ada gangguan dengan fungsi kustom kami.

Sekarang, buka file functions.php Tema Anak Anda sekali lagi menggunakan langkah yang sama seperti di atas. Cukup buka editor tema dari Appearance > Theme File Editor dan klik pada file functions.php .

Kemudian, rekatkan cuplikan kode berikut di sini.

 add_filter('add_to_cart_redirect', 'ql_skip_cart_page');
fungsi ql_skip_cart_page() {
$woocommerce global;
$redirect_checkout = $woocommerce->cart->get_checkout_url();
kembali $redirect_checkout;
} 

Sekarang, setiap kali pelanggan Anda menambahkan produk ke keranjang Anda, mereka akan langsung dibawa ke halaman checkout, bukan halaman keranjang mereka.

Untuk menyederhanakan proses ini, Anda juga dapat menggunakan plugin seperti Direct Checkout untuk WooCommerce. Jika Anda ingin mempelajarinya dan mengapa Anda harus mempertimbangkan untuk menggunakannya, Anda dapat melihat panduan khusus kami di sini.

Kesimpulan

Dan itu mengakhiri panduan kami tentang cara membuat keranjang mini WooCommerce. Menyiapkan dan menyesuaikan Keranjang Mini WooCommerce bukanlah proses yang membosankan dan Anda dapat memilih untuk menggunakan metode yang berbeda untuk melakukannya. Mari kita rangkum metode yang telah kita gunakan dalam panduan hari ini untuk menambahkan dan menyesuaikan Keranjang Mini WooCommerce kita:

• Menggunakan widget keranjang
• Dengan plugin WordPress khusus
• Secara terprogram menggunakan kode pendek dan file template khusus

Jika Anda tidak yakin proses mana yang harus digunakan, kami sangat menyarankan untuk menggunakan plugin untuk membuat keranjang mini WooCommerce Anda. Tidak hanya metode ini lebih aman dan mudah, tetapi Anda juga mendapatkan banyak pilihan kustomisasi dan personalisasi khusus untuk kereta mini Anda. Jika Anda seorang pemula WordPress dan ingin menambahkan keranjang mini WooCommerce dengan batasan minimal, kami sangat menyarankan Anda menggunakan plugin khusus.

Selanjutnya, jika Anda mencari cara tambahan untuk mempersingkat proses pembayaran dan meningkatkan penjualan Anda, mengapa Anda tidak membaca beberapa artikel kami yang lain:

• Plugin Terbaik untuk Menyesuaikan Halaman Keranjang WooCommerce
• Cara membuat pembayaran satu halaman WooCommerce
• Cara membuat tautan checkout langsung WooCommerce

Jadi bisakah Anda menambahkan kereta mini ke situs web Anda sekarang? Atau apakah Anda sudah menambahkannya? Kami akan senang mengetahuinya di komentar.