WordPress

Cara Ubah Field Checkout WooCommerce

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.Checkout WooCommerce

Sebelumnya, harap Anda ketahui bahwa di halaman checkout ini, field-field tersebut dapat dibagi menjadi 4 grup, yaitu:

  1. billing – Alamat Billing (Alamat Pembeli)
  2. shipping – Alamat Shipping (Alamat Pengiriman)
  3. account – Account Login
  4. 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.

GrupNamaPrioritas
billingbilling_first_name10
billing_last_name20
billing_company30
billing_country40
billing_address_150
billing_address_260
billing_city70
billing_state80
billing_postcode90
billing_phone100
billing_email110
shippingshipping_first_name10
shipping_last_name20
shipping_company30
shipping_country40
shipping_address_150
shipping_address_260
shipping_city70
shipping_state80
shipping_postcode90
accountaccount_password
orderorder_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;
}
Jadi pada code di atas, yang terjadi adalah merubah prioritas field State lebih tinggi daripada field Town / City. Kemudian saya ingin memunculkan field State tepat dibawah field Country, dengan cara yaitu merubah prioritas field State menjadi 45. Dan hasilnya akan jadi seperti ini

Urutan Field Checkout Baru

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

Irfan Nurhamid

Book enthusiast. A Husband and Father. Enjoys interacting with people, travelling and swimming. -Berbagi itu Peduli-

Related Articles

3 Comments

  1. Kira2 bisa gak sob, kalo form nya di hilangkan , yg ada hanya pilihan alamat kirim kaya tokped BL dll..

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top button