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

时间:2018-04-18 23:48:25

标签: php wordpress woocommerce tabs product

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

基本上,目的是在两列标签中并排显示两个标签的信息,其中第一列显示描述,第二列显示附加信息。

这可以通过一段可以放在functions.php。

中的代码来实现

由于

3 个答案:

答案 0 :(得分:3)

以下是制作的方法(代码评论很好)

// 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文件中。经过测试和工作。

enter image description here

答案 1 :(得分:0)

如果您希望按顺序显示选项卡中的数据,而不是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/

答案 2 :(得分:0)

我最终采取了一种略有不同的方法,基本上只是禁用了“附加详细信息”标签,然后将内容重新添加到产品的the_content(即普通的“描述”标签)。

// Remove Additional Info tab
add_filter('woocommerce_product_tabs', 'remove_tab_additional_info', 30);
function remove_tab_additional_info($tabs){
    unset( $tabs['additional_information'] );
    return $tabs;
}

// Add original Additional Info tab info to the end of the_content
add_filter('the_content','add_details_to_content', 10, 1);
function add_details_to_content($content){
    if ( is_product() ){
        global $product;
        $content = '<div class="product-description">'.$content.'</div>';

        ob_start();
        ?><div class="product-additional-info"><?php

        $heading = apply_filters( 'woocommerce_product_additional_information_heading', __( 'Additional information', 'woocommerce' ) );
        if ( !empty($heading) ) {
        ?>
            <h3><?php echo esc_html( $heading ); ?></h3>
        <?php }

        do_action( 'woocommerce_product_additional_information', $product );
        ?></div><?php
        $content .= ob_get_clean();
    }
    return $content;
}