如何将WooCommerce结账页面配送费计算按钮移至街道地址字段后？

你当前使用的woocommerce_after_checkout_billing_form钩子是在整个账单详情表单结束后触发的，所以按钮会显示在所有字段末尾。要精准插入到街道地址字段之后，需要使用WooCommerce为单个字段提供的专属钩子：woocommerce_after_checkout_field_{field_key}。

街道地址对应的字段键是billing_address_1，修改代码如下：

// Add a button right after billing street address field in WooCommerce checkout
add_action('woocommerce_after_checkout_field_billing_address_1', 'add_custom_button_after_billing_street');
function add_custom_button_after_billing_street() {
    // include_once(plugin_dir_path(__FILE__) . 'distancecal.php'); // Uncomment if needed
?>
    <div id="custom-button-wrapper">
        <button type="button" id="custom-button" class="button alt"><?php _e('Calculate Delivery Fee'); ?></button>
    </div>
<?php
}

关键说明： #

• 替换原钩子为woocommerce_after_checkout_field_billing_address_1，该钩子会在billing_address_1（街道地址）字段输出后立即执行
• 如果你的店铺启用了第二行地址（billing_address_2），且需要把按钮放在第二行地址后面，只需将钩子改为woocommerce_after_checkout_field_billing_address_2即可

内容的提问来源于stack exchange，提问作者udd_ish