Skip to content
Advertisement

How to reorder additional fields on checkout page in WooCommerce

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?

Advertisement

Answer

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 );
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement