php - 在同一选项卡中水平显示 WooCommerce 产品描述和附加信息

Question

我无法正确显示我的产品页面。

我希望尝试在我的产品页面上获得这样的结果。（同一选项卡中水平的描述和属性）

---

正如您在图片中看到的，描述位于左侧，属性显示在右侧。

在我的网站上，我目前已删除属性选项卡并将其嵌套在描述下方，在我的以下代码中使用此代码functions.php：

add_filter( 'woocommerce_product_tabs', 'exetera_custom_product_tabs', 98 );
function exetera_custom_product_tabs( $tabs ) {
        
    // Custom description callback.
    $tabs['description']['callback'] = function() {
        global $post, $product;


        // Display the content of the Description tab.
        the_content();


        // Display the heading and content of the Additional Information tab.

        echo '<h2>Specifications</h2>';

        do_action( 'woocommerce_product_additional_information', $product );
    };

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

    return $tabs;
}

只是无法弄清楚如何让它水平放置在彼此旁边。

任何帮助将不胜感激，在此先感谢！

标签： phpwordpresswoocommercetabs

Answer 1

您必须将选项卡的内容包装在 div 中，然后使用 CSS 对齐/设置样式。但是，这取决于主题，因此我的回答被简化为绝对基础。

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;

        echo '<div class="description left" style="float:left;width:49%;">';

        // Display the content of the Description tab.
        the_content();
        
        echo '</div>';

        // Display the heading and content of the Additional Information tab.

        echo '<div class="specifications right" style="float:right;width:49%;">';

        echo '<h2>Specifications</h2>';

        do_action( 'woocommerce_product_additional_information', $product );
        
        echo '</div>';
    };

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

    return $tabs;
}