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

Question

在 Woocommerce 中，我试图让自定义 div 容器在可变产品变体缺货但可延期交货时可见。

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

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

由于我对 php 和 woocommerce hooks 知之甚少，我想知道是否有人知道如何做到这一点。

这就是我所说的 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

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

用CSS/JS隐藏div（就像改变display属性）。
既然你在谈论一个 PHP 框架，你可以在某些情况下不显示 DIV。

我希望你不是在询问如何以这两种方式之一详细解决你的问题，因为那里有数十亿的解释和教程，因为隐藏了一个 html 元素在某些情况下，您只需使用 google 2 秒即可在万维网上学到最基本的知识之一 ;)

如果您有一个详细的问题，因为您所编写的代码由于某种原因无法正常工作，请提供代码并描述您已尝试执行的操作以及无法正常工作的操作。

Answer 2

已更新 - 以下内容将在产品变体缺货时添加自定义 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 文件。已测试并有效。

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

Display a custom div block for woocommerce out of stock product variations

php

wordpress

stock

woocommerce

hook-woocommerce