Insert a custom button after WooCommerce Checkout Billing Address Field

Question

I've been trying to reorder the billing details form's fields in WooCommerce checkout page. I have already added a button in there called "Calculate Delivery Fee". Currently, it is displayed after all billing fields and I need to insert that button just after the street address field.

I've tried the code below to add the button, and it is displayed at the end of the billing details form:

// Add a button after the billing form in WooCommerce checkout
add_action('woocommerce_after_checkout_billing_form', 'add_custom_button_after_billing_form');
function add_custom_button_after_billing_form() {
    // include_once(plugin_dir_path(__FILE__) . 'distancecal.php'); // Include PHP functions file
    ?>
    <div id="custom-button-wrapper">
        <button type="button" id="custom-button" class="button alt"><?php _e('Calculate Delivery Fee'); ?></button>
    </div>
<?php
}

Also, I've tried to change the order by priority, and it failed to show after the street address field.

Answer 1

You can add a new field button (type "button") to WooCommerce form field like:

add_filter( 'woocommerce_form_field_button', 'create_button_form_field_type', 10, 4 );
function create_button_form_field_type( $field, $key, $args, $value ){
    return sprintf('<p class="form-row %s" id="%s_field" data-priority="%s">
        <button type="%s" id="%s" class="%s">%s</button>
    </p>',
    implode(' ', $args['class']), esc_attr($key), $args['priority'] ? $args['priority'] : '', 
    $args['type'], esc_attr($key), $args['input-class'], $args['label'] );
}

Now you can display your custom button just after the billing street address field with:

add_action('woocommerce_checkout_fields', 'insert_custom_button_in_billing_form');
function insert_custom_button_in_billing_form( $fields ) {
    $fields['billing']['custom-button'] = array(
        'type'         => 'button',
        'label'        => __('Calculate Delivery Fee'),
        'class'        =>  array('form-row-wide'),
        'input-class'  => 'button alt',
        'priority'     => 61, // <== Field location (after Street address fields)
    );
    return $fields;
}

Button location: You can fine tune the 'priority' argument to change the button location.

Note: you should better include your distancecal.php file using, the following (action hook), as it's not convenient to use a filter hook for it:

add_action('woocommerce_before_checkout_billing_form', 'include_php_file_for_custom_button');
function include_php_file_for_custom_button() {
    include_once(plugin_dir_path(__FILE__) . 'distancecal.php'); // Include PHP functions file
}

The code goes in functions.php file of your child theme (or in a plugin).

You will get something like: