Woocommerce 下订单按钮状态单击后，添加文本

Question

当在我的 woocommerce 网站上单击下订单按钮时，需要几秒钟才能完成订单，用户可以看到轮子转动以显示脚本正在运行。我正在寻找一种解决方案，在转轮下方添加文本“请稍候”，这样我的客户就不会离开。

我尝试将此代码添加为网站上的挂钩，但它对我不起作用。

感谢您提前提供帮助。我相信它会帮助其他人...

add_action( 'wp_footer', 'custom_checkout_jquery_script' );
function custom_checkout_jquery_script() {
  if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
  <script type="text/javascript">
  jQuery( function($){
      jQuery('form.checkout').on('submit', function(event) {
        jQuery('button#place_order').text('Please Wait');
        event.preventDefault();
      });
  });
</script>
 <?php
  endif;
}

Answer 1

我尝试了您的代码并且可以工作，但是如果进行验证或发生任何错误，它不会恢复原始文本。因此，要解决这个问题，您可以尝试以下代码：

function custom_checkout_jquery_script() {
    if(is_checkout() && ! is_wc_endpoint_url()){
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Change the text of the Place Order button during AJAX request
            $(document).on('click', '#place_order', function() {
                var $this = $(this);
                $this.data('original-text', $this.text()); // Store original text
                $this.text('Please Wait'); // Set loading text

                $(document.body).on('checkout_place_order_success checkout_error', function() {
                    $this.text($this.data('original-text')); // Restore original text
                });
            });
        });
    </script>
    <?php
    }
}
add_action('wp_footer', 'custom_checkout_jquery_script');

在子主题的functions.php中添加代码

代码已测试并有效