How to add tab bars in product page? - by mignon

This topic has 11 replies, 5 voices, and was last updated 9 years, 6 months ago ago by Eva Kemp

  • Avatar: mignon
    mignon
    Participant
    May 21, 2015 at 09:13

    How can I add additonal tabs to the single product page? I know that you can add one custom tab in the options, but I need more than that.
    Thank you

    10 Answers
    Avatar: mignon
    mignon
    Participant
    May 21, 2015 at 09:57

    I managed to add additional tabs in the product page but they are below the three tabs Description – Reviews – Return & Delivery. I would like them to be after the Description tab. How can I make that possible?

    Avatar: Brian Johnson
    Brian Johnson
    Member
    May 21, 2015 at 10:12

    Hello

    We may change it via custom.css. Please provide us with link where you have added these tabs.

    With best regards
    Brian Johnson

    Avatar: glenngtr
    glenngtr
    Participant
    May 25, 2015 at 23:00

    Hi John,

    I would also like to be able to have multiple custom tabs in my own order. Do you have a specific code I could copy & paste?

    Thanks.

    Glenn

    Avatar: Eva
    Eva Kemp
    Support staff
    May 26, 2015 at 09:38

    Hello @glenngtr,

    Please refer to Woocommerce documentation as this is their configuration:
    http://docs.woothemes.com/document/editing-product-data-tabs/

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: glenngtr
    glenngtr
    Participant
    May 29, 2015 at 20:50

    Thank you Eva, that helped me.

    Avatar: Eva
    Eva Kemp
    Support staff
    May 30, 2015 at 07:53

    Hello @glenngtr,

    You’re welcome.

    Regards,
    Eva Kemp.

    Avatar: stp33
    stp33
    Participant
    May 30, 2015 at 23:16

    Hi Eva,

    I added the the custom tab code to my functions.php file. The tab appears but there is no text box for editing.

    When I tried uploading the order of the tabs it would work initially but then give me an error message referencing a certain line code and the site went down. I took it out of the functions file because it kept glitching.

    Is it possible to have a text box in each of these categories that can be customized to each product?

    Category order should be:
    Description
    Material Options
    Technical Information
    Additional Information
    **No reviews tab (it has been removed)

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    June 1, 2015 at 12:18

    Hello @stp33,

    If you want to add custom tab to a product you need add this code into functions.php file:

    add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
    function woo_new_product_tab( $tabs ) {
    	
    	// Adds the new tab
    	
    	$tabs['test_tab'] = array(
    		'title' 	=> __( 'New Product Tab', 'woocommerce' ),
    		'priority' 	=> 50,
    		'callback' 	=> 'woo_new_product_tab_content'
    	);
    
    	return $tabs;
    
    }
    function woo_new_product_tab_content() {
    
    	// The new tab content
    
    	echo '<h2>New Product Tab</h2>';
    	echo '<p>Here\'s your new product tab.</p>';
    	
    }

    Tab content is added inside of this code:

    echo '<h2>New Product Tab</h2>';
    echo '<p>Here\'s your new product tab.</p>';

    between <p></p> tags.

    If you have questions concerning tabs editing you need contact Woocommerce support team.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: stp33
    stp33
    Participant
    June 2, 2015 at 04:50

    Hi Eva,

    Is it possible to add more than one tab this way?

    Avatar: Eva
    Eva Kemp
    Support staff
    June 2, 2015 at 08:49

    Hello @stp33,

    You can try solution described in this article:
    http://blackhillswebworks.com/2014/06/14/add-multiple-product-tabs-to-woocommerce-2-x/

    Thank you.
    Regards,
    Eva Kemp.

  • Viewing 11 results - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.