如何在WooCommerce中锁定双击变体

在WooCommerce中锁定双击变体的功能通常是为了防止用户在购物车页面快速连续点击“添加到购物车”按钮时，导致多次添加同一商品变体到购物车的问题。以下是实现这一功能的基础概念和相关步骤：

基础概念

JavaScript/jQuery: 用于监听用户的点击事件并控制按钮的行为。
WooCommerce Hooks: 允许开发者自定义WooCommerce的行为。

实现步骤

1. 添加自定义JavaScript代码

你可以通过WordPress的wp_enqueue_scripts钩子来添加自定义的JavaScript代码，以锁定按钮并防止双击。

function lock_add_to_cart_button() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.single_variation_wrap .variations_form').on('submit', function() {
                var button = $(this).find('.single_add_to_cart_button');
                button.prop('disabled', true);
                setTimeout(function() {
                    button.prop('disabled', false);
                }, 3000); // 3秒后重新启用按钮
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'lock_add_to_cart_button');

2. 使用WooCommerce钩子

另一种方法是使用WooCommerce的内置钩子来处理这个问题。

function disable_add_to_cart_on_double_click() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var addToCartClicked = false;
            $('.single_add_to_cart_button').on('click', function() {
                if (addToCartClicked) return false;
                addToCartClicked = true;
                setTimeout(function() {
                    addToCartClicked = false;
                }, 3000); // 3秒后允许再次点击
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'disable_add_to_cart_on_double_click');