Cara Mengatur Ajax Add To Cart Popup di WooCommerce (LarisTurbo)

Panduan lengkap Ajax Add To Cart Popup For WooCommerce: popup preview keranjang setelah add to cart tanpa reload, teks tombol, dan tautan utama ke cart atau checkout.

Ajax Add To Cart Popup For WooCommerce menampilkan popup preview keranjang lewat AJAX setiap kali pelanggan menambahkan produk. Tujuannya supaya pelanggan bisa meninjau isi keranjang (setidaknya item terakhir yang ditambahkan) sebelum lanjut ke Cart/Checkout—tanpa pindah halaman atau reload penuh.

Fitur ini menggantikan perilaku redirect standar WooCommerce setelah add to cart di halaman Shop, dan memastikan add to cart di katalog diproses via AJAX agar popup bisa muncul. Di halaman produk tunggal, form add to cart juga diproses via AJAX.

Tutorial ini membahas opsi di Settings, cara mengatur tombol utama, dan cara verifikasi di halaman Shop serta halaman produk.

Yang akan tampil di toko

Setelah produk berhasil ditambahkan ke keranjang:

Popup overlay dengan judul yang bisa dikustom
Thumbnail produk, nama, variasi (jika ada), kuantitas, dan harga baris terakhir yang ditambahkan
Tombol utama (ke Cart Page atau Checkout Page, sesuai pengaturan)
Tombol sekunder Continue Shopping untuk menutup popup

Popup muncul di halaman shop/katalog (tombol Add to Cart di loop produk) dan di halaman produk tunggal (setelah submit form add to cart).

Prasyarat

Plugin LarisTurbo For WooCommerce by TokoPressID terpasang dan lisensi aktif
WooCommerce aktif
Produk purchasable dan in stock untuk uji add to cart

Cara membuka pengaturan

Login ke WordPress Admin.
Buka LarisTurbo → For WooCommerce.
Di daftar fitur, cari Ajax Add To Cart Popup For WooCommerce, lalu klik Settings.

Opsi lain hanya muncul setelah Enable Ajax “Add To Cart” Popup dicentang.

Opsi yang tersedia

Label di plugin	Jenis	Fungsi
Enable Ajax “Add To Cart” Popup	Checkbox	Menyalakan popup setelah add to cart
Ajax “Add To Cart” Popup Title	Teks	Judul popup. Kosong = `Add To Cart`
Primary Button Link To	Radio	Tujuan tombol utama: Cart Page (default) atau Checkout Page
Cart Button Text	Teks	Label tombol jika primary ke cart. Kosong = `View Cart`
Checkout Button Text	Teks	Label tombol checkout. Kosong = `Checkout`
Continue Button Text	Teks	Label tombol lanjut belanja. Kosong = `Continue Shopping`

Jika Primary Button Link To = Cart Page: tombol utama membuka halaman keranjang dengan teks dari Cart Button Text
Jika Primary Button Link To = Checkout Page: tombol utama membuka checkout dengan teks dari Checkout Button Text
Tombol Continue Button Text selalu menutup popup tanpa navigasi
Pengecualian di halaman Cart: tombol utama otomatis mengarah ke checkout (tombol sekunder ke cart), agar alur di halaman keranjang tetap masuk akal

Langkah-langkah setup

1. Aktifkan fitur

Buka Settings fitur ini.
Centang Enable Ajax “Add To Cart” Popup.
Simpan.

2. Sesuaikan teks dan alur checkout

(Opsional) Ubah Ajax “Add To Cart” Popup Title, misalnya Produk Ditambahkan.
Pilih Primary Button Link To:
- Cart Page — cocok jika pelanggan sering belanja banyak item
- Checkout Page — cocok untuk toko dengan keranjang satu produk atau checkout cepat
Sesuaikan Cart Button Text, Checkout Button Text, dan Continue Button Text ke bahasa Indonesia jika perlu.
Simpan.

3. Uji dari halaman shop

Buka halaman shop di tab incognito.
Klik Add to cart pada produk sederhana (bukan variabel dulu).
Popup harus muncul tanpa reload halaman.
Klik tombol utama—pastikan mengarah ke cart atau checkout sesuai pengaturan.
Klik Continue Shopping—popup tertutup dan Anda tetap di halaman shop.

4. Uji dari halaman produk

Buka halaman produk tunggal.
Tambahkan ke keranjang (pilih variasi jika produk variabel).
Popup harus menampilkan produk/variasi yang baru ditambahkan.

Verifikasi cepat

Add to cart di shop tidak redirect ke halaman lain; popup yang muncul
Isi popup menampilkan produk terakhir yang ditambahkan, bukan seluruh isi keranjang panjang
Teks tombol sesuai field yang Anda isi (atau placeholder default jika dikosongkan)
Produk yang gagal validasi (stok habis, variasi belum dipilih) menampilkan pesan error WooCommerce, bukan popup sukses

Troubleshooting

Pastikan Enable Ajax “Add To Cart” Popup aktif.
Nonaktifkan sementara plugin cache/minify yang menahan script footer
Cek konflik dengan plugin add-to-cart custom lain

Biasanya terjadi jika add to cart gagal di backend; periksa pesan error WooCommerce
Pastikan produk publish dan bisa dibeli

Tombol utama salah tujuan

Periksa Primary Button Link To
Ingat pengecualian: di halaman Cart, tombol utama selalu ke checkout

Produk variabel dari shop tidak bisa ditambahkan

WooCommerce membutuhkan pemilihan variasi; dari loop shop, produk variabel sering mengarah ke halaman produk. Ini perilaku normal WooCommerce, bukan bug popup

Ringkasan

Alur setup: aktifkan Enable Ajax “Add To Cart” Popup → atur Primary Button Link To dan teks tombol → uji add to cart di shop dan halaman produk. Popup memberi pelanggan konfirmasi visual sebelum lanjut checkout.