在WooCommerce结账页面的“下单”按钮上添加自定义脚本

Question

我正在尝试将这个脚本添加到WooCommerce结账页面的“下单”按钮上：

$('#place_order').addClass('disabled');

但是，如果我把它放在footer.php文件中，它就不起作用。

我找到了一个资源，建议我覆盖woocommerce的checkout.js文件，在/my-theme/woocommerce文件夹内创建一个克隆，但现在我不知道在哪里放置我的自定义脚本以使其工作。

谢谢

- Dimitri Grassi

Answer 1

您的脚本必须放在ready事件处理程序中，但仍有一个问题，在每个准备就绪事件（即DOM完全加载时），WooCommerce都会通过Ajax更新订单审查部分，因此此操作将从Place Order按钮中删除您的disabled类。

您可以使用自定义事件updated_checkout，该事件将在每个Update Order Review Ajax操作结束时触发。

做以下事情。

function add_checkout_script() { ?>

    <script type="text/javascript">

        jQuery(document).on( "updated_checkout", function(){
                $('#place_order').addClass('disabled');
            });         

    </script>

<?php       
}
add_action( 'woocommerce_after_checkout_form', 'add_checkout_script' );

- Sark