WooCommerce选项卡彼此下面

Question

我正在寻找一种方法，将WooCommerce选项卡和内容放在块中。我在示例中添加了图片。有人可以帮我吗？

Answer 1

您可以通过woocommerce提供的自定义钩子来实现，您可以在下面的link

中进行操作

您可以在functions.php中使用以下功能来更改标签的结构

/**
 * Customize product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {

    $tabs['description']['callback'] = 'woo_custom_description_tab_content';    // Custom description callback

    return $tabs;
}

function woo_custom_description_tab_content() {
    echo '<h2>Custom Description</h2>';
    echo '<p>Here\'s a custom description</p>';
}

Answer 2

if ( ! function_exists( 'woocommerce_product_description_tab' ) ) {

    /**
     * Output the description tab content.
     */
    function woocommerce_product_description_tab() {
        wc_get_template( 'single-product/tabs/description.php' );
    }
}
if ( ! function_exists( 'woocommerce_product_additional_information_tab' ) ) {

    /**
     * Output the attributes tab content.
     */
    function woocommerce_product_additional_information_tab() {
        wc_get_template( 'single-product/tabs/additional-information.php' );
    }
}

这就是渲染这些块的方式。

请复制single-product / tabs / description.php到您的活动主题/woocommerce/single-product/tabs/description.php

并将single-product / tabs / additional-information.php添加到活动主题/woocommerce/single-product/tabs/additional-information.php

根据您的需求进行修改

Answer 3

以Storefront为主题，我仅使用以下CSS来获得全角水平标签：

/* TABS ************************* */
.woocommerce-tabs .panel h2:first-of-type {
    display: none;
}
@media (min-width:768px) {
    .woocommerce-tabs ul.tabs {
    width: 100%;
    float: none;
    margin-right: 1.8823529412%;
    }
    .woocommerce-tabs .panel {
    width: 100%;
    float: none;
    }
}

Answer 4

试试这个PHP代码段–它会删除选项卡，并调用每个模板部分以将它们显示在堆栈中。以下代码适用于“说明”和“其他信息”标签，您可能需要对其进行一些修改，以包括所有标签。

将以下代码粘贴到functions.php中，或使用Code Snippets Wordpress Plugin添加以下代码：

add_action( 'after_setup_theme','db_stack_product_tabs' );

function db_stack_product_tabs(){ 
    // Remove product tabs
    remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs', 10 ); 
    // Get tab content template parts
    add_action('woocommerce_after_single_product_summary','db_get_tab_template_parts', 10 );
}

function db_get_tab_template_parts() {
    // Include required template parts
    ?>
    <div class="woo-description-section"><?php wc_get_template( 'single-product/tabs/description.php' ); ?></div>
    <div class="woo-information-section"><?php wc_get_template( 'single-product/tabs/additional-information.php' ); ?></div>
    <?php comments_template();
}