显示woocommerce缺货产品变体的自定义div块

Question

在Woocommerce中，我试图使自定义的div容器在可变产品的变体缺货时可用，但可以按需提供。

因此默认情况下它是隐藏的。但是，当客户选择了缺货但可以延期交货的变体时，它将显示我编写的div块。

我已将此div块放置在产品的简短说明中，因为这是我希望在缺货时可以看到它的地方。或者至少，我希望将其放在产品简短说明下的变体形式上方。

由于我对php和woocommerce钩子几乎一无所知，所以我想知道是否有人知道该怎么做。

这是我正在谈论的div容器代码。

<div class="mto-cont">
<div class="col-xs-6 made-to-order"><a href="#">Made to Order</a></div>
<div class="col-xs-6">Production time: <span style="color: #000;">2 - 4 weeks</span></div>

Answer 1

已更新-当缺货时，以下内容将添加自定义html显示：

add_filter( 'woocommerce_available_variation', 'custom_outofstock_variation_addition', 10, 3 );
function custom_outofstock_variation_addition( $data, $product, $variation ) {
    if( $variation->is_on_backorder() ){
        $data['availability_html'] .= '<div class="mto-cont">
        <div class="col-xs-6 made-to-order"><a href="#">Made to Order</a></div>
        <div class="col-xs-6">Production time: <span style="color: #000;">2 - 4 weeks</span></div>
        </div>';
    }
    return $data;
}

代码进入您的活动子主题（或活动主题）的function.php文件中。经过测试，可以正常工作。

Answer 2

根据您的软件和您想做什么，有两种方法：

1. 使用CSS / JS隐藏div（例如更改display属性）。

2. 由于您正在谈论的是PHP框架，因此您只能在特定条件下不显示DIV。

我希望您不要问如何用这两种方式中的一种来详细解决问题，因为那里有数十亿个解释和教程，因为在某些情况下隐藏html元素是其中之一。只需使用google 2秒钟，您就可以在万维网上学习到的最基本的内容；）

如果您有一个详细的问题，因为由于某些原因您编写的代码不起作用，请提供代码并描述您尝试做的事情和不起作用的事情。