CODEWITHSUNDEEP
phpwordpresswoocommercecheckoutcustom-fields
CBRA Designer
CBRA Designer

Reputation: 41

Add custom field with maxlength to WooCommerce checkout page

I've added a new field for phone number in WooCommerce checkout form.

Everything is working perfectly except the maxlength = "10". After adding the snippet it shows maxlength = 10 when I inspect element, but the phone field allows me to type n number of characters.

Am I doing anything wrong?

Here is the snippet i used in functions.php

add_action('woocommerce_after_checkout_billing_form', 'custom_checkout_field');

function custom_checkout_field($checkout)
{
woocommerce_form_field('billing_phone_2', array(
'type' => 'number',
'maxlength' => "10",
'id' => 'billing_phone_2',
'class' => array(
'input-text form-row-wide'
) ,
'required'     => 'required' === get_option( 'woocommerce_checkout_phone_field', 'required' ),
'label' => __('Phone 2') ,
'placeholder' => __('') ,
) ,
$checkout->get_value('billing_phone_2'));
}

Upvotes: 1

Views: 1772

Answers (1)

7uc1f3r
7uc1f3r

Reputation: 29650

For the type you could use tel, and for the maxlength it is not necessary to put the number between quotes

So you get:

// Display a custom checkout field after billing form
function action_woocommerce_after_checkout_billing_form( $checkout ) {

    woocommerce_form_field( 'billing_phone_2', array(
        'type'          => 'tel',
        'maxlength'     => 10,
        'class'         => array( 'form-row-wide' ),
        'required'      => true,
        'label'         => __( 'Phone 2', 'woocommerce' ),
        'placeholder'   => __( 'My placeholder', 'woocommerce' ),
    ), $checkout->get_value( 'billing_phone_2' ));

}
add_action( 'woocommerce_after_checkout_billing_form', 'action_woocommerce_after_checkout_billing_form', 10, 1 );

Optional: some validation for the custom (required) field

// Custom checkout field validation
function action_woocommerce_checkout_process() {
    // Isset    
    if ( isset( $_POST['billing_phone_2'] ) ) {
        $domain = 'woocommerce';
        $phone = $_POST['billing_phone_2'];
        
        // Empty
        if ( empty ( $phone ) ) {
            wc_add_notice( __( 'Please enter a phone number to complete this order', $domain ), 'error' );
        }
        
        // Validates a phone number using a regular expression.
        if ( 0 < strlen( trim( preg_replace( '/[\s\#0-9_\-\+\/\(\)\.]/', '', $phone ) ) ) ) {
            wc_add_notice( __( 'Please enter a valid phone number', $domain ), 'error' );
        }
    }
}
add_action( 'woocommerce_checkout_process', 'action_woocommerce_checkout_process', 10, 0 );

If type = number, you can use the min and max attributes

// Display a custom checkout field after billing form
function action_woocommerce_after_checkout_billing_form( $checkout ) {

    woocommerce_form_field( 'billing_phone_2', array(
        'type'          => 'number',
        'custom_attributes' => array(
            'min'       =>  0,
            'max'       =>  9999999999,
        ),
        'class'         => array( 'form-row-wide' ),
        'placeholder'   => __( 'Phone 2', 'woocommerce' ),
    ), $checkout->get_value( 'billing_phone_2' ));

}
add_action( 'woocommerce_after_checkout_billing_form', 'action_woocommerce_after_checkout_billing_form', 10, 1 );

Although I wouldn't recommend it for a phone number, there is a reason that the type 'tel' exists, as used in other phonefields in WooCommerce

Upvotes: 2

Related Questions