How to reorder additional fields on checkout page in WooCommerce

Viewed 478

I cant figure out how to reorder the additional fields, on the checkout page in WooCommerce.

I have added one extra field to the WooCommerce additional information section. I would like to show the time field first then the order notes below it.

This is the code that I am using:

add_filter(  'woocommerce-additional-fields', 'custom_order_fields', 20, 1 );
function custom_order_fields( $fields ) {
   
    $fields['order_comments']['priority'] = 80;
    $fields['woocommerce-delivery-time-field']['priority'] = 70;  
   
    return $fields;
}

However, this does not have the desired result. Can someone tell me what I'm doing wrong?

2 Answers

If you want to show your custom field first, and then the order notes.

You can either use:

// Add 'delivery time' field before 'order comments'
function filter_woocommerce_checkout_fields( $fields ) {    
    // Get 'order comments' field
    $order_comments = $fields['order']['order_comments'];
    
    // Unset 'order comments' field
    unset( $fields['order']['order_comments'] );

    // Add 'delivery time' field
    $fields['order']['delivery_time'] = array(
        'label'        => __( 'Delivery time', 'woocommerce' ),
        'required'     => true,
        'type'         => 'text',
        'class'        => array( 'form-row-wide' ),
    );
    
    // Add 'order comments' field
    $fields['order']['order_comments'] = $order_comments;

    return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'filter_woocommerce_checkout_fields', 10, 1 );

OR use the woocommerce_before_order_notes action hook

function action_woocommerce_before_order_notes( $checkout ) {       
    // Add field
    woocommerce_form_field( 'delivery_time', array(
        'type'          => 'text',
        'class'         => array( 'form-row form-row-wide' ),
        'label'         => __( 'Delivery time', 'woocommerce' ),
        'required'      => true,
    ), $checkout->get_value( 'delivery_time' ) );
}
add_action( 'woocommerce_before_order_notes', 'action_woocommerce_before_order_notes', 10, 1 );

You would need to add the field to the WooCommerce Custom Field first before you set the priority likeso.

add_action('woocommerce_checkout_fields', 'add_woocommerce_additional_fields');
// Function to add field
function add_woocommerce_additional_fields( $fields ) {
     $fields['order']['delivery_time'] = array(
        'type'     => 'text',
        'label'     => __('Delivery time', 'woocommerce'),
        'required'  => true,
        'class'     => array('form-row-wide'),
        'clear'     => true
     );
     // You can set your priority here
     // Just higher than it a bit

     $fields['order']['order_comments']['priority'] = 80;
     $fields['order']['delivery_time']['priority'] = 70;  

     return $fields;
}

You can check here for more information on ordering of fields in Woocommerce.

Related