WooCommerce 结账：根据账单地址字段值动态禁用“下单”按钮-php教程-PHP中文网

WooCommerce 结账：根据账单地址字段值动态禁用“下单”按钮

花韻仙語

发布： 2025-09-09 18:22:17

原创

570人浏览过

woocommerce 结账：根据账单地址字段值动态禁用“下单”按钮

本教程旨在指导 WooCommerce 开发者如何根据账单地址字段 billing_address_2 的值，在结账页面动态禁用“下单”按钮。通过使用 jQuery 监听字段值的变化，并结合 AJAX 事件处理，可以实现实时禁用和启用“下单”按钮，从而优化用户体验。

实现步骤

以下代码展示了如何使用 jQuery 在 WooCommerce 结账页面，根据 billing_address_2 字段的值动态禁用“下单”按钮。

添加自定义 JavaScript 代码

将以下代码添加到你的 WordPress 主题的 functions.php 文件中，或者使用代码片段插件。该代码将会在页面底部添加 JavaScript 代码，仅在结账页面生效。
```
function action_wp_footer() {
    // Only on checkout page
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
        ?>
        <script>
        jQuery( function($) {
            // Function to handle the place order button
            function place_order_button() {
                // Compare the value of billing_address_2
                if ( $( '#billing_address_2' ).val() == '10+' ) {
                    $( '#place_order' ).prop( 'disabled', true );
                    $( '#place_order' ).css({ 'background-color': 'silver', 'color': 'white', 'cursor': 'not-allowed' });
                } else {
                    $( '#place_order' ).prop( 'disabled', false );
                    $( '#place_order' ).removeAttr( 'style' );
                }
            }

            // On change event of any element
            $( document ).on( 'change', function() {
                place_order_button();
            });

            // After AJAX request is completed
            $( document ).ajaxComplete( function () {
                place_order_button();
            });

        });
        </script>
        <?php
    endif;
}
add_action( 'wp_footer', 'action_wp_footer', 10, 0 );
```
登录后复制
代码解释：

表单大师AI
一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情
- is_checkout() && ! is_wc_endpoint_url()：确保代码只在 WooCommerce 结账页面执行。
- place_order_button() 函数：这个函数是核心，它检查 billing_address_2 字段的值。如果值为 '10+'，则禁用“下单”按钮，并修改其样式。否则，启用按钮并移除自定义样式。
- $( document ).on( 'change', function() { ... });：监听页面上任何元素的变化事件，并在事件触发时调用 place_order_button() 函数。这确保了当用户更改 billing_address_2 的值时，按钮状态会立即更新。
- $( document ).ajaxComplete( function () { ... });：监听 AJAX 完成事件，并在事件触发时调用 place_order_button() 函数。这确保了在 AJAX 请求（例如，更新结账信息）完成后，按钮状态也会更新。

自定义 billing_address_2 字段（可选）

如果 billing_address_2 字段不是默认字段，你需要添加自定义代码来将其添加到结账表单中。以下代码展示了如何将其设置为一个下拉选择框：

add_filter( 'woocommerce_default_address_fields' , 'address_field_dropdown' );

function address_field_dropdown( $address_fields ) {

    $location_array = array(
      'Location 1' => '1',
      'Location 2' => '2',
      'Location 3' => '3',
      'Location 4' => '4',
      'Location 5' => '5',
      'Location 6' => '6',
      'Location 7' => '7',
      'Location 8' => '8',
      'Location 9' => '9',
      'Location 10' => '10+',
    );

     $address_fields['address_2']['label'] = 'Počet osôb';
     $address_fields['address_2']['type'] = 'select';
     $address_fields['address_2']['options'] = $location_array;

     return $address_fields;

}

登录后复制

代码解释：

woocommerce_default_address_fields 过滤器：允许修改默认的地址字段。
$address_fields['address_2']['type'] = 'select';：将 address_2 字段的类型设置为 select，创建一个下拉选择框。
$address_fields['address_2']['options'] = $location_array;：设置下拉选择框的选项。

注意事项

jQuery 依赖： 确保你的主题已经加载了 jQuery。如果没有，你需要手动加载。
CSS 样式： 根据你的主题样式调整禁用按钮的 CSS 样式，以使其与网站风格一致。
字段 ID： 确保 #billing_address_2 和 #place_order 选择器与你的 WooCommerce 结账页面上的实际元素 ID 匹配。如果你的字段 ID 不同，请修改代码。
值比较： 修改 if ( $( '#billing_address_2' ).val() == '10+' ) 中的 '10+' 值，以匹配你想要触发禁用按钮的实际值。
AJAX 事件： ajaxComplete 事件可能不是在所有情况下都适用。如果发现按钮状态没有正确更新，可以尝试其他 AJAX 事件，例如 ajaxSuccess 或 ajaxError。