彼此下方的 WooCommerce 选项卡答案

【问题标题】：WooCommerce tabs underneath each other彼此下方的 WooCommerce 选项卡
【发布时间】：2019-07-02 14:02:21
【问题描述】：

我正在寻找一种将 WooCommerce 选项卡和内容按块放置在彼此下方的方法。我已经添加了带有示例的图像。谁能帮帮我？

【问题讨论】：

标签： php css wordpress woocommerce woocommerce-theming

【解决方案1】：

试试这个 PHP sn-p - 它会删除标签并调用每个模板部分以将它们显示在堆栈中。下面的代码适用于描述和附加信息选项卡，您可能需要稍微修改它以包含所有选项卡。

将以下代码粘贴到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();
}

【讨论】：

【解决方案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

根据需要修改

【讨论】：

【解决方案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;
    }
}

【讨论】：

或者你可以试试这个插件：WooCommerce Expand Tabs

【解决方案4】：

你可以通过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>';
}

【讨论】：

谢谢，但我不是在寻找添加新自定义标签的方法。我想把所有现有的标签放在一起。
功能没有添加新标签，它改变了描述标签的内容
我也不打算更改内容。我希望我现有的选项卡在我的帖子图片中显示在彼此下方并单独显示。
那么您必须直接在模板文件中进行更改，还必须为每个 div 相应地获取内容
不回答问题