在产品页面的新标签中添加自定义 HTML - WooCommerce答案

【问题标题】：Add custom HTML in New Tab on Product Page - WooCommerce在产品页面的新标签中添加自定义 HTML - WooCommerce
【发布时间】：2018-10-29 19:13:13
【问题描述】：

我正在尝试在单个产品页面上添加新标签。我的以下代码运行良好：-

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
    $tabs['desc_tab'] = array(
        'title'     => __( 'Additional Information', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content'
    );
}

我想在'title'中插入一些html数据=>

例如：

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
    function woo_new_product_tab( $tabs ) {
    // Adds the new tab
        $tabs['desc_tab'] = array(
            'title'     => __( 'Additional Information <img src="'.$image.'"/>', 'woocommerce' ),
            'priority'  => 50,
            'callback'  => 'woo_new_product_tab_content'
        );
    }

以上代码输出的是完整的 html 源代码而不是图像。

任何帮助将不胜感激。

谢谢

【问题讨论】：

如果您查看wp-content\plugins\woocommerce\templates\single-product\tabs\tabs.php 第 37 行，esc_html() 负责将 HTML 打印为选项卡标题中的文本。所以我建议你使用css添加图像。 可能有一种方法可以仅使用 PHP 来实现，但我不知道
嗨@RaunakGupta 感谢cmets。我有无法在 css 中添加的动态数据。喜欢
您也可以使用wp_head action 来拥有动态css

标签： php wordpress woocommerce hook-woocommerce

【解决方案1】：

在这里你可以：

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
 function woo_new_product_tab( $tabs ) {
 // Adds the new tab
 $tabs['desc_tab'] = array(
    'title'     => __( 'Additional Information', 'woocommerce' ),
    'priority'  => 50,
    'callback'  => 'woo_new_product_tab_content'
);
}


function woo_new_product_tab_content() {
 // The new tab content
 echo '<p>Lorem Ipsum</p>';
}

【讨论】：

嗨，阿杰，感谢您的回复。但我在内容中不需要它。我需要它在标签标题上。
我们可以用 jquery 做到这一点

【解决方案2】：

我知道这个帖子很旧，但我遇到了同样的问题。您可以使用选项卡标题的自定义过滤器来解决它。

所以你有这个：

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
    $tabs['desc_tab'] = array(
        'title'     => __( 'Additional Information <img src="'.$image.'"/>', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content'
    );
}

现在您有了一个名为“desc_tab”的选项卡。问题是 WooCommerce 不会转义其中的 HTML 部分，但您可以使用过滤器，因此 WooCommerce 将选项卡标题转换为 HTML：

add_filter('woocommerce_product_desc_tab_tab_title', 'decode_html_tab', 10, 2);
function decode_html_tab($title, $key) {
    $title = html_entity_decode( $title, ENT_QUOTES );
    return $title;
}

您必须注意过滤器的标题。它是“woocommerce_”+标签标题+“_tab_title”的组合。

希望

【讨论】：