Skip to content

How to add custom additional tabs to woo-commerce product page using code

Copy of custom post type

Now you can add custom tabs to your woo-commerce product page using the code below

Scenario: you have some products that have some additional attributes or data that is different from product description. so, you may need to add additional tab to your woo commerce product page.

Also Read: How to increase max upload file size in WordPress we have created this article for you information

Adding Custom Tabs To Product Pages.

Step 1 : Create your Custom fields that you want.
Step 2: Add data into the fields you just created.
Step 3: Copy the code below and add it to your functions.php.

Note: specs_tab,warranty_tab,how_to_install_tab are my custom fields that are responsible for the tabs i wanted to show.

/**
 * Add your custom product tabs
 **/

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

function woo_new_product_tab( $tabs ) {
    
     
    global $product;
    // check if the product has the custom field set
    
    if( $product->get_meta( 'specs_tab' ) ) {
        // Adds the new tab
        $tabs['specs'] = array(
            'title'     => __( 'Specifications', 'woocommerce' ),
            'priority'  => 50,
            'callback'  => 'woo_new_product_tab_content'
        );
    }
        if( $product->get_meta( 'warranty_tab' ) ) {
        // Adds the new tab
        $tabs['warranty'] = array(
            'title'     => __( 'Warranty', 'woocommerce' ),
            'priority'  => 60,
            'callback'  => 'woo_new_product_tab_content_warranty'
        );
    }
      if( $product->get_meta( 'how_to_install_tab' ) ) {
        // Adds the new tab
        $tabs['howtoinstall'] = array(
            'title'     => __( 'How to Install', 'woocommerce' ),
            'priority'  => 70,
            'callback'  => 'woo_new_product_tab_content_install'
        );
    }
    
    return $tabs;
}

/**
 * Custom new product tab content
 **/
function woo_new_product_tab_content() {
    
    global $product;
    $specification = $product->get_meta( 'specs_tab' );
    // The new tab content
    echo '<h2>Specifications</h2>';
    echo '<p>' . $specification .'</p>';
}

function woo_new_product_tab_content_warranty() {
    global $product;
    $warranty = $product->get_meta( 'warranty_tab' );
    // The new tab content
    echo '<h2>Warranty</h2>';
    echo '<p>' . $warranty .'</p>';
}

function woo_new_product_tab_content_install() {
    global $product;
    $install = $product->get_meta( 'how_to_install_tab' );
    // The new tab content
    echo '<h2>How to Install </h2>';
    echo '<p>' . $install .'</p>';
}

Thats all! you have added your custom product tabs to your woo commerce product page.

Scan the code