WPITECH
WooCommerce

How to Add WooCommerce Registration Form Fields

How-to-WooCommerce-Registration-Form-Fields

Registration form is an important aspect for all the WordPress websites. Every online WooCommerce stores use a registration form to collect information regarding their existing and new customers.

Now I am going to show you how to add fields in the default registration form at your WooCommerce stores.

How to Enable the WooCommerce Form

The initial step is to enable the form from the WooCommerce backend and for this, you have to go to WooCommerce -> Settings -> Accounts -> Enable Registration. Also make sure to check the box beside Enable customer registration on “My account: page“.

Now you will see the WooCommerce registration form enable on the frontend.

Enable the WooCommerce registration form

How Do I Add Extra Fields to a WooCommerce Registration Form

As you see the form looks basic with a limited field. Now we will be going to add the new fields easily by adding the following code snippet at the end of functions.php file in the theme folder.

function WooCommerce_form_register_fields() {?>
<p>
   <?php _e( 'Name', 'woocommerce' ); ?><span class="required">*</span>
   <input type="text" class="input-text" name="registration_name" value="<?php if ( ! empty( $_POST['registration_name'] ) ) esc_attr_e( $_POST['registration_name'] ); ?>" />
</p>

<div class="clear"></div>
<?php
}
add_action( 'woocommerce_register_form_start', 'WooCommerce_form_register_fields' );

Adding field in WooCommerce form

How to Validate the Fields

To validate the data in the fields you have to put the following code in functions.php:

This code snippet will check the $_POST array for the data and return an error message in case the data not found or the validation process failed.

function WooCommerce_form_validatoin_fields( $username, $email, $validation_errors ) {
if ( isset( $_POST['registration_name'] ) && empty( $_POST['registration_name'] ) ) {
$validation_errors->add( 'registration_name_error', __( 'Error: Name is required!', 'woocommerce' ) );
}
return $validation_errors;
}
add_action( 'woocommerce_register_post', 'WooCommerce_form_validatoin_fields' );

How to Save Values in the Database

Now check if the values have been collected and validated then the next step will be to save the values in the database. Add the following code in functions.php file.

function WooCommerce_form_save_register_fields( $customer_id ) {
if ( isset( $_POST['registration_name'] ) ) {
update_user_meta( $customer_id, 'registration_name', sanitize_text_field( $_POST['registration_name'] ) );
update_user_meta( $customer_id, 'registration_name', sanitize_text_field( $_POST['registration_name'] ) );
}
}
add_action( 'woocommerce_created_customer', 'WooCommerce_form_save_register_fields' );

WooCommerce Edit My Account Page – An Alternative Method to Add WooCommerce Form

If you want to add WooCommerce registration form using an alternative method then you can use WooCommerce hooks to edit WooCommerce my account page.

Add the following code to implement the process for adding a WooCommerce registration form.

function woocommerce_edit_my_account_page() {
    return apply_filters( 'woocommerce_forms_field', array(
        'woocommerce_my_account_page' => array(
            'type'        => 'text',
            'label'       => __( 'Social Media Profile Link', ' WPITECH' ),
            'placeholder' => __( 'Profile Link', 'WPITECH' ),
            'required'    => false,
        ),
    ) );
}
function edit_my_account_page_woocommerce() {
    $fields = woocommerce_edit_my_account_page();
    foreach ( $fields as $key => $field_args ) {
        woocommerce_form_field( $key, $field_args );
    }
}
add_action( 'woocommerce_register_form', 'edit_my_account_page_woocommerce', 15 );

Here you will see the preview:

update-WooCommerce-form-field

The above code starts with the woocommerce_edit_my_account_page() that is used in the next part of the snippet. This woocommerce_edit_my_account_page() function returns a multidimensional array that contains all the information about the form fields such as type, label, placeholder, etc that you are adding to the WooCommerce form.

To make sure that the fields value updated, later on, the array process further through the woocommerce_form_field() function.

The $fields variable consist the array that is generated by the woocommerce_edit_my_account_page() function. This is looped using the foreach() loop.

How to Add Your Required WooCommerce Form Field

The above mentioned alternative method is flexible and you can also add any field type by providing the proper field structure values in the $fields array.

Here I will show you some examples:

Checkbox

'woocommerce_my_account_page_checkbox'   => array(
           'type'  => 'checkbox',
           'label' => __( 'Checkbox', 'WPITECH' ),
       ),

Textarea

'woocommerce_my_account_page' => array(
         'type'        => 'textarea',
         'label'       => __( 'Social Media Profile Link', 'WPITECH' ),
         'placeholder' => __( 'Profile Link', 'WPITECH' ),
         'required'    => false,
     ),

Option list

'woocommerce_my_account_page_select'     => array(
           'type'    => 'select',
           'label'   => __( 'Select Field', 'WPITECH' ),
           'options' => array(
               '' => __( 'Select an options.', 'WPITECH' ),
               1  => __( 'WooCommerce forms', 'WPITECH' ),
               2  => __( 'WooCommerce  my account page', 'WPITECH' ),
               3  => __( 'WooCommerce edit my account page', 'WPITECH' ),
               4  => __( 'How to edit WooCommerce my account page', 'WPITECH' ),
               5  => __( 'Edit my account page WooCommerce', 'WPITECH' ),
           ),

Here you will see the preview

WooCommerce-form-registration-preview

Related posts

How to Setup WooCommerce Deposits for Store Product

WPITECH

How to Display Category Wise Product in WooCommerce

WPITECH

How to Customize WooCommerce Product Variations

WPITECH