显示用于 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 元素是最基本的之一只需使用谷歌 2 秒就可以在万维网上学到的东西；)

如果您有一个详细的问题，因为您所编码的内容由于某种原因不起作用，请提供代码并描述您尝试执行的操作以及无效的操作。