在 WooCommerce 结帐帐单地址字段后插入自定义按钮

Question

我一直在尝试对 WooCommerce 结账页面中的账单详细信息表单字段进行重新排序。我已经在其中添加了一个名为“计算运费”的按钮。目前，它显示在所有账单字段之后，我需要在街道地址字段之后插入该按钮。

我已尝试使用下面的代码来添加按钮，它显示在帐单详细信息表单的末尾：

// 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
}

另外，我尝试按优先级更改顺序，但在街道地址字段之后未能显示。

Answer 1

您可以向 WooCommerce 表单字段添加新字段按钮（类型“按钮”），例如：

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'] );
}

现在您可以在账单街道地址字段后显示自定义按钮：

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;
}

按钮位置：您可以微调

'priority'

参数来更改按钮位置。

注意： 您最好使用以下内容（操作挂钩）包含 distancecal.php 文件，因为使用过滤器挂钩并不方便：

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
}

代码位于子主题的functions.php文件中（或插件中）。

你会得到类似的东西：