Cara Merubah Field Checkout WooCommerce

Cara Melakukan perubahan di halaman Checkout WooCommerce.Karena pada tampilan default WooCommerce, field State muncul dibawah field Town / City. Hal ini tidak nyaman, karena isi dari field Town / City baru akan muncul setelah kita melakukan pilihan di field State.Namun lebih baik kalau field State muncul lebih dahulu.Sesuai dengan urutan pilihan yang harus dilakukan.

Perlu diketahui bahwa di halaman checkout,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,memiliki sebuah parameter prioritas.Parameter ini 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

Jika sudah mengetahui tentang field dan urutan prioritas,sekarang kalian bisa mengatur urutan field tersebut sesuai yang diinginkan.Hal ini bisa dilakukan dengan menggunakan kode ini :

add_filter( ‘woocommerce_checkout_fields’, ‘state_duluan’ );

function state_duluan( $checkout_fields ){

$checkout_fields[‘billing’][‘billing_state’][‘priority’] = 45;

return $checkout_fields;

}

Jadi pada code di atas,yang terjadi yakni merubah prioritas field State lebih tinggi daripada field Town / City. Kemudian saat ingin memunculkan field State tepat dibawah field Country, dengan cara yaitu merubah prioritas field State menjadi 45. Dan hasilnya seperti ini :

Woocommerce_default_address_fields

Contoh di atas menggunakan hook woocommerce_checkout_fields.Dengan hook ini, perubahan tersebut akan muncul di halaman checkout saja.Jika ingin menampilkan perubahan tersebut di tempat lain kalian bisa menggunakan hook woocommerce_default_address_fields.Untuk menggunakan hook ini, ada sedikit penyesuaian yang harus dilakukan 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:

Kalian dapat membuat perubahan di field menggunakan hook :

woocommerce_default_address_fields : perubahan yang dibuat berpengaruh di field billing dan shipping yang ada di halaman My Account serta di halaman checkout.
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.