How to creat custome Tabs for WooCommerce 2.x WordPress without plugin

How to creat custome Tabs for WooCommerce 2.x WordPress plugin

A WordPress eCommerce toolkit that helps you sell anything. Beautifully. Transform your WordPress website into a thorough-bred eCommerce store for free. Delivering enterprise-level quality & features whilst backed by a name you can trust. Say hello to WooCommerce.

Custome tabs allow you to add more benefit descriptions in your products, default WooCommerce allow you to creat 2 tabs is descriptions and Rating Review, now do you want to add more tabs for WooCommerce like tech Specs, Tool Kits, Accesspries, and support tab….

How to installation Woocommerce Multiple Tabs plugin for WordPress

wordpress-tabs

 

Fist to Open your functions.php in your wordpress theme with Notepad Plus editor

To creat tabs for WordPress Dashboard

function your_tab_name_options_tab() {
?>
        <li><a href=”#your_tab_data”><?php _e(‘Your Tab name’, ‘woothemes’); ?></a></li>
<?php
}
add_action(‘woocommerce_product_write_panel_tabs’, ‘your_tab_name_options_tab’);
To write custome tabs fields – options
function your_tab_name_options() {
        global $post;
        $your_tab_name_option = array(
                ‘title’ => get_post_meta($post->ID, ‘your_tab_title’, true),
                ‘content’ => get_post_meta($post->ID, ‘your_tab_content’, true),
        );
?>
        <div id=”your_tab_id”>
                <div>
                        <p>
                                <?php woocommerce_wp_checkbox( array( ‘id’ => ‘your_tab_frontend_publish’, ‘label’ => __(‘Publish Your Tab?’, ‘woothemes’), ‘description’ => __(‘Enable this option to publish your tab on the frontend.’, ‘woothemes’) ) ); ?>
                        </p>
                </div>
                <div>
                        <p>
                                <label><?php _e(‘Title:’, ‘woothemes’); ?></label>
                                <input type=”text” size=”5″ name=”your_tab_title” value=”<?php echo @$your_tab_options[‘title’]; ?>” placeholder=”<?php _e(‘Enter your tab title’, ‘woothemes’); ?>” />
                        </p>
                        <p>
                                <?php _e(‘Content:’, ‘woothemes’); ?>
                </p>
                        <table>
                                <tr>
                                        <td>
                                                <textarea rows=”10″ cols=”40″ name=”your_tab_content” placeholder=”<?php _e(‘Enter your  tab content’, ‘woothemes’); ?>”><?php echo @$your_tab_options[‘content’]; ?></textarea>
                                        </td>
                                </tr>
                        </table>
        </div>
        </div>
<?php
}
add_action(‘woocommerce_product_write_panels’, ‘your_tab_options’);
 To save your tab Options
function save_tab_options( $post_id ) {
        update_post_meta( $post_id, ‘your_tab_frontend_publish’, ( isset($_POST[‘your_tab_frontend_publish’]) && $_POST[‘your_tab_frontend_publish’] ) ? ‘yes’ : ‘no’ );
        update_post_meta( $post_id, ‘your_tab_title’, $_POST[‘your_tab_title’]);
        update_post_meta( $post_id, ‘your_tab_content’, $_POST[‘your_tab_content’]);
}
add_action(‘woocommerce_process_product_meta’, ‘save_tab_options’, 10, 2);

Add your tab to frontend

add_filter( ‘woocommerce_product_tabs’, ‘woocommerce_product_your_tab’ );
        function woocommerce_product_your_tab( $tabs ) {
                global $post, $product;
                $your_tab_options = array(
                        ‘enabled’ => get_post_meta($post->ID, ‘your_tab_frontend_publish’, true),
                        ‘title’ => get_post_meta($post->ID, ‘your_tab_title’, true),
                        ‘content’ => get_post_meta($post->ID, ‘your_tab_content’, true),
                );
                        if ( $your_tab_options[‘enabled’] == ‘yes’ ){
                                $tabs[‘custom-tab-first’] = array(
                                        ‘title’    => $your_tab_options[‘title’],
                                        ‘priority’ => 25, // to order your tab position, can changes it with 10,20, 25, 30, 35
                                        ‘callback’ => ‘your_product_tabs_panel_content’,              // callback funtion for your tab
                                        ‘content’  => $your_tab_options[‘content’]
                                );
                        }
                return $tabs;
        }
Call back for your tab panel in Frontend to display tab content
function your_product_tabs_panel_content( $key, $your_tab_options ) {

                echo ‘<h2>’ . $your_tab_options[‘title’] . ‘</h2>’;
                echo $your_tab_options[‘content’];
        }
If you want to creat more Tabs, just to changes with Your_tab Name.
Be Sociable, Share!

Leave a comment