WooCommerce：根据库存情况显示或隐藏“缺货”按钮

Question

我有一个按钮，该按钮应该根据产品或其变体之一（如果是可变产品）是否缺货而显示。如果有库存，请勿展示。

玩过很多脚本，但似乎没有什么是坚持的。这是我目前所在的位置：

示例：https://bplsource.com/product/techniglove-12%e2%80%b3-niile-usp-797-white-powder-free/

HTML：

<div class=\"woocommerce-variation-add-to-cart variations_button\">\n\t<p class=\"stock out-of-stock\">Out of stock, Can be backordered<\/p>

PHP 与 JavaScript：

// Add Custom Content Before 'Add To Cart' Button On Product Page
function my_content() {
    global $product;
    
    // Check if the product or any of its variations is out of stock
    $is_out_of_stock = false;
    
    if ($product->get_manage_stock() && $product->get_stock_quantity() <= 0) {
        $is_out_of_stock = true;
    }
    
    if ($product->is_type('variable') && !$is_out_of_stock) {
        foreach ($product->get_children() as $variation_id) {
            $variation = wc_get_product($variation_id);
            if ($variation && $variation->get_manage_stock() && $variation->get_stock_quantity() <= 0) {
                $is_out_of_stock = true;
                break;
            }
        }
    }
    
    // Display the out-of-stock message if needed
    if ($is_out_of_stock) {
        echo '<p class="stock out-of-stock">Out of stock, Can be backordered</p>';
    }
    
    // Enqueue JavaScript to dynamically show or hide the out-of-stock message
    ?>
    <script>
        jQuery(function($) {
            var isOutOfStock = <?php echo $is_out_of_stock ? 'true' : 'false'; ?>;
            if (!isOutOfStock) {
                $('.stock.out-of-stock').hide();
            }
        });
    </script>
    <?php
}

// Add the action hook only once
add_action('woocommerce_before_add_to_cart_button', 'my_content');

Answer 1

解决方案1：-

您可以简单地使用 CSS 来实现此目的。

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled .stock.out-of-stock {
    display: block;
}

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled .stock.out-of-stock {
    display: none;
}

如果产品缺货，此 CSS 规则将隐藏数量选择器和添加到购物车按钮。

解决方案2：-

您直接“入队”的 JavaScript 将在触发“Ready”事件后添加到 DOM 中。所以你的函数永远不会运行，因为它正在监听就绪触发器。

相反，您需要按如下方式更新脚本：-

<script>
    var isOutOfStock = <?php echo $is_out_of_stock ? 'true' : 'false'; ?>;
    if (!isOutOfStock) {
        $('.stock.out-of-stock').hide();
    }
</script>