向WooCommerce单个产品页面添加多个选项卡


Adding multiple tabs to WooCommerce single product pages

我试图添加三个自定义选项卡到WooCommerce。我有下面的代码,其中两个显示,但由于某种原因,属性描述选项卡没有显示在页面上。不仅数量定价选项卡没有显示其描述。我试图将代码的不同部分移动到不同的位置,我检查了错误或缺失部分的代码。这是我能找到的最接近的了。

我的过程基本上是删除现有的我不想要的选项卡,然后按我想要它们出现的顺序添加新选项卡。

我有一种感觉,我错过了什么。

你可以在这里看到网站:http://demo.bergdahl.com/product/6-oz-catridge/

下面是我使用的代码:

// WooCommerce Tabs

// REMOVE EXISTING TABS
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );          // Remove the description tab
    // unset( $tabs['reviews'] );           // Remove the reviews tab
    unset( $tabs['additional_information'] );   // Remove the additional information tab
    return $tabs;
}


// ADD ATTRIBUTE DESCRIPTION TAB
add_filter( 'woocommerce_product_tabs', 'woo_attrib_desc_tab' );
function woo_attrib_desc_tab( $tabs ) {
    // Adds the Attribute Description tab
    $tabs['attrib_desc_tab'] = array(
        'title'     => __( 'Desc', 'woocommerce' ),
        'priority'  => 100,
        'callback'  => 'woo_attrib_desc_tab_content'
    );
    return $tabs;
}

// ADD QUANTITY PRICING TAB
add_filter( 'woocommerce_product_tabs', 'woo_qty_pricing_tab' );
function woo_qty_pricing_tab( $tabs ) {
    // Adds the qty pricing  tab
    $tabs['qty_pricing_tab'] = array(
        'title'     => __( 'Quantity Pricing', 'woocommerce' ),
        'priority'  => 110,
        'callback'  => 'woo_qty_pricing_tab_content'
    );
    return $tabs;
}
// ADD OTHER PRODUCTS TAB
add_filter( 'woocommerce_product_tabs', 'woo_other_products_tab' );
function woo_other_products_tab( $tabs ) {
    // Adds the other products tab
    $tabs['other_products_tab'] = array(
        'title'     => __( 'Other Products', 'woocommerce' ),
        'priority'  => 120,
        'callback'  => 'woo_other_products_tab_content'
    );
    return $tabs;
}
// ADD CUSTOM TAB DESCRIPTIONS
function woo_attrib_desc_tab_content() {
    // The attribute description tab content
    echo '<h2>Description</h2>';
    echo '<p>Custom description tab.</p>';
}
function woo_qty_pricing_tab_content() {
    // The qty pricing tab content
    echo '<h2>Quantity Pricing</h2>';
    echo '<p>Here''s your quantity pricing tab.</p>';   
}
function woo_other_products_tab_content() {
    // The other products tab content
    echo '<h2>Other Products</h2>';
    echo '<p>Here''s your other products tab.</p>';
}

编辑每个回复从LoicTheAztec下面,这是我的整个函数。php文件。我在底部有和没有?>的情况下尝试了它:

<?php
add_theme_support( 'builder-3.0' );
add_theme_support( 'builder-responsive' );

function register_my_fonts() {
    wp_register_style('googleFonts-OpenSans', '//fonts.googleapis.com/css?family=Open+Sans:400,300,700');
    wp_enqueue_style( 'googleFonts-OpenSans');
}

add_action('wp_enqueue_scripts', 'register_my_fonts');


function sc_replacecolon( $content ){ return str_replace( '[sc:', '[sc name=', $content ); }
add_filter( 'the_content', 'sc_replacecolon', 5 );

/* WOOCOMMERCE */
add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs', 100, 1 );
function woo_custom_product_tabs( $tabs ) {
    // 1) Removing tabs
    unset( $tabs['description'] );              // Remove the description tab
    // unset( $tabs['reviews'] );               // Remove the reviews tab
    unset( $tabs['additional_information'] );   // Remove the additional information tab

    // 2 Adding new tabs
    //Attribute Description tab
    $tabs['attrib_desc_tab'] = array(
        'title'     => __( 'Desc', 'woocommerce' ),
        'priority'  => 100,
        'callback'  => 'woo_attrib_desc_tab_content'
    );
    // Adds the qty pricing  tab
    $tabs['qty_pricing_tab'] = array(
        'title'     => __( 'Quantity Pricing', 'woocommerce' ),
        'priority'  => 110,
        'callback'  => 'woo_qty_pricing_tab_content'
    );
    // Adds the other products tab
    $tabs['other_products_tab'] = array(
        'title'     => __( 'Other Products', 'woocommerce' ),
        'priority'  => 120,
        'callback'  => 'woo_other_products_tab_content'
    );
    return $tabs;
}
// New Tab contents
function woo_attrib_desc_tab_content() {
    // The attribute description tab content
    echo '<h2>Description</h2>';
    echo '<p>Custom description tab.</p>';
}
function woo_qty_pricing_tab_content() {
    // The qty pricing tab content
    echo '<h2>Quantity Pricing</h2>';
    echo '<p>Here''s your quantity pricing tab.</p>';
}
function woo_other_products_tab_content() {
    // The other products tab content
    echo '<h2>Other Products</h2>';
    echo '<p>Here''s your other products tab.</p>';
}
?>

当您使用4次相同的钩子woocommerce_product_tabs时,您的问题来自于第一个钩子的最高优先级。相反,您应该只使用一次,将4个挂钩函数合并为一个。

这是经过功能测试的代码,稍作改动:

add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs' );
function woo_custom_product_tabs( $tabs ) {
    // 1) Removing tabs
    unset( $tabs['description'] );              // Remove the description tab
    // unset( $tabs['reviews'] );               // Remove the reviews tab
    unset( $tabs['additional_information'] );   // Remove the additional information tab

    // 2 Adding new tabs and set the right order
    //Attribute Description tab
    $tabs['attrib_desc_tab'] = array(
        'title'     => __( 'Desc', 'woocommerce' ),
        'priority'  => 100,
        'callback'  => 'woo_attrib_desc_tab_content'
    );
    // Adds the qty pricing  tab
    $tabs['qty_pricing_tab'] = array(
        'title'     => __( 'Quantity Pricing', 'woocommerce' ),
        'priority'  => 110,
        'callback'  => 'woo_qty_pricing_tab_content'
    );
    // Adds the other products tab
    $tabs['other_products_tab'] = array(
        'title'     => __( 'Other Products', 'woocommerce' ),
        'priority'  => 120,
        'callback'  => 'woo_other_products_tab_content'
    );
    return $tabs;
}
// New Tab contents
function woo_attrib_desc_tab_content() {
    // The attribute description tab content
    echo '<h2>Description</h2>';
    echo '<p>Custom description tab.</p>';
}
function woo_qty_pricing_tab_content() {
    // The qty pricing tab content
    echo '<h2>Quantity Pricing</h2>';
    echo '<p>Here''s your quantity pricing tab.</p>';
}
function woo_other_products_tab_content() {
    // The other products tab content
    echo '<h2>Other Products</h2>';
    echo '<p>Here''s your other products tab.</p>';
}

此代码位于您的活动子主题(或主题)的function.php文件或任何插件文件中。

已测试并正常工作。


在同一个钩子中,你可以:
  • 删除标签
  • 添加标签
  • 重新排序标签

相关官方文档:编辑产品数据选项卡

唯一增加的是在添加选项卡之前检查内容是否存在。我只是用'if'语句包装了每个新数组。

if (!empty(get_the_content())) {
    $tabs['tab'] = array(
        'title'     => __( 'Tab Title', 'woocommerce' ),
        'priority'  => 100,
        'callback'  => 'woo_tab_content'
    );
}
function my_simple_custom_product_tab( $tabs ) {
    $tabs['my_custom_tab'] = array(
        'title'    => __( 'Custom Tab', 'textdomain' ),
        'callback' => 'my_simple_custom_tab_content',
        'priority' => 50,
    );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'my_simple_custom_product_tab' );
/**
 * Function that displays output for the shipping tab.
 */
function my_simple_custom_tab_content( $slug, $tab ) {
    ?><h2><?php echo wp_kses_post( $tab['title'] ); ?></h2>
    <p>Tab Content</p><?php
}