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

本文将介绍如何在 WooCommerce 结账页面上，根据 billing_address_2 字段的值，动态禁用“下单”按钮。这种方法利用 jQuery 监听字段值的变化，并结合 AJAX 事件处理，确保在用户选择特定选项后，按钮能够立即被禁用。

实现步骤

1. 修改 billing_address_2 字段为下拉选择框

   首先，需要将 billing_address_2 字段修改为下拉选择框。以下代码片段展示了如何使用 woocommerce_default_address_fields 过滤器来实现：

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

   这段代码将 address_2 字段的类型修改为 select，并设置了 options 数组，定义了下拉选择框的选项。

2. 使用 jQuery 动态禁用“下单”按钮

   

   扣子编程

   扣子推出的AI编程开发工具

   下载

   接下来，使用 jQuery 监听 billing_address_2 字段的变化，并根据其值禁用或启用“下单”按钮。以下代码片段展示了如何实现：

   function action_wp_footer() {
       // Only on checkout
       if ( is_checkout() && ! is_wc_endpoint_url() ) :
           ?>
           
           
   这段代码在页脚注入 JavaScript 代码，仅在结账页面执行。它定义了一个 place_order_button 函数，该函数根据 billing_address_2 的值禁用或启用“下单”按钮。
   
   
   $( '#billing_address_2' ).val() == '10+':  这行代码检查 billing_address_2 字段的值是否等于 '10+'。如果相等，则执行禁用按钮的操作。请务必根据实际的选项值修改此处的判断条件。
   
   
   $( '#place_order' ).prop( 'disabled', true );:  这行代码禁用了 ID 为 place_order 的元素（即“下单”按钮）。
   
   $( '#place_order' ).css({ 'background-color': 'silver', 'color': 'white', 'cursor': 'not-allowed' });:  这行代码修改了按钮的样式，使其看起来被禁用。
   
   $( document ).on( 'change', '#billing_address_2', function() { ... });:  这行代码监听 billing_address_2 字段的 change 事件，当用户选择不同的选项时，会触发 place_order_button 函数。 注意这里监听的事件是 $('#billing_address_2') 的 change 事件，而不是整个 document 的 change 事件。
   
   $( document ).ajaxComplete( function () { ... });:  这行代码监听 AJAX 完成事件。由于 WooCommerce 结账页面可能使用 AJAX 更新，因此需要监听 AJAX 完成事件，以确保在 AJAX 完成后，按钮的状态能够正确更新。
   
   

注意事项

• jQuery 依赖: 确保你的 WordPress 主题已经加载了 jQuery。如果没有，你需要手动加载。
• CSS 样式: 可以根据需要自定义禁用按钮的 CSS 样式。
• 选项值: 务必根据实际的下拉选择框选项值，修改 JavaScript 代码中的判断条件。
• 测试: 在生产环境部署之前，请务必在测试环境中进行充分测试。
• 兼容性: 该方法依赖于 jQuery，并使用了特定的 WooCommerce 钩子。请确保与你的 WooCommerce 版本兼容。

总结

通过以上步骤，你可以在 WooCommerce 结账页面上，根据 billing_address_2 字段的值动态禁用“下单”按钮。这种方法可以有效避免不符合条件的订单提交，提升用户体验。记住要根据实际情况修改代码中的选项值和 CSS 样式，并进行充分测试。