Louis Eloy
Louis Eloy

Reputation: 335

Make Woocommerce custom checkout field not editable

I added a custom field on the woocommerce checkout page that is populated by URL but I am struggling to find a way to make this field not editable.

I added the following code to function.php:

//Add custom field
function custom_woocommerce_checkout_fields( $checkout_fields = array() ) {

    $checkout_fields['order']['imei'] = array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('IMEI'),
        'placeholder'   => __('imei'),
        'default' => $_GET['imei'],            
    );

    return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'custom_woocommerce_checkout_fields' );

What should I change in my code to accomplish this ?

Upvotes: 4

Views: 2760

Answers (2)

Suraj Wasnik
Suraj Wasnik

Reputation: 149

Try this code. It work for me. Just need to add custom attribute parameter to the fields array.

//Display custom field
function custom_woocommerce_checkout_fields( $checkout_fields = array() ) {

$checkout_fields['order']['imei'] = array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'label'         => __('IMEI'),
    'placeholder'   => __('imei'),
    'default' => $_GET['imei'],   
    'custom_attributes' => array( 'disabled' => true)
);

return $checkout_fields;
}

add_filter( 'woocommerce_checkout_fields', 'custom_woocommerce_checkout_fields' );

// Save custom field
add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta' );
function custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['imei'] ) ) {
        update_post_meta( $order_id, '_imei', sanitize_text_field( $_POST['imei'] ) );
    }
}

Upvotes: 5

LoicTheAztec
LoicTheAztec

Reputation: 253959

You should try this text <imput> field with the readonly property (meaning not editable).

You should need to have your 'emei' set in the checkout url like:
http://www.example.com/checkout/?imei=3545454653 to make the field appear with the value as I have this condition: if( empty($_GET['imei'])) return;set in the function.

The code:

// Display
add_action( 'woocommerce_after_order_notes', 'custom_woocommerce_checkout_fields' );
function custom_woocommerce_checkout_fields( $checkout ) {
    // Only display field if the 'emei' is set in the checkout url
    if( empty($_GET['imei'])) return;

    echo '<p class="form-row my-field-class form-row-wide woocommerce-validated" id="imei_field">
        <label for="imei" class="">'.__('IMEI').'</label>
        <input type="text" class="input-text " name="imei" id="imei" placeholder="'.__('IMEI').'" value="'.$_GET['imei'].'" readonly>
    </p>';
}

// Save 
add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta' );
function custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['imei'] ) ) {
        update_post_meta( $order_id, '_imei', sanitize_text_field( $_POST['imei'] ) );
    }
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested and work on WooCommerce versions 3+

To get the value (for a defined $order_id):

$imei = get_post_meta( $order_id, '_imei', true );

Upvotes: 1

Related Questions