Cara mengubah detail keranjang di halaman checkout WooCommerce

Sebagian besar dari Anda akan tahu bahwa WooCommerce tidak mengizinkan pelanggan untuk memperbarui keranjang dari halaman checkout. Artinya, Anda tidak dapat mengubah jumlah atau menghapus produk dari halaman checkout. Pelanggan harus kembali ke halaman keranjang, memperbarui keranjang, dan kemudian kembali ke halaman pembayaran. Hal ini mengakibatkan pelanggan harus mengisi kembali semua informasi yang dibutuhkan. Ini sedikit membuat frustasi bagi pelanggan , terutama untuk pengguna tamu (yang merupakan mayoritas besar).

Dalam posting ini, kita akan membahas cara memperbarui keranjang di halaman checkout WooCommerce. Saya telah mengembangkan fitur ini dalam acara Jumat Seru kami di kantor. Pada Jumat Menyenangkan , kami mencoba menghabiskan sepanjang hari melakukan hal-hal yang tidak terkait dengan aktivitas kerja inti orang tersebut.

Pertama, mari kita lihat tabel detail keranjang di halaman WooCommerce Checkout:

Di sini, pelanggan tidak dapat mengedit jumlah produk atau menghapusnya. Jadi kami ingin menyediakan fungsionalitas untuk mengubah jumlah dan menghapus produk tanpa membuat pelanggan Anda meninggalkan halaman Checkout.

Mari kita mulai

Jika Anda ingin melewatkan penjelasan ini, dan sebaliknya ingin menerapkan fungsionalitas di toko Anda, maka Anda dapat mengunduh plugin yang telah saya buat.

1. Membuat perubahan UI pada bagian keranjang halaman checkout

Kita perlu mengubah kolom “Produk” di tabel “Pesanan Anda”. Kita perlu menambahkan ikon "Hapus" dan "Pemilih kuantitas" untuk setiap item di troli.

Untuk mencapai ini, WooCommerce telah memberikan filter yang memungkinkan Anda untuk mengubah baris nama Produk dari setiap item keranjang: woocommerce_cart_item_name .

Kuantitas yang dipilih yang ditampilkan pada tabel Pesanan Anda juga dapat dimodifikasi menggunakan filter WooCommerce lain: woocommerce_checkout_cart_item_quantity .

Kami akan menggunakan kedua filter dan mengizinkan pelanggan untuk mengedit detail keranjang di halaman checkout. Anda dapat menerapkan perubahan di bawah ini dengan membuat plugin baru.

Pertama, kami tidak memerlukan jumlah yang ditampilkan untuk setiap item pada tabel pesanan Anda. Jadi kita akan menggunakan filter dan mengembalikan string kosong sehingga akan menimpa data WooCommerce.

Setelah ini, kami akan memodifikasi baris nama Produk menggunakan filter woocommerce_cart_item_name & menambahkan bidang Kuantitas & ikon Hapus.

Di sini kita menggunakan fungsi is_checkout() untuk memastikan bahwa kita menerapkan perubahan pada halaman checkout saja. Saya telah membaginya menjadi 3 langkah seperti yang disebutkan dalam cuplikan kode di atas.

Langkah 1: Tambahkan ikon hapus
Di sini, di langkah ini, kami akan menambahkan ikon Hapus untuk setiap item di troli. Ini adalah ikon yang sama yang digunakan di keranjang WooCommerce.

Di sini, kami telah menggunakan fungsi WooCommerce get_remove_url() . Kita harus melewati $cart_key untuk setiap item keranjang. Jadi fungsi get_remove_url() akan mengembalikan URL unik untuk menghapus setiap item keranjang.

Langkah 2: Tambahkan nama produk
Saat kami memodifikasi baris nama produk, kami juga perlu menambahkan nama produk di baris bersama dengan bidang baru. Kami akan mendapatkan nama produk dari filter itu sendiri, yang diteruskan sebagai argumen pertama. Ini adalah $product_title dalam kasus kami.

Tingkatkan Penjualan Toko WooCommerce

"Sangat menarik untuk melihat seberapa banyak WooCommerce Abandoned Cart Pro telah meningkatkan penjualan untuk produk bernilai tinggi. Saya mengharapkan plugin untuk meningkatkan penjualan untuk produk bernilai rendah sehingga pelanggan tidak keberatan apakah mereka membeli atau tidak (misalnya makanan), tapi saya lebih terkejut melihat perbedaan yang dapat dibuat untuk produk yang membutuhkan keputusan pembelian yang begitu besar." - Katie Keith, Direktur Operasi di Barn2 Media

Langkah 3: Tambahkan pemilih kuantitas
Terakhir, kita akan menambahkan pemilih kuantitas. Di sini kita akan menggunakan fungsi WooCommerce woocommerce_quantity_input() .

Kita perlu memberikan empat parameter untuk fungsi "input_name", "input_value", "max_value", "min_value".

• input_name: Ini akan berisi array dengan nama 'cart', dalam hal ini Anda harus memasukkan kunci item keranjang & jumlahnya.
• input_value: Ini akan berisi jumlah produk yang dipilih.
• max_value: Ini akan menjadi jumlah stok produk maksimal.
• min_value: Ini akan menjadi nilai minimum pemilih kuantitas.

Setelah semua langkah di atas selesai, sekarang akan menampilkan tombol hapus dan pemilih kuantitas pada tabel Pesanan Anda di halaman Checkout.

Di sini, kita memiliki satu kondisi if ( is_checkout() ) { condition. Hal ini diperlukan untuk alasan yang disebutkan di bawah ini.

Filter yang kami gunakan untuk mengubah nilai kolom nama produk (woocommerce_cart_item_name) juga dipanggil di halaman Keranjang toko Anda. Jadi untuk memastikan bahwa kode yang kami tulis tidak merusak fungsionalitas halaman Keranjang, kami memastikan bahwa perubahan hanya diterapkan pada halaman checkout.

2. Memperbarui Keranjang melalui panggilan Ajax

Menambahkan sebanyak ini tidak akan berhasil, kami perlu memastikan ketika pelanggan mengubah kuantitas, itu akan tercermin pada total keranjang.

Mengubah Kuantitas

Kami membutuhkan panggilan Ajax untuk mengubah total keranjang. Jadi ketika pelanggan mengubah kuantitas, kita perlu mengambil tindakan dan mengubah total keranjang.

Sekarang, kami akan mengantrekan file “add_quantity.js” di footer situs web dan kami akan memastikan bahwa itu disertakan ketika kami berada di halaman checkout.

Sekarang kita perlu menambahkan fungsi dalam file Javascript, yang akan memanggil ajax untuk mengubah total keranjang.

Javascript di atas akan memanggil ajax di mana kami akan meneruskan data formulir checkout yang dimodifikasi. Tapi itu akan memanggil ketika kita mengklik ikon kuantitas. Jadi itu akan berisi nilai kuantitas yang dimodifikasi.

Sekarang, kita perlu menambahkan fungsi untuk ajax, yang akan mengubah total keranjang sesuai dengan jumlah yang dimodifikasi.

Ketika kita mengubah jumlah pada halaman checkout, fungsi di atas akan dipanggil dan itu akan mengubah total keranjang. Kami telah menggunakan fungsi WooCommerce di fungsi kami.

Kami telah menggunakan fungsi “set_quantity()”, “calculate_totals()”, “woocommerce_cart_totals()” untuk memodifikasi total keranjang dan menampilkannya di tabel Pesanan Anda di halaman checkout.

set_quantity() : Fungsi ini akan mengatur jumlah yang dimodifikasi ke keranjang.

Kami telah mengirimkan data dari fungsi javascript yang akan memiliki nilai kuantitas yang dimodifikasi, jadi kami akan menggunakan nilai yang dimodifikasi itu dan mengaturnya ke troli.

calc_totals() : Dengan menggunakan fungsi ini, kami menginstruksikan untuk menghitung lagi total keranjang.

woocommerce_cart_totals() : Fungsi ini digunakan untuk menampilkan keranjang yang dimodifikasi.

Setelah semua perhitungan di atas selesai, itu akan kembali ke javascript dari mana kita memanggil fungsi ajax. Sebagai tanggapan dari fungsi tersebut, kami akan 'memicu' fungsi 'update_checkout' yang pada gilirannya akan memodifikasi keranjang dan menampilkannya kepada pengguna.

Kami membutuhkan CSS untuk tombol "Hapus" pada tabel pesanan Anda. Jadi seharusnya terlihat seperti tombol hapus keranjang WooCommerce. Jadi kita perlu menambahkan CSS untuk itu. Anda dapat menambahkan CSS di footer situs web Anda.

Setelah ditambahkan, kita perlu memberikan CSS ke tombol hapus di file CSS. CSS telah ditunjukkan di bawah ini.

Jadi, kami siap dengan fungsionalitas di mana kami dapat mengubah kuantitas di halaman checkout WooCommerce.

Setelah menerapkan hal di atas, beginilah tampilan tabel Pesanan Anda di halaman checkout:

Ini akan menambahkan pemilih kuantitas dan ikon hapus untuk setiap item dari tabel pesanan Anda di halaman checkout.

Saya telah membangun ini sebagai plugin, bernama Change Quantity on Checkout for WooCommerce yang dirilis pada September 2016. Ini digunakan di 400+ toko WooCommerce. Jika Anda sudah menggunakan plugin ini di toko WooCommerce Anda, saya akan sangat menghargai jika Anda dapat meluangkan waktu untuk meninjau plugin.

Jika Anda memiliki umpan balik, Anda dapat memberi tahu saya di komentar di bawah atau Anda dapat memposting di forum dukungan plugin.