woocommerce_register_form

TokoDaring.Com – Panduan Lengkap Hook woocommerce_register_form di WooCommerce.

Panduan Lengkap Hook woocommerce_register_form di WooCommerce

WooCommerce menyediakan berbagai hook yang membantu developer melakukan kustomisasi halaman akun pelanggan tanpa harus mengubah file inti plugin. Salah satu hook yang sangat sering digunakan dalam pengembangan fitur registrasi pelanggan adalah woocommerce_register_form. Hook ini memungkinkan developer menambahkan field tambahan, validasi custom, maupun elemen lain ke dalam form registrasi WooCommerce secara fleksibel.

Bagi pemilik toko online, halaman registrasi pelanggan memiliki peran penting dalam membangun database pengguna dan meningkatkan pengalaman pengguna sejak awal. Sementara bagi developer WordPress dan WooCommerce, hook woocommerce_register_form menjadi solusi ideal untuk membuat sistem registrasi yang lebih lengkap dan sesuai kebutuhan bisnis. Artikel ini akan membahas secara mendalam cara kerja hook tersebut, implementasi teknis, optimasi keamanan, contoh kode, hingga praktik terbaik agar kompatibel dengan WooCommerce modern.

Mengenal Hook woocommerce_register_form

Hook woocommerce_register_form adalah action hook WooCommerce yang digunakan untuk menambahkan elemen custom ke dalam form registrasi pelanggan pada halaman My Account WooCommerce. Hook ini biasanya dipanggil sebelum tombol submit registrasi ditampilkan.

Dengan menggunakan hook ini, developer dapat menambahkan berbagai field tambahan seperti nomor telepon, alamat, nama perusahaan, tanggal lahir, hingga checkbox persetujuan syarat layanan. Pendekatan ini jauh lebih aman dibanding langsung memodifikasi template bawaan WooCommerce.

Berikut contoh dasar penggunaan hook woocommerce_register_form.

add_action(
    'woocommerce_register_form',
    'custom_register_phone_field'
);

function custom_register_phone_field() {
    ?>

    <p class="form-row form-row-wide">
        <label for="reg_phone">Nomor Telepon</label>

        <input
            type="text"
            class="input-text"
            name="phone"
            id="reg_phone"
        />
    </p>

    <?php
}

Kode tersebut menambahkan field nomor telepon pada form registrasi WooCommerce. Teknik ini sangat umum digunakan pada website toko online yang membutuhkan data pelanggan lebih lengkap.

Cara Kerja Hook woocommerce_register_form

Ketika pengguna membuka halaman registrasi WooCommerce, sistem template WooCommerce akan memuat form registrasi bawaan lalu menjalankan hook woocommerce_register_form. Pada tahap ini developer dapat menyisipkan HTML tambahan maupun field custom ke dalam form.

Karena hook ini berbentuk action hook, developer dapat menambahkan berbagai elemen visual tanpa mengubah struktur utama WooCommerce. Hal ini membantu menjaga kompatibilitas dengan update WooCommerce di masa mendatang.

Berikut contoh implementasi field nama perusahaan pada form registrasi.

add_action(
    'woocommerce_register_form',
    'custom_company_field'
);

function custom_company_field() {
    ?>

    <p class="form-row form-row-wide">
        <label for="reg_company">Nama Perusahaan</label>

        <input
            type="text"
            class="input-text"
            name="company"
            id="reg_company"
        />
    </p>

    <?php
}

Selain field teks biasa, developer juga dapat menambahkan dropdown, checkbox, radio button, maupun field upload sesuai kebutuhan bisnis WooCommerce.

Hook ini sering dikombinasikan dengan validasi form dan penyimpanan metadata pelanggan agar seluruh data registrasi dapat diproses secara otomatis setelah akun berhasil dibuat.

Menambahkan Validasi pada Hook woocommerce_register_form

Menambahkan field baru saja tidak cukup karena developer juga perlu memastikan data yang dimasukkan pelanggan valid dan aman. WooCommerce menyediakan hook tambahan untuk memvalidasi data registrasi sebelum akun pengguna dibuat.

Salah satu hook yang umum digunakan bersama woocommerce_register_form adalah woocommerce_register_post. Hook ini membantu developer memeriksa apakah field tertentu kosong atau tidak valid.

Berikut contoh validasi field nomor telepon.

add_action(
    'woocommerce_register_post',
    'validate_phone_field',
    10,
    3
);

function validate_phone_field(
    $username,
    $email,
    $validation_errors
) {

    if ( empty( $_POST['phone'] ) ) {

        $validation_errors->add(
            'phone_error',
            'Nomor telepon wajib diisi.'
        );
    }

    return $validation_errors;
}

Kode tersebut memastikan pengguna tidak dapat menyelesaikan registrasi jika field nomor telepon kosong.

Selain validasi kosong, developer juga dapat memeriksa format email, panjang nomor telepon, atau validasi khusus berdasarkan kebutuhan bisnis.

add_action(
    'woocommerce_register_post',
    'validate_company_field',
    10,
    3
);

function validate_company_field(
    $username,
    $email,
    $validation_errors
) {

    if ( strlen( $_POST['company'] ) < 3 ) {

        $validation_errors->add(
            'company_error',
            'Nama perusahaan terlalu pendek.'
        );
    }

    return $validation_errors;
}

Pendekatan seperti ini membantu meningkatkan kualitas data pelanggan yang tersimpan di WooCommerce.

Menyimpan Data Custom Registrasi WooCommerce

Setelah field berhasil ditambahkan dan divalidasi, langkah berikutnya adalah menyimpan data ke database WordPress. WooCommerce memungkinkan developer menyimpan data custom menggunakan metadata user WordPress.

Hook yang umum digunakan untuk menyimpan data registrasi adalah woocommerce_created_customer. Hook ini dijalankan setelah akun pelanggan berhasil dibuat.

Berikut contoh penyimpanan nomor telepon pelanggan.

add_action(
    'woocommerce_created_customer',
    'save_phone_field'
);

function save_phone_field( $customer_id ) {

    if ( isset( $_POST['phone'] ) ) {

        update_user_meta(
            $customer_id,
            'phone',
            sanitize_text_field( $_POST['phone'] )
        );
    }
}

Kode tersebut menyimpan nomor telepon pelanggan sebagai user meta di database WordPress.

Developer juga dapat menyimpan banyak field sekaligus seperti perusahaan, alamat tambahan, atau kode referral.

add_action(
    'woocommerce_created_customer',
    'save_company_field'
);

function save_company_field( $customer_id ) {

    if ( isset( $_POST['company'] ) ) {

        update_user_meta(
            $customer_id,
            'company',
            sanitize_text_field( $_POST['company'] )
        );
    }
}

Penggunaan fungsi sanitize_text_field() sangat penting untuk menjaga keamanan data sebelum disimpan ke database.

Optimasi dan Keamanan Hook woocommerce_register_form

Karena form registrasi berhubungan langsung dengan input pengguna, keamanan menjadi aspek yang sangat penting. Developer harus memastikan seluruh data input telah divalidasi dan disanitasi sebelum diproses lebih lanjut.

Salah satu praktik terbaik adalah menggunakan nonce WordPress untuk mencegah serangan CSRF pada form registrasi custom. Walaupun WooCommerce sudah memiliki sistem keamanan bawaan, penambahan validasi tambahan tetap sangat disarankan.

Berikut contoh penggunaan nonce pada form registrasi.

add_action(
    'woocommerce_register_form',
    'custom_nonce_field'
);

function custom_nonce_field() {

    wp_nonce_field(
        'custom_register_action',
        'custom_register_nonce'
    );
}

Developer juga perlu melakukan verifikasi nonce sebelum menyimpan data ke database.

add_action(
    'woocommerce_created_customer',
    'verify_custom_nonce'
);

function verify_custom_nonce( $customer_id ) {

    if (
        ! isset( $_POST['custom_register_nonce'] ) ||
        ! wp_verify_nonce(
            $_POST['custom_register_nonce'],
            'custom_register_action'
        )
    ) {
        return;
    }
}

Teknik tersebut membantu meningkatkan keamanan form registrasi WooCommerce dari manipulasi data pihak tidak bertanggung jawab.

Selain keamanan, optimasi tampilan mobile juga penting karena sebagian besar pengguna WooCommerce modern melakukan registrasi melalui perangkat smartphone.

Best Practice Menggunakan Hook woocommerce_register_form

Penggunaan hook WooCommerce yang baik harus mempertimbangkan kompatibilitas, keamanan, dan kemudahan maintenance jangka panjang. Salah satu praktik terbaik adalah menyimpan seluruh custom function di child theme atau custom plugin agar perubahan tidak hilang ketika tema diperbarui.

Developer juga disarankan menggunakan nama field yang unik agar tidak bentrok dengan plugin WooCommerce lain. Konflik field sering terjadi pada website dengan banyak plugin membership atau checkout custom.

Berikut contoh penggunaan prefix custom pada field registrasi.

add_action(
    'woocommerce_register_form',
    'custom_prefixed_field'
);

function custom_prefixed_field() {
    ?>

    <p class="form-row form-row-wide">
        <label for="reg_custom_code">Kode Referral</label>

        <input
            type="text"
            class="input-text"
            name="myplugin_referral_code"
            id="reg_custom_code"
        />
    </p>

    <?php
}

Penggunaan prefix membantu mengurangi risiko konflik dengan plugin lain di dalam WordPress.

Praktik terbaik lainnya adalah melakukan pengujian pada berbagai tema dan perangkat untuk memastikan field registrasi tetap tampil dan berfungsi dengan baik di seluruh kondisi penggunaan WooCommerce.

Ringkasan

Hook woocommerce_register_form merupakan action hook WooCommerce yang digunakan untuk menambahkan field dan elemen custom pada form registrasi pelanggan. Hook ini sangat berguna untuk membuat sistem registrasi yang lebih lengkap, fleksibel, dan sesuai kebutuhan bisnis. Dengan memahami cara kerja hook, validasi data, penyimpanan metadata pelanggan, optimasi keamanan, hingga praktik terbaik implementasi, developer dapat membangun halaman registrasi WooCommerce yang profesional, aman, dan mudah digunakan.

Pertanyaan Umum Tentang Hook woocommerce_register_form

Pertanyaan Umum Tentang Hook woocommerce_register_form.