1285934434_WordPress

Add Custom Tabs For Product In Woocommerce

Hello Friends!!!

I am back after long long time. I know its too long time to come back in blogging again. Actually I was busy with some other stuffs. But I have decided to share my experiences again.

Today I have one new thing which I want to share with you. Recently I had done one project in which client’s requirement is to add 3 new custom tabs on product page. Normally there is reviews tab is coming by default. But client wants 3 new tabs called DESCRIPTION, COMPOSITION, DIRECTIONS.

After long research, I found one code which I want to share with you guys. But my problem was still same because I want three tabs. So from that code I have created 3 custom tab functions and implemented in site.

After implementing, as usual I got some issues like data is not stored in db. So after long work in the tabs, I have make them working.

/**
 * Process meta
 *
 * Processes the custom tab options when a post is saved
 */
function process_product_meta_custom_tab( $post_id ) {
        update_post_meta( $post_id, 'custom_tab_enabled', ( isset($_POST['custom_tab_enabled']) && $_POST['custom_tab_enabled'] ) ? 'yes' : 'no' );
        update_post_meta( $post_id, 'custom_tab_title', $_POST['custom_tab_title']);
        update_post_meta( $post_id, 'custom_tab_content', $_POST['custom_tab_content']);
}
add_action('woocommerce_process_product_meta', 'process_product_meta_custom_tab', 10, 2);
 
 
/**
 * Display Tab
 *
 * Display Custom Tab on Frontend of Website for WooCommerce 2.0
 */
 
add_filter( 'woocommerce_product_tabs', 'woocommerce_product_custom_tab' );
 
 
        function woocommerce_product_custom_tab( $tabs ) {
                global $post, $product;
 
                $custom_tab_options = array(
                        'enabled' => get_post_meta($post->ID, 'custom_tab_enabled', true),
                        'title' => get_post_meta($post->ID, 'custom_tab_title', true),
                        'content' => get_post_meta($post->ID, 'custom_tab_content', true),                     
                );
               
                        if ( $custom_tab_options['enabled'] != 'no' ){
                                $tabs['custom-tab-first'] = array(
                                        'title'    => $custom_tab_options['title'],
                                        'priority' => 25,
                                        'callback' => 'custom_product_tabs_panel_content',                                     
                                        'content'  => $custom_tab_options['content']
                                );
                        }
 
                return $tabs;
        }
 
        /**
         * Render the custom product tab panel content for the callback 'custom_product_tabs_panel_content'
         */
   function custom_product_tabs_panel_content( $key, $custom_tab_options ) {
                echo '<h2>' . $custom_tab_options['title'] . '</h2>';
                echo $custom_tab_options['content'];
 
        }
 
 
function custom_tab_options_tab_spec() {
?>
        <li class="custom_tab3"><a href="#custom_tab_data3"><?php _e('DESCRIPTION', 'woothemes'); ?></a></li>
<?php
}
add_action('woocommerce_product_write_panel_tabs', 'custom_tab_options_tab_spec');
 
 
/**
 * Custom Tab Options
 *
 * Provides the input fields and add/remove buttons for custom tabs on the single product page.
 */
function custom_tab_options_spec() {
        global $post;
       
        $custom_tab_options_spec = array(
                'titlec' => get_post_meta($post->ID, 'custom_tab_title_spec', true),
                'contentc' => get_post_meta($post->ID, 'custom_tab_content_spec', true),
        );
       
?>
        <div id="custom_tab_data3" class="panel woocommerce_options_panel">
                <div class="options_group">
                        <p class="form-field">
                                <?php woocommerce_wp_checkbox( array( 'id' => 'custom_tab_enabled_spec', 'label' => __('Enable Custom Tab?', 'woothemes'), 'description' => __('Enable this option to enable the custom tab on the frontend.', 'woothemes') ) ); ?>
                        </p>
                </div>
               
                <div class="options_group custom_tab_options">                                                                         
                        <p class="form-field">
                                <label><?php _e('Custom Tab Title:', 'woothemes'); ?></label>
                                <input type="text" size="5" name="custom_tab_title_spec" value="<?php echo @$custom_tab_options_spec['titlec']; ?>" placeholder="<?php _e('Enter your custom tab title', 'woothemes'); ?>" />
                        </p>
                       
                        <p class="form-field">
                                <?php _e('Custom Tab Content:', 'woothemes'); ?>
                </p>
                       
                        <table class="form-table">
                                <tr>
                                        <td>
<?php
                $settings = array(
                                                'text_area_name'=> 'custom_tab_content_spec',
                                                'quicktags'     => true,
                                                'tinymce'               => true,
                                                'media_butons'  => false,
                                                'textarea_rows' => 98,
                                                'editor_class'  => 'contra',
                                                'editor_css'    => '<style>#wp-custom_tab_content_spec-editor-container .wp-editor-area{height:250px; width:100%;} #custom_tab_data3 .quicktags-toolbar input {width:auto;}</style>'
                                                );
                                               
                $id = 'custom_tab_content_spec';
 
 wp_editor($custom_tab_options_spec['contentc'],$id,$settings);
 
 
 ?> 
 
                                        </td>
                                </tr>  
                        </table>
        </div> 
        </div>
<?php
}
add_action('woocommerce_product_write_panels', 'custom_tab_options_spec');

/*************/






function custom_tab_options_tab() {
?>
        <li class="custom_tab"><a href="#custom_tab_data"><?php _e('COMPOSITION', 'woothemes'); ?></a></li>
<?php
}
add_action('woocommerce_product_write_panel_tabs', 'custom_tab_options_tab');
 
 
/**
 * Custom Tab Options
 *
 * Provides the input fields and add/remove buttons for custom tabs on the single product page.
 */
function custom_tab_options() {
        global $post;
       
        $custom_tab_options = array(
                'title' => get_post_meta($post->ID, 'custom_tab_title', true),
                'content' => get_post_meta($post->ID, 'custom_tab_content', true),
        );
       
?>
        <div id="custom_tab_data" class="panel woocommerce_options_panel">
                <div class="options_group">
                        <p class="form-field">
                                <?php woocommerce_wp_checkbox( array( 'id' => 'custom_tab_enabled', 'label' => __('Enable Custom Tab?', 'woothemes'), 'description' => __('Enable this option to enable the custom tab on the frontend.', 'woothemes') ) ); ?>
                        </p>
                </div>
               
                <div class="options_group custom_tab_options">                                                                         
                        <p class="form-field">
                                <label><?php _e('Custom Tab Title:', 'woothemes'); ?></label>
                                <input type="text" size="5" name="custom_tab_title" value="<?php echo @$custom_tab_options['title']; ?>" placeholder="<?php _e('Enter your custom tab title', 'woothemes'); ?>" />
                        </p>
                       
                        <p class="form-field">
                                <?php _e('Custom Tab Content:', 'woothemes'); ?>
                </p>
                       
                        <table class="form-table">
                                <tr>
                                        <td>
                                                <textarea class="theEditor" rows="3" cols="90" name="custom_tab_content" placeholder="<?php _e('Enter your custom tab content', 'woothemes'); ?>"><?php echo @$custom_tab_options['content']; ?></textarea>
                                        </td>
                                </tr>  
                        </table>
        </div> 
        </div>
<?php
}
add_action('woocommerce_product_write_panels', 'custom_tab_options');
 

 
 
/**
 * Process meta
 *
 * Processes the custom tab options when a post is saved
 */
function process_product_meta_custom_tab_spec( $post_id ) {
        update_post_meta( $post_id, 'custom_tab_enabled_spec', ( isset($_POST['custom_tab_enabled_spec']) && $_POST['custom_tab_enabled_spec'] ) ? 'yes' : 'no' );
        update_post_meta( $post_id, 'custom_tab_title_spec', $_POST['custom_tab_title_spec']);
        update_post_meta( $post_id, 'custom_tab_content_spec', $_POST['custom_tab_content_spec']);
}
add_action('woocommerce_process_product_meta', 'process_product_meta_custom_tab_spec', 10, 2);
 
 
/**
 * Display Tab
 *
 * Display Custom Tab on Frontend of Website for WooCommerce 2.0
 */
 
add_filter( 'woocommerce_product_tabs', 'woocommerce_product_custom_tab_spec' );
 
 
        function woocommerce_product_custom_tab_spec( $tabs ) {
                global $post, $product;
 
                $custom_tab_options_spec = array(
                        'enabled' => get_post_meta($post->ID, 'custom_tab_enabled_spec', true),
                        'titlec' => get_post_meta($post->ID, 'custom_tab_title_spec', true),
                        'contentc' => get_post_meta($post->ID, 'custom_tab_content_spec', true),                       
                );
               
                        if ( $custom_tab_options_spec['enabled'] != 'no' ){
                                $tabs['custom-tab-second'] = array(
                                        'title'    => $custom_tab_options_spec['titlec'],
                                        'priority' => 30,
                                        'callback' => 'custom_product_tabs_panel_content_spec',                                
                                        'content'  => $custom_tab_options_spec['contentc']
                                );
                        }
                return $tabs;
        }
 
        /**
         * Render the custom product tab panel content for the callback 'custom_product_tabs_panel_content_spec'
         */
                 
   function custom_product_tabs_panel_content_spec( $key, $custom_tab_options_spec ) {
 
                global $post, $product;
 
                $custom_tab_options_spec = array(
                        'enabled' => get_post_meta($post->ID, 'custom_tab_enabled_spec', true),
                        'titlec' => get_post_meta($post->ID, 'custom_tab_title_spec', true),
                        'contentc' => get_post_meta($post->ID, 'custom_tab_content_spec', true),                       
                );  
   
                echo '<h2>' . $custom_tab_options_spec['titlec'] . '</h2>';
                echo $custom_tab_options_spec['contentc'];
 
        }
 
 function custom_tab_options_tab_down() {
?>
        <li class="custom_tab2"><a href="#custom_tab_data2"><?php _e('DIRECTIONS', 'woothemes'); ?></a></li>
<?php
}
add_action('woocommerce_product_write_panel_tabs', 'custom_tab_options_tab_down');
 
 
/**
 * Custom Tab Options
 *
 * Provides the input fields and add/remove buttons for custom tabs on the single product page.
 */
function custom_tab_options_down() {
        global $post;
       
        $custom_tab_options_down = array(
                'titleb' => get_post_meta($post->ID, 'custom_tab_title_down', true),
                'contentb' => get_post_meta($post->ID, 'custom_tab_content_down', true),
        );
       
?>
        <div id="custom_tab_data2" class="panel woocommerce_options_panel">
                <div class="options_group">
                        <p class="form-field">
                                <?php woocommerce_wp_checkbox( array( 'id' => 'custom_tab_enabled_down', 'label' => __('Enable Custom Tab?', 'woothemes'), 'description' => __('Enable this option to enable the custom tab on the frontend.', 'woothemes') ) ); ?>
                        </p>
                </div>
               
                <div class="options_group custom_tab_options">                                                                         
                        <p class="form-field">
                                <label><?php _e('Custom Tab Title:', 'woothemes'); ?></label>
                                <input type="text" size="5" name="custom_tab_title_down" value="<?php echo @$custom_tab_options_down['titleb']; ?>" placeholder="<?php _e('Enter your custom tab title', 'woothemes'); ?>" />
                        </p>
                       
                        <p class="form-field">
                                <?php _e('Custom Tab Content:', 'woothemes'); ?>
                </p>
                       
                        <table class="form-table">
                                <tr>
                                        <td>
                                                <textarea class="theEditor" rows="3" cols="90" name="custom_tab_content_down" placeholder="<?php _e('Enter your custom tab content', 'woothemes'); ?>"><?php echo @$custom_tab_options_down['contentb']; ?></textarea>
                                        </td>
                                </tr>  
                        </table>
        </div> 
        </div>
<?php
}
add_action('woocommerce_product_write_panels', 'custom_tab_options_down');
 
 
/**
 * Process meta
 *
 * Processes the custom tab options when a post is saved
 */
function process_product_meta_custom_tab_down( $post_id ) {
        update_post_meta( $post_id, 'custom_tab_enabled_down', ( isset($_POST['custom_tab_enabled_down']) && $_POST['custom_tab_enabled_down'] ) ? 'yes' : 'no' );
        update_post_meta( $post_id, 'custom_tab_title_down', $_POST['custom_tab_title_down']);
        update_post_meta( $post_id, 'custom_tab_content_down', $_POST['custom_tab_content_down']);
}
add_action('woocommerce_process_product_meta', 'process_product_meta_custom_tab_down', 10, 2);
 
 
/**
 * Display Tab
 *
 * Display Custom Tab on Frontend of Website for WooCommerce 2.0
 */
 
add_filter( 'woocommerce_product_tabs', 'woocommerce_product_custom_tab_down' );
 
 
        function woocommerce_product_custom_tab_down( $tabs ) {
                global $post, $product;
 
                $custom_tab_options_down = array(
                        'enabled' => get_post_meta($post->ID, 'custom_tab_enabled_down', true),
                        'titleb' => get_post_meta($post->ID, 'custom_tab_title_down', true),
                        'contentb' => get_post_meta($post->ID, 'custom_tab_content_down', true),                       
                );
                               
               
                        if ( $custom_tab_options_down['enabled'] != 'no' ){
                                $tabs['custom-tab-third'] = array(
                                        'title'    => $custom_tab_options_down['titleb'],
                                    'id' => 'test_multicheckbox',      
                                        'priority' => 35,
                                        'callback' => 'custom_product_tabs_panel_content_down',                                
                                        'content'  => $custom_tab_options_down['contentb']
                                );
                        }
 
                return $tabs;
        }
 
        /**
         * Render the custom product tab panel content for the callback 'custom_product_tabs_panel_content_down'
         */
   function custom_product_tabs_panel_content_down( $key, $custom_tab_options_down ) {
                global $post, $product;
   
                $custom_tab_options_down = array(
                        'enabled' => get_post_meta($post->ID, 'custom_tab_enabled_down', true),
                        'titleb' => get_post_meta($post->ID, 'custom_tab_title_down', true),
                        'contentb' => get_post_meta($post->ID, 'custom_tab_content_down', true),                       
                );
               
                $downloads = get_post_meta($post->ID, 'custom_tab_content_down', true);
                $nsoutput = do_shortcode( $downloads ) ;               
                   
                echo '<h2>' . $custom_tab_options_down['titleb'] . '</h2>';
                print $nsoutput;
        }
		?>
  • Ank

    where to add this code please reply asps

  • Timir

    You need to add this in theme functions.php

  • Ank

    thankyou very much..!!

  • IMr Bem

    thankyou very much..!!

  • aaron

    Great code!

  • Edgaras Karka

    thankyou very much..!!

  • musaver

    It work Thanks man you save my day

  • Vipin Babra

    It work Thanks..