Woocommerce中的合并描述和附加信息选项卡

Question

我正在尝试将附加信息选项卡与woo commerce中的描述选项卡合并。

基本上，目的是在可能的2列布局中并排显示来自两个标签的信息，其中第一列显示描述，第二列显示附加信息。

这可以通过一段可以放在functions.php中的代码来实现。

谢谢

Answer 1

这是制作它的方法（代码评论很好）：

// Manipulating product tabs
add_filter('woocommerce_product_tabs', 'change_product_tab', 98);
function change_product_tab($tabs){
    global $product;

    // Save the tabs to keep
    $reviews = $tabs['reviews'];

    // Remove tabs
    unset($tabs['description']);
    unset($tabs['additional_information']);
    unset($tabs['reviews']);

    // Add a new tab
    $tabs['other_details'] = array(
        'title'     => __( 'Details', 'woocommerce' ),
        'priority'  => 10,
        'callback'  => 'other_details_tab_content'
    );

    // Set the good priority to existing "reviews" tab
    $reviews['priority'] = 20;

    // Add back "reviews" tab
    $tabs['reviews'] = $reviews;

    return $tabs;
}

// Tab content (two columns)
function other_details_tab_content() {
    global $product;

    $heading = esc_html( apply_filters( 'woocommerce_product_description_heading', __( 'Description', 'woocommerce' ) ) );
    $heading2 = esc_html( apply_filters( 'woocommerce_product_additional_information_heading', __( 'Additional information', 'woocommerce' ) ) );

    ?>
    <!-- Temporary styles (to be removed and inserted in the theme styles.css file) -->
    <style>
        .single-product .half-col{float:left; width:48%;}
        .single-product .half-col.first{margin-right:4%;}
        .single-product .half-col > h3{font-size:1.3em;}
    </style>

    <h2><?php _e("Product details", "woocommerce"); ?></h2>

    <!-- 1. Product description -->

    <div class="half-col first">

    <?php if ( $heading ) : ?>
      <h3><?php echo $heading; ?></h3>
    <?php endif; ?>

    <?php the_content(); ?>

    </div>

    <!-- 2. Product Additional information -->

    <div class="half-col last">

    <?php if ( $heading2 ) : ?>
    <h3><?php echo $heading2; ?></h3>
    <?php endif; ?>

    <?php do_action( 'woocommerce_product_additional_information', $product ); ?>

    </div>
    <?php
}

代码位于活动子主题（或活动主题）的function.php文件中。经过测试和工作。

Answer 2

如果您希望按顺序显示选项卡中的数据而不是上面由LoicTheAztec解释的两列格式，则可以使用另一个选项。下面是LoicTheAztec答案中代码的代码图

// Manipulating product tabs

add_filter('woocommerce_product_tabs', 'change_product_tab', 98);
function change_product_tab($tabs){
global $product;

// Save the tabs to keep
$reviews = $tabs['reviews'];

// Remove tabs
unset($tabs['description']);
unset($tabs['additional_information']);
unset($tabs['reviews']);

// Add a new tab
$tabs['other_details'] = array(
    'title'     => __( 'Details', 'woocommerce' ),
    'priority'  => 10,
    'callback'  => 'other_details_tab_content'
);

// Set the good priority to existing "reviews" tab
$reviews['priority'] = 20;

// Add back "reviews" tab
$tabs['reviews'] = $reviews;

return $tabs;
}

// Tab content
function other_details_tab_content() {
    global $product;

    $heading = esc_html( apply_filters( 'woocommerce_product_description_heading', __( 'Description', 'woocommerce' ) ) );
$heading2 = esc_html( apply_filters( 'woocommerce_product_additional_information_heading', __( 'Additional information', 'woocommerce' ) ) );

?>

<h2><?php _e("Product details", "woocommerce"); ?></h2>
    <?php echo "<br>"; ?>

<!-- 1. Product description -->

<?php if ( $heading ) : ?>
  <h3><?php echo $heading; ?></h3>
<?php endif; ?>

<?php
    the_content();
    echo "<br>";
?>


<!-- 2. Product Additional information -->

<?php if ( $heading2 ) : ?>
<h3><?php echo $heading2; ?></h3>
<?php endif; ?>

<?php do_action( 'woocommerce_product_additional_information', $product ); ?>

<?php
}

您也可以参考这里的链接：https://docs.woocommerce.com/document/editing-product-data-tabs/