Cara baiki checkout WooCommerce yang bocor jualan

Kebanyakan checkout WooCommerce hilang duit di tempat yang dashboard analytics tidak pernah tunjuk. Conversion rate nampak teruk, team salahkan trafik, padahal punca sebenar adalah borang 14 field di atas telefon 3G yang signal tinggal satu bar.

Optimisasi checkout WooCommerce bukan projek sekali jadi. Ia satu siri langkah teratur yang anda lakukan, ukur, dan ketatkan. Ini playbook yang kami guna untuk kedai yang volume jualannya betul-betul ada.

Kenapa default WooCommerce checkout bocor

Kotak ke kotak, WooCommerce hantar checkout yang minta terlalu banyak, validate terlalu lewat, dan susunan payment method memang tidak sesuai untuk pasaran tempatan. Field default termasuk nama depan, nama belakang, syarikat, negara, alamat baris 1, alamat baris 2, bandar, negeri, poskod, telefon, emel, dan order notes. Dua belas input sebelum sampai ke kad.

Tambah pula borang Stripe yang generik, ikon trust di footer yang tiada siapa scroll sampai ke sana, dan butang Place Order yang validate hanya selepas ditekan. Anda dapat corak yang Baymard sudah dokumenkan bertahun-tahun: langkah di mana borang panjang adalah langkah di mana cart mati. Industry benchmark untuk cart abandoned sekitar 70 peratus, dan field yang berlebihan konsisten dalam tiga punca utama.

Potong field alamat tanpa rasa bersalah

Mula dengan kurangkan field. Kebanyakan kedai tidak perlukan nama syarikat, alamat baris 2, negeri, atau order notes untuk majoriti order. Sembunyikan secara default, sediakan toggle kecil untuk yang betul-betul perlu.

Guna woocommerce_checkout_fields untuk buang field atau set required => false. Gandingkan dengan logik mengikut negara: pembeli Malaysia tidak perlu lihat field "county", pembeli UK mula dengan postcode lookup, pembeli Belanda nampak poskod dan nombor rumah. Loqate, Pos Malaysia API, dan Google Place Autocomplete semuanya boleh disambung ke alamat bil dalam beberapa ratus baris kod.

Default yang munasabah untuk kebanyakan kedai adalah enam field di atas blok payment: emel, nama, telefon, poskod, alamat, bandar. Negara auto-isi berdasarkan IP. Selebihnya sembunyi di belakang progressive disclosure.

Satu page atau multi-step

Pertikaian ini lebih tua dari WooCommerce sendiri, dan jawapannya bergantung pada produk anda, bukan citarasa.

Satu page menang bila average order ada 1 hingga 3 line item, pembeli tidak login, dan harga di bawah beberapa ratus ringgit. Pembeli mahu nampak total, kos penghantaran, dan butang Place Order tanpa scroll melalui accordion.

Multi-step menang bila cart kompleks (configurator, pilihan hadiah, kuantiti B2B), bila ada seksyen panjang yang memang wajib, atau bila anda mahu tangkap emel di langkah pertama untuk recovery email sebelum langkah payment.

Peraturan keputusan: kalau lebih 30 peratus pembeli order banyak item dan perlu pilih shipping, multi-step biasanya lebih baik kerana setiap langkah ada satu tugas. Selain itu, default kepada satu page. CheckoutWC dan FunnelKit kedua-duanya implement corak ini dengan kemas. WooCommerce Blocks Checkout (wc/checkout) memang satu page secara default dan sudah cukup matang untuk production.

Guest checkout, akaun kemudian

Wajibkan create akaun sebelum bayar adalah pembunuh checkout yang paling kerap didokumenkan. Baymard letak ini di puncak punca cart abandonment tahun demi tahun.

Benarkan guest checkout secara default. Selepas itu, di thank-you page, tunjuk butang dalam gaya "Buat akaun anda, butiran sudah terisi". Set password melalui magic link ke emel yang sudah ada. WooCommerce sokong ini dengan woocommerce_enable_guest_checkout plus template post-purchase yang ringkas. Convert order dulu, akaun kemudian, setiap masa.

Susunan payment method ikut pasaran

Kemenangan paling cepat untuk kedai WooCommerce di Malaysia adalah letak FPX di atas untuk desktop, dan GrabPay serta Touch n Go eWallet di atas untuk mobile. Card-first default itu logik untuk pasaran 2014, bukan 2026. Stripe dan iPay88 kedua-duanya cover ini; pilih ikut settlement speed dan acquirer anda.

Boost dan ShopeePay layak dipertimbangkan jika audience anda muda dan sosial. Untuk pembeli antarabangsa, Apple Pay dan Google Pay perlu di atas borang kad manual. Stripe Payment Request Button atau Payment Element detect wallet secara automatik. Tunjuk butang wallet hanya jika peranti sokong; jangan render butang Apple Pay yang mati di Android.

Kelajuan di checkout

Page checkout jadi bloated kerana semua orang anggap ia macam page produk biasa. Bukan. Tanggalkan yang tidak perlu.

Defer Stripe Elements sampai blok payment masuk viewport, atau sampai pengguna interact dengan borang alamat. Stripe.js sekitar 60 KB gzipped dan tarik iframe kedua; load pada initial paint makan LCP tanpa sebab. Panggilan stripe.elements() boleh tunggu.

Server-render order summary. Jangan panggil wc-ajax=update_order_review setiap keystroke; debounce ke blur atau ke commit field eksplisit. Buang plugin yang hook ke woocommerce_review_order_before_submit dengan AJAX synchronous. Buka network tab semasa live checkout. Apa-apa yang block adalah calon untuk dibuang atau diloadkan async.

Cache cart fragments dengan betul. Script default wc-cart-fragments adalah salah satu punca paling biasa first paint yang lambat di kedai Woo. Migrate ke Cart Block (guna Store API, jauh lebih ringan) atau dequeue script tersebut di page yang tidak perlu mini-cart.

Validation yang hormat pengguna

Validate inline, on blur, dengan mesej tepat di sebelah field. Jangan tunggu sampai pengguna klik Place Order baru tunjuk typo emel dari tiga minit lalu. Error state Place Order adalah corak paling buat marah dalam checkout UX, sebab pengguna sudah mental commit untuk keluar.

Guna API checkValidity() dan pasangkan dengan handler peringkat field. Untuk poskod dan nombor telefon, validate format on blur dan content on submit. Untuk butiran kad, Stripe Payment Element handle ini sendiri; guna ia, jangan bina field kad sendiri.

Trust signal di tempat mata jatuh

Mata jatuh pada butang Place Order pada saat keputusan. Di situlah trust signal patut letak.

Letakkan satu baris kecil di bawah butang: ikon kunci secure payment dengan nama processor sebenar (Stripe, iPay88), satu baris polisi pulangan, satu anggaran penghantaran ("Hantar dalam 2 hari bekerja dari Petaling Jaya"). Lupakan mosaic trust badge di footer. Tiada siapa sampai sana.

Kalau ada review betul, tunjuk satu di atas order summary, bukan carousel. Kekalkan suasana tenang sekitar saat bayaran.

Mobile: detail yang selamatkan order

Mobile adalah tempat kebanyakan kedai hilang order. Fix tidak glamor, tapi ia bekerja.

Tap target minimum 44 kali 44 CSS pixel. Butang Place Order full width, sticky di bawah pada mobile, dengan safe-area inset di iOS supaya home indicator tidak makan klik. Test pada iPhone sebenar dengan iOS Safari, bukan hanya Chrome desktop responsive mode. iOS ada bug lama di mana position: sticky dalam parent yang ada transform pecah secara senyap.

Set attribute autocomplete betul: email, tel, given-name, family-name, postal-code, street-address, country, cc-number, cc-exp, cc-csc. iOS dan Android kedua-duanya autofill dari profile tersimpan bila ini betul. Banyak theme strip atau set off. Audit borang sekali, anda dapat balik conversion sebenar.

Input numerik perlu inputmode="numeric" untuk poskod dan telefon, dan autocomplete="one-time-code" untuk field SMS verification kalau anda guna 3D Secure SMS fallback.

Funnel: GA4 dan di mana ia bocor

Anda tidak boleh fix apa yang anda tidak nampak. Pasang funnel ecommerce dalam GA4 dengan betul:

1. view_cart bila page cart load.
2. begin_checkout bila masuk page checkout.
3. add_payment_info bila pilih payment method.
4. purchase bila order siap.

Extension Google Analytics for WooCommerce hantar event ini secara native untuk Blocks Checkout. Kalau anda masih guna shortcode checkout, anda perlukan dataLayer push kecil, atau guna Google Tag Manager dengan template Woo.

Bocor hampir selalu antara begin_checkout dan add_payment_info. Itu jalur field alamat. Kalau gap di situ lebih 35 peratus, fix borang sebelum sentuh apa-apa lain. Kalau bocor antara add_payment_info dan purchase, masalah anda di payment method atau 3DS; check decline rate dan kekerapan SCA challenge.

Apa kami serahkan dalam audit checkout

Kami jalankan ini sebagai engagement scope tetap: audit penuh checkout live, semakan funnel GA4, ukuran pada mobile dan Lighthouse, senarai keutamaan perubahan ikut anggaran impak, dan implementasi top lima. Untuk kebanyakan kedai, top lima itu cover potong field alamat, susunan payment method, defer Stripe Element, sticky CTA mobile, dan validation UX.

Kalau kedai anda volume betul-betul ada dan checkout tidak disentuh sejak launch, anda biar order tinggal di atas meja. Kami boleh tolong. Tempah audit checkout dan kami beri secara bertulis apa yang makan order anda dan apa yang kami akan ubah. Untuk gambaran conversion yang lebih luas, post tentang 5 perubahan WooCommerce yang gandakan conversion klien adalah sambungan panjang untuk artikel ini.