顯示用於 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 秒就可以在萬維網上學到的東西；)

如果您有一個詳細的問題，因為您所編碼的內容由於某種原因不起作用，請提供代碼並描述您嘗試執行的操作以及無效的操作。