Cara Ubah Field Checkout WooCommerce – WooCommerce memiliki banyak action dan filter yang bisa Anda gunakan untuk mengubah berbagai aspek agar sesuai dengan kebutuhan situs Anda. Dan semua perubahan ini bisa dilakukan dengan hanya melakukan edit di satu file saja, yaitu functions.php dari theme yang Anda gunakan saat ini (Akan lebih baik jika itu adalah sebuah child theme).
Baca Juga : Menambahkan Dashboard AffiliateWP Di Halaman My Account WooCommerce
Pada kesempatan kali ini, saya akan melakukan perubahan di halaman Checkout WooCommerce. Karena pada tampilan default WooCommerce (gambar di bawah), field “State” muncul dibawah field “Town / City”. Hal ini bagi saya tidak nyaman, karena isi dari field “Town / City” baru akan muncul setelah kita melakukan pilihan di field “State”. Akan lebih baik kalau field “State” muncul lebih dahulu. Sesuai dengan urutan pilihan yang harus dilakukan.
Sebelumnya, harap Anda ketahui bahwa di halaman checkout ini, field-field tersebut dapat dibagi menjadi 4 grup, yaitu:
- billing – Alamat Billing (Alamat Pembeli)
- shipping – Alamat Shipping (Alamat Pengiriman)
- account – Account Login
- order – Informasi tambahan
Urutan Prioritas Field
Dari masing-masing field di grup tersebut memiliki sebuah parameter prioritas. Parameter inilah yang akan digunakan untuk mengatur urutan field tersebut. Berikut detail dari masing-masing field.
| Grup | Nama | Prioritas |
|---|---|---|
| billing | 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 | |
| shipping | 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 | |
| account | account_password | – |
| order | order_comments | – |
Kode PHP : Ubah Field Checkout WooCommerce
Setelah mengetahui tentang field dan urutan prioritasnya, maka sekarang Anda bisa mengatur urutan field tersebut sesuai yang Anda inginkan. Hal ini bisa dilakukan dengan menggunakan code berikut.
add_filter( 'woocommerce_checkout_fields', 'state_duluan' );
function state_duluan( $checkout_fields ){
$checkout_fields['billing']['billing_state']['priority'] = 45;
return $checkout_fields;
}
woocommerce_default_address_fields
Pada contoh di atas saya menggunakan hook woocommerce_checkout_fields. Dengan hook ini, perubahan tersebut hanya akan muncul di halaman checkout saja. Jika Anda ingin menampilkan perubahan tersebut di tempat lain, Anda bisa menggunakan hook woocommerce_default_address_fields.
Untuk menggunakan hook ini, ada sedikit penyesuaian yang harus Anda lakukan di code tadi. Seperti di bawah ini.
add_filter( 'woocommerce_default_address_fields', 'state_duluan' );
function state_duluan( $address_fields ) {
//tidak perlu lagi menyebutkan grup field
$address_fields['state']['priority'] = 45;
return $address_fields;
}Catatan:
- Anda dapat membuat perubahan di field menggunakan hook woocommerce_default_address_fields – dalam hal ini perubahan yang Anda buat akan berpengaruh di field billing dan juga shipping yang ada di halaman “My Account” serta di halaman checkout juga.
- woocommerce_shipping_fields – perubahan hanya akan muncul di field shipping
- woocommerce_billing_fields – perubahan hanya akan muncul di field billing
- woocommerce_checkout_fields – perubahan hanya akan muncul di halaman checkout
Referensi : Customizing checkout fields using actions and filters
kak, mau tanya cara menghapus kolom yang wajib diisi kodingnya gimana?
Kolom wajibnya WooCommerce ya. Hmm, oprek kodenya lumayan rumit sepertinya. Jadi lebih baik pakai plugin saja untuk itu. Coba gunakan plugin Checkout Field Editor. Dengan plugin itu, kamu bisa menambah, mengurangi dan mengatur field dengan gampang.
Kalo untuk memunculkan sampai ketingkar kelurahan secara otomatis caranya gimana ya kak?
Sampai kelurahan mungkin bisa pakai plugin Woongkir ya. Bisa diunduh di sini https://wordpress.org/plugins/woongkir/
Kak, saat saya pilih negara “Indonesia”, knp di kolom state tidak bisa muncul dropdown propinsi ya?
Gmn cara memunculkanna kak?
trims
Hai, Anton. Apakah kasusnya khusus Indonesia atau negara lain juga demikian?
Kasus seperti ini biasanya disebabkan karena ada konflik di tema atau plugin yang dipakai. Coba pakai tema standar bawaan WordPress saja dulu untuk percobaan, misalnya pakai Twenty Twenty atau Storefront. Lalu tes proses pembelian dengan WooCommerce-nya apakah kasusnya tetap muncul atau hilang.
klo rubah nama pengirim memungkinkan tidak ya gan? jadi untuk dropship gt jadi nama pengirimnya adalah nama dropshipper bukan nama yang punya toko/barangnya
terima kasih
Bisa, Mas. Tapi fungsi yang seperti itu ada plugin tambahannya sendiri, Mas.
Kira2 bisa gak sob, kalo form nya di hilangkan , yg ada hanya pilihan alamat kirim kaya tokped BL dll..
Jadi pengguna bisa memilih alamat yang sebelumnya dia sudah simpan ya. Ini ada solusinya hasil dari googling, tapi saya belum pernah coba sih.
Pakai plugin berbayar dari WooCommerce : https://woocommerce.com/products/saved-addresses-for-woocommerce/
Pakai plugin gratis dari WordPress.org : https://wordpress.org/plugins/woo-address-book/
Silakan dicoba.
Coba dengan plugin “Checkout Field Editor (Checkout Manager) for WooCommerce”