使用jQuery contains()函数实现变体切换时禁用加入购物车按钮

问题背景 #

需要实现：切换到缺货产品变体时，隐藏或禁用对应的加入购物车按钮。尝试通过data.is_in_stock判断库存状态失败，且缺货变体选中时页面HTML存在异常——库存状态标签带有in-stock类，但文本显示「Out of stock」。现有代码依赖data.is_in_stock判断无法生效，原本计划用jQuery的contains()函数实现，但未正确处理动态变体切换的情况。

解决方案 #

以下提供两种适配HTML类名异常场景的可行修复方案：

方案1：基于库存文本精准判断（推荐）

通过动态获取变体切换后的库存文本，直接判断是否缺货，避开不可靠的data.is_in_stock和错误类名：

add_action('wp_footer', 'outofstock_product_variation_js');
function outofstock_product_variation_js() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        // 缓存加入购物车按钮（确认选择器与站点匹配，默认是.single_add_to_cart_button）
        const addToCartBtn = $('.add-to-cart-button');
        
        // 监听变体切换完成事件
        $('form.variations_form').on('show_variation', function() {
            // 实时获取当前变体的库存文本并去除空格
            const stockText = $('.woocommerce-variation-availability p.stock').text().trim();
            
            if (stockText === 'Out of stock') {
                addToCartBtn.hide().prop('disabled', true);
            } else {
                addToCartBtn.show().prop('disabled', false);
            }
        });
        
        // 页面加载时初始化按钮状态（处理默认选中缺货变体的情况）
        $(document).ready(function() {
            const initialStockText = $('.woocommerce-variation-availability p.stock').text().trim();
            if (initialStockText === 'Out of stock') {
                addToCartBtn.hide().prop('disabled', true);
            }
        });
    });
    </script>
    <?php
}

方案2：使用jQuery contains()函数实现

如果坚持使用contains()检测文本，需在变体切换事件内动态检测，而非页面加载时静态获取：

add_action('wp_footer', 'outofstock_product_variation_js');
function outofstock_product_variation_js() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        const addToCartBtn = $('.add-to-cart-button');
        
        $('form.variations_form').on('show_variation', function() {
            // contains()大小写敏感，确保文本匹配
            const isOutOfStock = $('.woocommerce-variation-availability p.stock:contains("Out of stock")').length > 0;
            
            if (isOutOfStock) {
                addToCartBtn.hide().prop('disabled', true);
            } else {
                addToCartBtn.show().prop('disabled', false);
            }
        });
        
        // 初始化状态
        $(document).ready(function() {
            if ($('.woocommerce-variation-availability p.stock:contains("Out of stock")').length > 0) {
                addToCartBtn.hide().prop('disabled', true);
            }
        });
    });
    </script>
    <?php
}

关键改进点 #

• 动态检测库存状态：在show_variation事件内实时获取库存信息，而非页面加载时静态获取
• 双重禁用处理：同时隐藏按钮并设置disabled属性，确保用户无法点击
• 适配异常HTML结构：忽略错误的in-stock类，直接以文本内容作为判断依据
• 初始化状态处理：页面加载时自动检查默认选中变体的库存状态

注意事项 #

• 确认按钮选择器：如果add-to-cart-button不生效，替换为WooCommerce默认类名single_add_to_cart_button
• contains()大小写敏感：如果库存文本是小写（如"out of stock"），需对应修改匹配文本
• 检查主题结构：若主题修改了WooCommerce变体的HTML结构，需调整库存元素的选择器

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