Php Woocommerce-大规模产品说明和；属性响应

希望有人能帮忙：）

在我的产品描述中，我设法（借助一些强大的帮助）将我的产品描述和属性水平地显示在一起。然而，现在我正在尝试启用它，以便在移动设备上它们可以垂直缩放和显示，而不是挤在一起

根本不熟悉响应式css，因此非常感谢您的帮助

这是我迄今为止（在我的functions.php中）的代码：

add_filter（'woocommerce_product_tabs'，'exetera_custom_product_tabs'，98,1）；
函数exetera_自定义_产品_选项卡（$tabs）{
//自定义描述回调。
$tabs['description']['callback']=function（）{
全球$post$product；
回声'；
//显示“说明”选项卡的内容。
_内容（）；
回声'；
//显示“附加信息”选项卡的标题和内容。
回声'；
回声“规范”；
do_action（‘woocommerce_product_additional_information’，$product）；
回声'；
};
//删除“附加信息”选项卡。
未设置（$tabs[‘附加信息’）；
返回$tabs；

---

}

我们需要用容器中的描述包装这些块，并为其设置flex属性。使用flex，可以自定义列或左右显示

HTML:

UPD：您的代码如下所示：

add_filter( 'woocommerce_product_tabs', 'exetera_custom_product_tabs', 98, 1 );

function exetera_custom_product_tabs( $tabs ) { 

    // Custom description callback.
    $tabs['description']['callback'] = function() {
    
        global $post, $product;
    
        //Start of flex container
        echo '<div class="desc-container">';

        echo '<div class="description">';
        the_content();
        echo '</div>';

        echo '<div class="specifications">';
        echo '<h2>Specifications</h2>';
        do_action( 'woocommerce_product_additional_information', $product );
        echo '</div>';

        //End of flex container
        echo '</div>';
    };

    // Remove the additional information tab.
    unset( $tabs['additional_information'] );

    return $tabs;
}

add_filter（'woocommerce_product_tabs'，'exetera_custom_product_tabs'，98,1）；
函数exetera_自定义_产品_选项卡（$tabs）{
//自定义描述回调。
$tabs['description']['callback']=function（）{
全球$post$product；
//flex容器的开始
回声'；
回声'；
_内容（）；
回声'；
回声'；
回声“规范”；
do_action（‘woocommerce_product_additional_information’，$product）；
回声'；
//柔性容器末端
回声'；
};
//删除“附加信息”选项卡。
未设置（$tabs[‘附加信息’）；
返回$tabs；
}

同时也不要忘记添加CSS规则

---

您可以尝试在此处找到其他信息：

很抱歉，这让我很痛苦，但我不确定如何用我已有的代码实现这一点？我尝试将它添加到我的自定义css和/或functions.php中，但没有成功。。。我只知道非常基本的html和css。@KaiCraig我已经更新了代码，并添加了您的修改模式。

<div class="desc-container">
    <div class="description left"></div>
    <div class="specifications right"></div>
</div>

.desc-container {
  display:flex;
}

.description, .specifications {
  flex: 50%;
}

add_filter( 'woocommerce_product_tabs', 'exetera_custom_product_tabs', 98, 1 );

function exetera_custom_product_tabs( $tabs ) { 

    // Custom description callback.
    $tabs['description']['callback'] = function() {
    
        global $post, $product;
    
        //Start of flex container
        echo '<div class="desc-container">';

        echo '<div class="description">';
        the_content();
        echo '</div>';

        echo '<div class="specifications">';
        echo '<h2>Specifications</h2>';
        do_action( 'woocommerce_product_additional_information', $product );
        echo '</div>';

        //End of flex container
        echo '</div>';
    };

    // Remove the additional information tab.
    unset( $tabs['additional_information'] );

    return $tabs;
}