CODEWITHSUNDEEP
phpwordpresswoocommercehook-woocommerce
Sharique Anwer
Sharique Anwer

Reputation: 125

Add custom HTML in New Tab on Product Page - WooCommerce

I am trying to Add a new tab on single product page. My below codes works well:-

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

I want to insert some html data in the 'title' =>

For example: 

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

The above codes outputs the full html source instead the image.

Any help will be really appreciated.

Thanks

Upvotes: 1

Views: 2657

Answers (2)

slpstn
slpstn

Reputation: 136

I know that this thread is old, but I have had the same problem. You can solve it with a custom filter for the tab title.

So you have this:

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

Now you got a tab called "desc_tab". The problem is that WooCommerce does not escape the HTML part of it, but you can use a filter, so WooCommerce translates the tab title to 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;
}

You have to pay attention to the title of the filter. It is a composition of 'woocommerce_' + the tab title + '_tab_title'.

I hope

Upvotes: 0

Therichpost
Therichpost

Reputation: 1815

Here you can:

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

Upvotes: 1

Related Questions