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