如何控制WooCommerce JavaScript函数执行并屏蔽库存提示？

针对你需要停止WooCommerce在变体库存为0时，对div.woocommerce-variation.single_variation进行元素移除和插入的需求，以下是几种基于CSS类/表单属性的实现方案：

方案1：自定义JS重写默认行为（推荐） #

WooCommerce的变体DOM操作由add-to-cart-variation.js中的onHideVariation和onShowVariation方法控制，我们可以通过重写这些方法，加入条件判断，只在特定表单上跳过库存提示的DOM操作。

实现代码 #

将以下代码添加到主题的自定义JS文件（或通过后台自定义HTML/JS功能插入）：

jQuery(document).ready(function($) {
    if (window.wc_add_to_cart_variation_params) {
        // 重写隐藏变体的方法
        $.fn.wc_variation_form.prototype.onHideVariation = function() {
            const $form = $(this.$form);
            // 判断条件：表单带有disable-stock-notice类 或 data-disable-stock-notice属性
            if ($form.hasClass('disable-stock-notice') || $form.data('disable-stock-notice')) {
                this.$single_variation.hide();
                this.$variation_form.trigger('hide_variation', [this]);
                return; // 跳过默认的清空HTML操作
            }
            // 其他表单执行默认逻辑
            this.$single_variation.hide().html('');
            this.$variation_form.trigger('hide_variation', [this]);
        };

        // 重写显示变体的方法
        $.fn.wc_variation_form.prototype.onShowVariation = function(variation) {
            const $form = $(this.$form);
            if ($form.hasClass('disable-stock-notice') || $form.data('disable-stock-notice')) {
                // 仅显示变体内容，不插入库存提示
                this.$single_variation.show().html(variation.variation_html);
                this.$variation_form.trigger('show_variation', [variation, this]);
                return;
            }
            // 其他表单执行默认逻辑
            this.$single_variation.show().html(variation.variation_html);
            this.$variation_form.trigger('show_variation', [variation, this]);
        };
    }
});

使用方式 #

在需要禁用库存提示的产品表单上，添加以下任意一种标识：

• 添加CSS类：<form class="cart disable-stock-notice">
• 添加自定义属性：<form class="cart" data-disable-stock-notice="true">

方案2：替换原版JS文件 #

如果需要更彻底的修改，可以直接替换WooCommerce的默认JS文件：

1. 移除默认JS：在主题的functions.php中添加代码，取消原版JS的加载：

function remove_default_variation_js() {
    wp_dequeue_script('wc-add-to-cart-variation');
    wp_deregister_script('wc-add-to-cart-variation');
}
add_action('wp_enqueue_scripts', 'remove_default_variation_js', 20);

2. 修改并加载自定义JS：

• 复制WooCommerce原版add-to-cart-variation.js到主题的js目录，命名为custom-add-to-cart-variation.js
• 找到onHideVariation方法，修改为带条件判断的逻辑（参考方案1中的代码）
• 在functions.php中添加代码加载自定义JS：

function enqueue_custom_variation_js() {
    wp_enqueue_script(
        'custom-wc-add-to-cart-variation',
        get_stylesheet_directory_uri() . '/js/custom-add-to-cart-variation.js',
        array('jquery', 'wp-util'),
        WC_VERSION,
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_variation_js', 20);

方案3：CSS临时隐藏空标签（应急方案） #

如果暂时不想修改JS，可以用CSS隐藏库存为空时插入的空<p>标签：

.woocommerce-variation.single_variation p:empty {
    display: none !important;
}

注：此方法仅隐藏元素，并未阻止DOM操作，适合临时场景。

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