Year End Sale -2o% Off On All Products - Coupon: FMADEC2017

Top 5 Programming Questions and Answers Regarding WooCommerce Custom Tabs Part - 1

Tabs on product pages is a key to improve the UI and presentation of eCommerce websites. But it has been seen that a lot of programmers are facing issues while adding tabs on product page. FMEAddons has decided to pick up 5 top questions and provide their solutions in this article. These solutions are provided by community members and not represent us. Five top questions regarding WooCommerce Custom tabs are given below with their best possible solutions.

Important Note:

These are the answers provided by the community and best rated by the community as well. 

Question No. 1

A user has standard accordion style WooCommerce website which displays sub-headers for the current category but hides the sub-headers of other non-active categories. He wants to change the style of active categories and leave the tabs of non-active categories exactly the same. When he applies this code, it affects all the categories.

.cat-item cat-item-17 current-cat cat-parent {
    color: #20dbfc!;
}

Answer

Do not include too many classes and apply the custom rule to only current class. Use this code

.current-cat {
    color: #20dbfc!;
}

Question No. 2

A user has a lot of tabs on product pages some includes PDF links and some tabs contains website links. He wants to find the PDF link within each tab and add the class pdf-icon to them. This class would have this CSS.

.pdf-icon::before {
  content: url(image.png) " ";
}

He wants to it with PHP or JavaScript

Answer

Basically, it assumes half as a URL and cycles through links on the page looking for the .pdf section. Apply this code.

<html>
<body>
<style type="text/css">
    .myclass { color: red; }
</style>   

<h2>Find PDF Links</h2>    
<ol>    
    <li><a href="page1.pdf">example1.pdf</a>   
    <li><a href="page1.pdf">example2.pdf</a>    
    <li><a href="page1.html">example3.html</a> 
    <li><a href="page1.pdf">example4.pdf</a> 
</ol>
    
<script type="text/javascript">
    
   var i, links = document.getElementsByTagName('a');
    
    for(i=0; i<links.length; i++) {
        if (links[i].href.match(/.pdf/ig)) links[i].className = 'myclass';
    }
    
</script>
    
</body>
</html> 

Question No. 3

A user wants to display attribute value in WooCommerce custom tab and the attribute name is a specification. He applied following code but failed.

<!-- language: lang-all -->
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
    // Adds the new tab 
    $tabs['test_tab'] = array(
        'title'    => __( 'Features', 'woocommerce' ),
        'priority' => 50,
        'callback' => 'woo_new_product_tab_content'
    );
    return $tabs;
}
function woo_new_product_tab_content() {
    // The new tab content
    $pa_value = get_post_meta( $product->id, 'pa_specification', true );
    echo $pa_value; 
}

Answer

Below is the right code to use.

function woo_new_product_tab_content() {
    // The new tab content    
    global $post; 

    $product_id = $post->ID;

    $product = new WC_Product( $product_id );

    $pa_value = $product->get_attribute('pa_specification'); 

    echo $pa_value; 

}

Question No. 4

A user wants to show product tabs in category page and he applied following code but failed to do that.

add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60 );

Answer

For this purpose, use action hook "woocommerce_after_shop_loop_item".

add_action('woocommerce_after_shop_loop_item', 'woocommerce_output_product_data_tabs', 20);

This code will work for you but the formatting is a mess. Add custom CSS make desired tab function.

Question No. 5

A user wants to add three custom tabs in WooCommerce products page such as attribute description, quantity, and other products. He applies the code but in output two tabs are shown and one tab named attribute description is not showing. Plus, quantity description tab is also not displaying its description. He has tried the various section of code to different locations but failed to do that. Additionally, he wants to remove existing tabs and add new tabs. He applied below code

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

}

He also edited as per LoicTheAztec reply to him. Below is his entire functions.php file. He tried it with ?> and without it at the bottom.

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

Answer:

You are using hook woocommerce_product_tabs 4 times. Use it for one time and merge 4 hooked functions in one. Use below code

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

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

Download WooCommerce Custom Tabs

woocommerce tabs

Leave a Reply