Halodemo
Aulia Savira

3 Cara Menyembunyikan Field atau Kolom Tertentu di Halaman Checkout WooCommerce

5 min read

Menyederhanakan proses checkout untuk produk digital di WooCommerce itu penting banget, lho! Kenapa?

Karena produk digital, seperti e-book atau software, tidak perlu pengiriman fisik. Jadi, kalau kita masih meminta pelanggan isi alamat lengkap, rasanya kurang relevan, malah bikin ribet dan berikut beberapa alasan lainnya:

  • Pengalaman Pengguna yang Lebih Baik: Produk digital tidak memerlukan pengiriman fisik, sehingga kolom seperti alamat pengiriman menjadi tidak relevan. Dengan menghapus kolom yang tidak diperlukan, proses checkout menjadi lebih cepat dan sederhana, meningkatkan kenyamanan pelanggan.
  • Mengurangi Tingkat Pengabaian Keranjang Belanja: Proses checkout yang panjang dan rumit dapat membuat pelanggan enggan menyelesaikan pembelian. Dengan menyederhanakan langkah-langkah checkout, kemungkinan pelanggan meninggalkan keranjang belanja menurun, sehingga meningkatkan konversi penjualan.
  • Efisiensi Operasional: Dengan hanya mengumpulkan informasi yang diperlukan, Anda dapat mengurangi beban administrasi dan fokus pada data yang relevan untuk transaksi produk digital.

Dengan demikian, menyederhanakan proses checkout tidak hanya meningkatkan kepuasan pelanggan tetapi juga berdampak positif pada penjualan dan efisiensi bisnis Anda.

Menyederhanakan proses checkout dengan menghapus kolom atau field yang tidak perlu, seperti alamat pengiriman, proses pembelian jadi lebih cepat dan simpel. Hasilnya, kemungkinan mereka menyelesaikan pembelian jadi lebih tinggi, dan tingkat pengabaian keranjang belanja bisa berkurang.

Untuk menyembunyikan field tertentu di halaman checkout WooCommerce, Anda dapat menggunakan salah satu dari metode berikut:

Metode 1: Menggunakan WooCommerce Customizer

  • Masuk ke dashboard WordPress Anda.
  • Navigasi ke Appearance > Customize > WooCommerce > Checkout.
  • Di sini, Anda bisa menyembunyikan tiga kolom: Nama Perusahaan, Alamat Baris 2, dan Nomor Telepon.
  • Pilih opsi ‘Hidden’ untuk kolom yang ingin disembunyikan.
  • Klik tombol ‘Publish’ untuk menyimpan perubahan.

Metode ini memungkinkan Anda menyembunyikan tiga kolom tersebut tanpa perlu menambahkan kode atau plugin tambahan.

Metode 2: Menggunakan CSS

Jika Anda hanya ingin menyembunyikan field secara visual (tidak menghapus dari validasi), atau ingin solusi cepat tanpa mengedit file PHP, Anda bisa menyembunyikan field tersebut menggunakan CSS

  • Masuk ke Dashboard WordPress Anda.
  • Navigasi ke Appearance (Tampilan) > Customize (Sesuaikan).
  • Pilih Additional CSS (CSS Tambahan).
  • Tambahkan kode CSS berikut:
/* Sembunyikan field "Company Name" */
#billing_company_field {
    display: none;
}

/* Sembunyikan field "Last Name" */
#billing_last_name_field {
    display: none;
}

/* Sembunyikan field "Phone" */
#billing_phone_field {
    display: none;
}
  • Klik Publish (Terbitkan) untuk menyimpan CSS

Berikut daftar ID field standar checkout WooCommerce. Ganti billing_company_field, billing_last_name_field dan billing_phone_field dengan field yang ingin Anda sembunyikan

billing_first_name_field
billing_last_name_field
billing_company_field
billing_address_1_field
billing_address_2_field
billing_city_field
billing_postcode_field
billing_country_field
billing_state_field
billing_email_field
billing_phone_field

Dan seterusnya untuk field pengiriman (shipping_…)

Keuntungan Menggunakan CSS:

  • Mudah dan Cepat, tidak memerlukan instalasi plugin atau pengeditan file tema.
  • Field tidak terlihat oleh pengguna saat checkout.

Kekurangan Menggunakan CSS

  • Field tetap ada di dalam kode HTML dan mungkin masih diproses oleh WooCommerce.
  • Jika field yang disembunyikan memiliki validasi (required), pengguna mungkin mengalami masalah saat checkout.

Metode 3: Menggunakan Plugin Code Snippets

Untuk menyembunyikan field tertentu di halaman checkout WooCommerce, Anda bisa menggunakan plugin seperti Code Snippets. Ikuti langkah-langkah berikut:

Plugin ini memudahkan Anda dalam menambahkan, mengelola, dan mengedit kode kustom tanpa harus menyentuh file tema atau plugin secara langsung, jadi cara ini lebih terstruktur dan aman dibandingkan mengedit file tema atau plugin secara langsung.

Langkah 1: Instal dan Aktifkan Plugin Code Snippets

  1. Masuk ke Dashboard WordPress Anda
  2. Navigasi ke Menu Plugins
    • Di panel sebelah kiri, klik Plugins > Add New.
  3. Cari Plugin Code Snippets:
  4. Instal Plugin:
    • Temukan plugin “Code Snippets” oleh Code Snippets Pro.
    • Klik tombol “Install Now“.
  5. Aktifkan Plugin:
    • Setelah instalasi selesai, klik “Activate“.

Langkah 2: Tambahkan Snippet PHP untuk Menyembunyikan Field Checkout

  1. Akses Menu Code Snippets:
    • Setelah plugin diaktifkan, navigasi ke Snippets > Add New di dashboard WordPress Anda.
  2. Beri Nama Snippet:
    • Di bagian atas, beri nama snippet Anda, misalnya “Sembunyikan Field Checkout WooCommerce”.
  3. Tambahkan Kode PHP Berikut:
/**
 * Menghapus field "Company Name" dan "Address Line 2" dari checkout WooCommerce
 */
add_filter('woocommerce_checkout_fields', 'custom_remove_checkout_fields');

function custom_remove_checkout_fields($fields) {
    // Hapus field "Company Name"
    unset($fields['billing']['billing_company']);

    // Hapus field "Address Line 2"
    unset($fields['billing']['billing_address_2']);

    return $fields;
}

Jika Anda memiliki produk fisik dan digital (virtual), gunakan kode dibawah ini untuk menghapus kolom (field) tertentu saat produk digital ada di keranjang belanja (cart).

add_filter('woocommerce_checkout_fields', 'custom_remove_woocommerce_checkout_fields');
function custom_remove_woocommerce_checkout_fields($fields) {
    if ( WC()->cart->has_only_virtual() ) {
        unset($fields['billing']['billing_address_1']);
        unset($fields['billing']['billing_address_2']);
        unset($fields['billing']['billing_city']);
        unset($fields['billing']['billing_postcode']);
        unset($fields['billing']['billing_country']);
        unset($fields['billing']['billing_state']);
        unset($fields['shipping']);
    }
    return $fields;
}

Penjelasan Kode:

  • woocommerce_checkout_fields adalah filter yang digunakan untuk memodifikasi field pada halaman checkout.
  • Fungsi unset() digunakan untuk menghapus field tertentu dari array field checkout.
  • Ganti 'billing_company' dan 'billing_address_2' dengan field yang ingin Anda sembunyikan.

Daftar field standar WooCommerce:

billing_first_name
billing_last_name
billing_company
billing_address_1
billing_address_2
billing_city
billing_postcode
billing_country
billing_state
billing_email
billing_phone

Dan seterusnya untuk field pengiriman (shipping_…)

Jika ingin menghapus semua field di billing dan shipping, atau sesuaikan kode di bawah sesuai kebutuhan Anda untuk menghapus kolom atau field tertentu dari halaman checkout.

/** Menghapus semua kolom yang tidak diperlukan **/
add_filter('woocommerce_checkout_fields', 'custom_remove_checkout_fields');
function custom_remove_checkout_fields($fields) {
    // Kolom Billing
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_email']);
    unset($fields['billing']['billing_phone']);
    unset($fields['billing']['billing_state']);
    unset($fields['billing']['billing_first_name']);
    unset($fields['billing']['billing_last_name']);
    unset($fields['billing']['billing_address_1']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_city']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_country']);
    // Kolom Shipping
    unset($fields['shipping']['shipping_company']);
    unset($fields['shipping']['shipping_phone']);
    unset($fields['shipping']['shipping_state']);
    unset($fields['shipping']['shipping_first_name']);
    unset($fields['shipping']['shipping_last_name']);
    unset($fields['shipping']['shipping_address_1']);
    unset($fields['shipping']['shipping_address_2']);
    unset($fields['shipping']['shipping_city']);
    unset($fields['shipping']['shipping_postcode']);
    unset($fields['billing']['billing_country']);
    // Kolom Order Notes
    unset( $fields['order']['order_comments']);

    return $fields;
}

Jika Anda memiliki produk fisik dan digital (virtual), gunakan kode dibawah ini untuk menghapus kolom (field) tertentu saat produk digital ada di keranjang belanja (cart).

/** Menghapus semua kolom yang tidak diperlukan **/
add_filter('woocommerce_checkout_fields', 'custom_remove_woocommerce_checkout_fields');
function custom_remove_woocommerce_checkout_fields($fields) {
    if ( WC()->cart->has_only_virtual() ) {
    // Kolom Billing
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_email']);
    unset($fields['billing']['billing_phone']);
    unset($fields['billing']['billing_state']);
    unset($fields['billing']['billing_first_name']);
    unset($fields['billing']['billing_last_name']);
    unset($fields['billing']['billing_address_1']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_city']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_country']);
    // Kolom Shipping
    unset($fields['shipping']['shipping_company']);
    unset($fields['shipping']['shipping_phone']);
    unset($fields['shipping']['shipping_state']);
    unset($fields['shipping']['shipping_first_name']);
    unset($fields['shipping']['shipping_last_name']);
    unset($fields['shipping']['shipping_address_1']);
    unset($fields['shipping']['shipping_address_2']);
    unset($fields['shipping']['shipping_city']);
    unset($fields['shipping']['shipping_postcode']);
    unset($fields['billing']['billing_country']);
    // Kolom Order Notes
    unset( $fields['order']['order_comments']);

    return $fields;
}
  • Kemudian, pilih area eksekusi:
    • Di bawah editor kode, pastikan opsi “Run snippet everywhere” atau “Run snippet on site front-end” dipilih.
  • Klik tombol “Save Changes and Activate“.

Kemudian verifikasi perubahan dengan mengunjungi halaman Checkout, periksa dan pastikan Field yang disembunyikan sudah tidak muncul di form checkout.

Kesimpulan

Memahami cara menghapus fields checkout yang tidak perlu sangat penting untuk memastikan pelanggan tidak meninggalkan pembelian karena proses checkout yang panjang. Dengan metode di atas, Anda bisa menyesuaikan halaman checkout WooCommerce sesuai kebutuhan bisnis Anda, sehingga meningkatkan pengalaman pelanggan dan mengurangi tingkat pengabaian keranjang belanja.

Menggunakan kode kustom untuk menyesuaikan proses checkout di WooCommerce seringkali lebih efisien dibandingkan mengandalkan plugin tambahan.

Dengan menambahkan kode langsung ke file functions.php tema atau di plugin code snippet Anda dapat menghapus fields yang tidak diperlukan, seperti alamat pengiriman untuk produk digital, tanpa membebani situs dengan plugin tambahan yang dapat memperlambat kinerja. Pendekatan ini tidak hanya menjaga situs tetap ringan, tetapi juga memberikan kontrol penuh atas penyesuaian yang Anda inginkan.

Namun, pastikan selalu membuat cadangan sebelum melakukan perubahan dan uji coba di lingkungan pengembangan untuk menghindari masalah yang tidak diinginkan.

Rekomendasi: Jika Anda tidak memiliki pengalaman teknis, menggunakan plugin seperti “Checkout Field Editor for WooCommerce” atau “Flexible Checkout Fields” adalah solusi terbaik. Ini memberikan antarmuka pengguna yang mudah untuk mengelola field checkout tanpa risiko kesalahan kode.

Jika Anda membutuhkan bantuan lebih lanjut atau mengalami kendala selama proses, jangan ragu untuk bertanya!

Aulia Savira
«
»

Sembunyikan produk kategori tertentu di halaman ‘Shop’ WooCommerce

Aulia Savira
Oct 10, 2023 27 sec read

Leave a Reply

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