phpwordpresswoocommerce

How to change the order of checkout from fields in woocommerce


I've used this snippet to add custom field in woocommerce checkout form. But the field is added to the last portion. I need the field to be displayed after the phone field. As well as it must be an required field

/*** Add custom field to the checkout page ***/
add_action('woocommerce_after_order_notes', 'custom_checkout_field');

function custom_checkout_field($checkout) {
    woocommerce_form_field('billing_phone', array(
    'type' => 'number',
    'class' => array(
        'my-field-class form-row-wide'
        ),
        'label' => __('Phone 2'),
        'placeholder' => __(''),
    ),
    $checkout->get_value('billing_phone'));
    echo '</div>';
}

here is the portion where the custom field has been added

enter image description here

the custom field must be added below this phone field

enter image description here

what i've to change here to solve this issue. waiting for response...


Solution

  • You have added the code to "woocommerce_after_order_notes" action. And it does it. You have to change it to "woocommerce_after_checkout_billing_form". Here's Post from businessbloomer that explains where the positions are.

    And here is the fixed code.

    add_action('woocommerce_after_checkout_billing_form', 'custom_checkout_field');
    // for the shipping form
    add_action('woocommerce_after_checkout_shiiping_form', 'custom_checkout_field');
    
    
    function custom_checkout_field($checkout) {
        woocommerce_form_field('billing_phone', array(
        'type' => 'number',
        'class' => array(
            'my-field-class form-row-wide'
            ),
            'label' => __('Phone 2'),
            'placeholder' => __(''),
        ),
        $checkout->get_value('billing_phone'));
        echo '</div>';
    }