wooCommerce_checkout_fields - 20 contoh kode untuk menyesuaikan checkout wooCommerce

Kustomisasi checkout WooCommerce Anda tanpa plugin? Itu mungkin - jika Anda merasa nyaman dengan beberapa baris PHP. Dalam posting ini, Anda akan menemukan 20 cuplikan kode siap pakai menggunakan filter woocommerce_checkout_fields . Mereka mencakup kasus kehidupan nyata seperti menghapus bidang, mengganti nama label, atau menambahkan opsi baru.

Jika Anda tidak menyukai pengkodean, jangan khawatir - kami juga akan menunjukkan cara menggunakan plugin bidang checkout fleksibel untuk mencapai hasil yang sama secara visual.

Apa itu kustomisasi checkout dan bagaimana hal itu membantu meningkatkan konversi?

Checkout Anda adalah tempat pengunjung menjadi pelanggan. Tetapi jika itu berantakan dengan bidang yang tidak perlu atau tidak memiliki fleksibilitas, itu dapat menyebabkan gesekan. Menyesuaikan checkout membantu mengurangi pengabaian, mempercepat pembelian, dan menciptakan pengalaman yang lebih baik.

WooCommerce hadir dengan filter fleksibel: woocommerce_checkout_fields . Anda dapat menggunakannya untuk memodifikasi penagihan, pengiriman, atau bidang tambahan. Ini sempurna untuk pengembang yang menginginkan kontrol atas visibilitas lapangan, pesanan, dan konten.

20 Contoh Kode Menggunakan Filter WOOCOMMERCE_CHECKOUT_FIELDS

Di bawah ini adalah 20 contoh. Tambahkan cuplikan ini ke functions.php tema anak Anda.php atau plugin khusus.

1. Hapus bidang alamat kedua

 // This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2. Menyembunyikan bidang telepon

 // This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3. Buat bidang email opsional

 // This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

4. Ubah placeholder untuk bidang nama pertama dan belakang

 // This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5. Ganti nama "Nama Belakang" menjadi "Nama Keluarga"

 // This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6. Tambahkan bidang teks khusus

 // This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7. Tambahkan TexTarea untuk instruksi pengiriman

 // This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8. Setel kelas CSS khusus

 // This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9. Ubah Prioritas Bidang Email

 /* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10. Hapus bidang kode pos

 // This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11. NAMA PEMBELI PERTAMA SETELAH Nama Belakang

 // This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12. Tambahkan kotak centang untuk permintaan faktur

 // This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13. Tambahkan dropdown pilih untuk waktu pengiriman

 // This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14. Komentar Pesanan Pra-Perampasan

 // This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15. Tambahkan Bidang Nomor Kustom

 // This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16. Tambahkan pemetik tanggal

 // This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17. Nonaktifkan validasi telepon

 // This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18. Membuat Lapangan Negara Pengiriman Muncul Terakhir

 /* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19. Lepaskan bidang Kode Pos Pengiriman

 // This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20. Tambahkan bidang khusus setelah detail pesanan

 // This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

Cara menyesuaikan checkout tanpa coding menggunakan bidang checkout fleksibel

Bukan pengembang? Tidak masalah. Plugin bidang checkout fleksibel memungkinkan Anda melakukan semua hal di atas - secara visual, dari dasbor WordPress Anda.

• Tambahkan, lepaskan, dan atur ulang bidang menggunakan drag-and-drop
  

  

• Edit label, placeholder, dan nilai default
• Atur bidang sesuai kebutuhan, opsional, atau tersembunyi
  

  

• Terapkan kelas CSS atau aturan validasi
  

  

• Pilih Bagian: Penagihan, Pengiriman, atau Info Tambahan
• Tetapkan nilai default untuk tujuan pengujian atau UX
• Semua tanpa mengedit PHP atau menulis kode khusus

Hasil tanpa pengembangan overhead.

Flexible Checkout Fields Pro - Fitur Tingkat Lanjut

Ingin lebih banyak daya dan fleksibilitas? Versi Pro menambah kemampuan lanjutan:

• Logika bersyarat untuk menampilkan/menyembunyikan bidang berdasarkan konten CART atau data pengguna
• Dukungan untuk Jenis Bidang Tambahan: Pemilih Tanggal, Pemilih Waktu, Radio dengan Warna atau Gambar, dan Lainnya
• Kontrol Visibilitas Untuk Peran Pengguna - Menampilkan Bidang yang Berbeda dengan Pengguna B2B dan B2C
• Tampilan lapangan berdasarkan metode pengiriman atau pembayaran yang dipilih
• Harga tambahan per pengaturan lapangan

Anda dapat melihat fitur plugin di halaman produknya.

Ringkasan: Metode mana yang terbaik untuk checkout Anda?

Menggunakan woocommerce_checkout_fields adalah cara yang ampuh untuk menyesuaikan checkout WooCommerce - tetapi membutuhkan pengkodean dan pengujian yang cermat. Juga, seseorang perlu mengurus kode dan pembaruan tema.

Jika Anda yakin mengedit tema Anda, 20 contoh di atas harus membantu Anda menangani skenario yang paling umum.

Tetapi untuk semua orang, bidang checkout yang fleksibel untuk plugin WooCommerce menawarkan alternatif tanpa kode dan ramah pengguna dengan lebih banyak opsi dalam versi Pro.

Poin -poin penting

• Filter woocommerce_checkout_fields memungkinkan Anda menyesuaikan formulir checkout dengan PHP
• Anda dapat menggunakannya untuk menambah, menghapus, mengganti nama, pemesanan ulang, atau gaya
• Plugin bidang checkout fleksibel melakukan hal yang sama - tetapi tanpa perlu kode
• Versi Pro Menambahkan Logika Bersyarat, Jenis Bidang Ekstra, dan Aturan Harga Bidang
• Pilih metode yang sesuai dengan alur kerja Anda: kode untuk kontrol, plugin untuk kecepatan