WooCommerce下单按钮点击后添加等待文本问题求助（附无效代码）

原代码问题分析 #

• 代码里的event.preventDefault()会直接阻止表单提交，导致订单根本无法正常处理，这是功能失效的核心原因。
• WooCommerce在提交订单时会自动把下单按钮替换为加载图标，直接修改按钮文本的操作会被系统自带的加载状态覆盖。

正确实现代码 #

以下代码会在加载图标下方添加提示文本，同时完全不影响订单提交流程：

add_action( 'wp_footer', 'custom_checkout_loading_text' );
function custom_checkout_loading_text() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script type="text/javascript">
jQuery(function($){
    // 监听下单按钮点击，兼容常规触发场景
    $('button#place_order').on('click', function(){
        // 延迟执行，避开WooCommerce加载状态的渲染时机
        setTimeout(function(){
            if ($('.woocommerce-button-processing').length) {
                // 在加载图标后追加提示文本，可自行修改为中文“请稍候”
                $('.woocommerce-button-processing').append('<br><span style="font-size:14px; display:block; margin-top:8px;">Please Wait</span>');
            }
        }, 100);
    });

    // 监听WooCommerce专属提交事件，兼容插件/主题触发的下单操作
    $('form.checkout').on('checkout_place_order', function(){
        setTimeout(function(){
            if ($('.woocommerce-button-processing').length) {
                $('.woocommerce-button-processing').append('<br><span style="font-size:14px; display:block; margin-top:8px;">请稍候</span>');
            }
        }, 100);
    });
});
</script>
<?php
    endif;
}

代码说明 #

• 移除了阻止表单提交的event.preventDefault()，保证订单流程正常运行。
• 用setTimeout延迟执行文本添加操作，避免和WooCommerce自带的加载状态渲染冲突。
• 针对WooCommerce生成的加载状态类.woocommerce-button-processing添加文本，确保提示能精准显示在加载图标下方。
• 同时监听按钮点击和表单提交事件，覆盖更多触发下单的场景。

可选样式调整 #

如果需要自定义文本样式，可修改<span>标签内的style属性，或者添加以下CSS到主题自定义CSS区域：

.woocommerce-button-processing span {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
}

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