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