php - 彼此下方的 WooCommerce 选项卡

Question

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

Answer 1

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

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

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();
}

Answer 2

使用 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 3

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 4

您可以通过 woocommerce 提供的自定义挂钩来实现，您可以按照以下链接进行操作

您可以使用以下功能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>';
}