首页 > 解决方案 > Adding dynamic custom tab for WooCommerce products

问题描述

I'm looking for a solution to add a custom tab for my product page in WooCommerce. I found already some solution like this code snippet below. But all that is for static contents. Is it possible to create a custom tab for product pages and where I can set the content individually in the admin product page? I know that there are plugins for that, but I'm trying to find a solution with using a plugin.

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>';
}

标签: phpwordpresswoocommerceproducthook-woocommerce

解决方案


我搜索和搜索,直到找到一些包含该“回调”函数中的变量的示例 - 这是最干净的示例

/********************************************************
**  Remove, Create new product tabs and Prioritize
********************************************************/
add_filter( 'woocommerce_product_tabs', 'sgx_recreate_product_tabs', 98 );
function sgx_recreate_product_tabs( $tabs ) {

    global $product;

    $productabs = get_field('prodtabs', $product->get_id());

    unset( $tabs['description'] );          // Remove description tab
    unset( $tabs['additional_information'] );   // Remove additional tab
    $tabs['reviews']['priority'] = 50;          // push reviews priority back


    // loop through tabs created using ACF in this product backend.
    // i created a repeater with 2 fields - tabtitle & tabtxt
    if( !empty($productabs['tabs']) ) {
        $tabCounter = 1;

        foreach($productabs['tabs'] as $ptab) {
            $tabs['tab'.$tabCounter] = array(
                'title'     => $ptab['tabtitle'],
                'text'      => $ptab['tabtxt'],
                'priority'  => $tabCounter,
                'callback'  => 'sgx_custom_productab'
            );

            $tabCounter++;
        }
    }

    return $tabs;
}


    function sgx_custom_productab($slug, $tab) {
        echo ( !empty($tab['text']) ? $tab['text'] : '' );
    }

说明:
首先,我使用 ACF 在 wp 后端创建了一些选项卡......现在我想动态添加这些选项卡,但回调函数不是动态的......

但是,这是一些(显然)我可以使用的变量,所以我只是将我需要并完成的数据添加到 $tab 数组(在第一个函数中)。


推荐阅读