Cara menonaktifkan validasi kode pos WooCommerce

Diterbitkan: 2020-09-12

Apakah Anda ingin menghapus bidang kode pos? Dalam tutorial ini, kami akan menunjukkan cara menonaktifkan validasi kode pos WooCommerce untuk meningkatkan halaman checkout Anda dan meningkatkan tingkat konversi Anda.

Mengapa menghapus validasi kode pos WooCommerce?

Secara default, bidang kode pos diperlukan di WooCommerce sehingga menyertakan validasi. Namun, terkadang bidang tersebut tidak diperlukan dan menambah gesekan ke halaman checkout. Misalnya, ada banyak negara di Afrika, Amerika Tengah, dan Oseania yang tidak memiliki atau tidak menggunakan kode pos. Selain itu, jika pengguna mengetik teks di bidang kode pos, WooCommerce akan menampilkan pesan kesalahan dan tidak akan membiarkan pembeli menyelesaikan pembayaran.

Memiliki halaman checkout yang dioptimalkan dan ramping adalah kunci untuk setiap toko online. Anda harus menghilangkan gangguan apa pun untuk memberikan pengalaman pembelian yang lebih cepat dan lebih baik bagi pelanggan Anda. Akibatnya, memiliki bidang dan pesan kesalahan yang tidak perlu dapat memengaruhi pengalaman berbelanja dan rasio konversi pengguna Anda. Jadi, dalam panduan ini, kami akan menunjukkan cara menonaktifkan validasi kode pos WooCommerce di halaman checkout . nonaktifkan validasi kode pos woocommerce - Default

Cara menonaktifkan validasi kode pos WooCommerce secara terprogram

Karena kami akan memodifikasi file functions.php dari tema Anda, sebelum memulai, kami sarankan Anda membuat tema anak. Anda dapat memeriksa panduan kami untuk membuatnya atau menggunakan salah satu plugin ini. Jadi, untuk menghapus validasi kode pos di WooCommerce, pertama, buka halaman produk dan tambahkan produk ke troli dengan mengklik tombol Tambahkan ke troli. Sekarang, mari kita lihat bagaimana Anda dapat melakukan hal berikut:

  1. Hapus Zip/Postcode dari halaman checkout WooCommerce
  2. Jadikan bidang Zip/Kode Pos opsional
  3. Hapus bidang penagihan dari kasir
  4. Edit label bidang halaman checkout

1) Hapus Zip/Kode Pos dari halaman checkout WooCommerce

Salah satu opsi untuk menonaktifkan validasi kode pos adalah dengan menghapus kolom kode pos sepenuhnya dari halaman checkout WooCommerce. Cara termudah untuk melakukannya adalah dengan menggunakan beberapa kait WooCommerce. Jadi, untuk menghapus bidang zip dari halaman checkout, cukup salin dan tempel skrip berikut di akhir file functions.php dari tema anak Anda:

 // Nonaktifkan bidang zip/kode pos
add_filter( 'woocommerce_checkout_fields' , 'QuadLayers_remove_billing_postcode_checkout' );
function QuadLayers_remove_billing_postcode_checkout( $fields ) {
unset($fields['billing']['billing_postcode']);
kembalikan $bidang;
}

Kait woocommerce_checkout_fields adalah salah satu kait inti WooCommerce yang dapat Anda gunakan untuk menyesuaikan halaman checkout. Dengan fungsi bawaan PHP unset() Anda mengosongkan bidang dan mengirimkannya kembali ke WooCommerce dengan return ; di baris berikut. hapus bidang validasi woocommerce zip/kode pos

2) Jadikan bidang Zip/Kode Pos opsional

Alternatif lain untuk menonaktifkan validasi kode pos di halaman checkout WooCommerce adalah membuat opsi bidang alih-alih wajib. Untuk melakukannya, rekatkan skrip berikut di akhir file functions.php :

 // Jadikan bidang zip/kode pos opsional
add_filter( 'woocommerce_default_address_fields' , 'QuadLayers_optional_postcode_checkout' );
function QuadLayers_optional_postcode_checkout( $p_fields ) {
$p_fields['kode pos']['wajib'] = false;
kembalikan $p_fields;
}

Di sini, kami menggunakan pengait yang berbeda ( 'woocommerce_default_address_fields') . Dalam hal ini, Anda dapat menggunakan pengait ini untuk mengubah bidang penagihan di halaman checkout. Menyetel bidang kode pos ke false akan menjadikannya opsional dan menghapus validasi.

3) Hapus bidang penagihan dari kasir

Kolom Zip ditampilkan dalam formulir penagihan sehingga cara lain untuk menonaktifkan validasi adalah menyesuaikan bagian penagihan dan menghapus beberapa kolom dari halaman checkout . Dengan cara yang sama, Anda menonaktifkan bidang kode pos di poin 1, Anda dapat melakukan hal yang sama dengan bidang lainnya. Anda dapat mengidentifikasi bidang kode pos dalam kode dengan indeks berikut: $fields['billing']['billing_postcode']) .

Demikian pula, Anda dapat menyembunyikan bidang lain yang Anda inginkan. Anda hanya perlu mengetahui indeks yang tepat untuk bidang tertentu itu. Berikut adalah beberapa pengidentifikasi bidang yang biasanya dapat Anda hapus untuk merampingkan pengalaman pembelian pelanggan:

 unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_phone']);

Setiap indeks yang mengidentifikasi bidang memiliki nama yang cukup jelas. Selain itu, indeks 'penagihan' memberi tahu Anda bahwa bidang tersebut terletak di dalam formulir penagihan. Jadi, misalnya, jika Anda ingin menghapus bidang perusahaan dan alamat_2 , Anda memerlukan kode ini:

 // Hapus perusahaan dan alamat_2 bidang penagihan 
add_filter( 'woocommerce_checkout_fields' , 'QuadLayers_remove_billing_fields' ); 
function QuadLayers_remove_billing_fields( $fields ) { 
unset($fields['billing']['billing_company']); 
unset($fields['billing']['billing_address_2']); 
kembalikan $bidang; 
}

Seperti yang Anda lihat, Anda dapat menggunakan lebih dari satu indeks secara bersamaan. Untuk menghapus lebih banyak bidang, cukup tambahkan ke fungsi di atas menggunakan indeks yang sesuai. Hapus bidang checkout woocommerce

4) Edit label bidang halaman checkout WooCommerce

Sekarang, katakanlah Anda telah memutuskan untuk menjadikan bidang Zip/Postcode opsional tetapi Anda ingin mengubah label bidang itu (Zip/Postcode) agar lebih jelas bagi pengguna Anda. Dengan skrip berikut, Anda dapat mengubah label 'Zip/Kode Pos' menjadi apa pun yang Anda inginkan. Misalnya, kami telah mengubahnya untuk kode Area :

 /* WooCommerce: Mengubah string Penagihan */
add_filter( 'gettext', 'QuadLayers_billing_field_strings', 20, 3 );

function QuadLayers_billing_field_strings( $translated_text, $text, $domain ) {
beralih ( $translated_text ) {
    kasus 'Kode pos / ZIP':
        $translated_text = __('Kode area','woocommerce');
        merusak;
    }
kembalikan $translated_text;
}

Kait gettext sangat berguna dan biasanya digunakan pada terjemahan. Meskipun ini bukan terjemahan, kait ini tetap berguna. Kode di atas mengubah label WooCommerce default (Zip/Postcode) untuk string kode Area .

Lihatlah skrip di atas dan lihat di mana string ini berada dalam kode. Jika Anda ingin menerjemahkan lebih banyak string, cukup tambahkan terjemahan Anda di dalam pernyataan switch sebagai berikut:

 function QuadLayers_billing_field_strings( $translated_text, $text, $domain ) {
beralih ( $translated_text ) {
    kasus 'Detail penagihan' :
        $translated_text = __( 'Informasi pemesanan', 'woocommerce' );
        merusak;
    case 'Kirim ke alamat lain?':
        $translated_text = __('Tolong kirim ke lokasi lain','woocommerce');
        merusak;
    kasus 'Nama perusahaan':
        $translated_text = __('Perusahaan','woocommerce');
        merusak;
    kasus 'Kode pos / ZIP':
        $translated_text = __('Kode area','woocommerce');
        merusak;
    }
kembalikan $translated_text;
}

Pada titik ini, Anda seharusnya dapat menghapus dan menjadikan beberapa bidang checkout opsional dan Anda juga telah mempelajari cara menerjemahkan string menggunakan hook gettext . Pada gambar berikut, kami telah menghapus beberapa bidang, mengubah nama bidang kode pos/kode pos untuk kode area, dan menjadikannya opsional. Selain itu, kami telah mengedit judul untuk formulir penagihan dan Kirim ke alamat yang berbeda. nonaktifkan validasi kode pos WooCommerce - Final

Hapus validasi kode pos WooCommerce dengan plugin

Jika Anda tidak memiliki keterampilan coding atau Anda merasa tidak nyaman mengedit file functions.php , kami memiliki solusi untuk Anda. Anda dapat menghapus validasi kode pos WooCommerce dengan plugin . Ada beberapa alat di luar sana, tetapi kami akan menunjukkan cara menonaktifkan kolom kode pos dengan dua plugin freemium:

  1. Manajer Pembayaran untuk WooCommerce
  2. Pembayaran Langsung WooCommerce

1) Manajer Pembayaran untuk WooCommerce

Checkout Manager adalah plugin yang sangat baik untuk menyesuaikan proses checkout dan salah satu editor bidang terbaik di luar sana. Ini memungkinkan Anda untuk menambah, mengedit, dan menghapus bidang pada halaman checkout. Dengan cara ini, Anda dapat menyesuaikan bidang yang ingin Anda tampilkan di bagian bidang Penagihan, Pengiriman, dan Tambahan.

Untuk menonaktifkan validasi kode pos WooCommerce, pertama, Anda perlu menginstal dan mengaktifkan plugin. Anda dapat mengunduh Checkout Manager secara gratis dari repositori WordPress atau membeli salah satu paket premium mulai dari 19 USD (pembayaran satu kali).

Setelah Anda mengaktifkan Pengelola Checkout, saatnya untuk menghapus bidang yang tidak Anda inginkan. Jadi, di admin WordPress Anda, buka WooCommerce > Checkout > Billing . Di sana Anda akan memiliki opsi untuk menonaktifkan kode pos dan bidang lain yang tidak ingin Anda tampilkan di bagian penagihan. Kemudian, Anda dapat pergi ke bagian pengiriman dan ulangi prosesnya. Dengan cara ini, Anda tidak hanya dapat menghapus bidang zip tetapi juga menyesuaikan seluruh halaman checkout Anda. Checkout Manager memiliki banyak fitur lain yang dapat Anda gunakan untuk meningkatkan checkout Anda seperti membuat bidang bersyarat atau membiarkan pengguna mengunggah file di checkout.

Untuk informasi lebih lanjut tentang cara menggunakan plugin ini, Anda dapat melihat halaman dokumentasi.

2) Pembayaran Langsung WooCommerce

Plugin lain yang dapat Anda gunakan untuk menghapus kolom kode pos adalah Direct Checkout. Ini adalah salah satu plugin checkout terbaik untuk WooCommerce dan memungkinkan Anda untuk menghapus bidang yang tidak perlu untuk menyederhanakan halaman checkout. Dan bagian terbaiknya adalah ia memiliki versi gratis.

Sebelum kita mulai, Anda dapat mengunduh versi gratis atau membeli salah satu paket premium mulai dari 20 USD (pembayaran satu kali).

Setelah itu, di admin WordPress Anda, buka WooCommerce > Direct Checkout > Checkout . Di sana, buka bagian Hapus bidang checkout dan pilih kode pos dan semua bidang yang tidak ingin Anda tampilkan di kasir. Selain itu, Anda akan memiliki opsi lain untuk menyesuaikan halaman checkout. Hapus bidang kode pos dengan WooCommerce Direct Checkout

Direct Checkout sangat mudah digunakan sehingga Anda tidak akan mengalami masalah dengannya.

Kesimpulan

Secara keseluruhan, beberapa bidang di halaman checkout tidak diperlukan dan menambah gesekan pada proses pembelian jadi lebih baik untuk menghapusnya.

Kami telah melihat cara menonaktifkan validasi kode pos WooCommerce untuk meningkatkan pengalaman pengguna dan meningkatkan rasio konversi Anda. Selain itu, Anda telah belajar untuk menyesuaikan checkout dengan menjadikan bidang zip opsional, menghapus bidang penagihan dari checkout, dan mengedit label.

Bagi mereka yang tidak memiliki keterampilan pengkodean, kami juga telah melihat cara menghapus kode pos dan bidang lain dari halaman checkout dengan dua plugin: Manajer Checkout dan Checkout Langsung. Alat-alat ini memiliki versi gratis dan sangat mudah digunakan sehingga merupakan alternatif yang bagus bagi mereka yang tidak ingin mengedit file functions.php .

Terakhir, jika Anda ingin menyesuaikan bagian lain dari toko Anda, kami sarankan Anda melihat panduan kami untuk mengedit halaman toko dan meningkatkan penjualan Anda.

Sudahkah Anda menghapus validasi kode pos? Apakah Anda memiliki masalah setelah mengikuti tutorial ini? Beri tahu kami di bagian komentar di bawah!