Categories

Featured templates

WooCommerce. How to manage tabs on the product page

Lana Greene July 13, 2015
Rating: 5.0/5. From 2 votes.
Please wait...

This tutorial will show you how to manage tabs on the product page in Woocommerce.

WooCommerce. How to manage tabs on the product page

On the product page you can usually find tabs. In order to edit the existing tabs, you can click edit the product button:

WooCommerce.-How-to-manage-tabs-on-the-product-page-1

Description tab displays product description that is set in the content section of the product;

Video tab is set with the help of Custom Field called video link – you can find it in the custom fields block;

Reviews tab displays reviews – you can easily find and manage them in the very bottom on the product page in your dashboard:

WooCommerce.-How-to-manage-tabs-on-the-product-page-2

In order to add new tab, you should do the following:

  1. Reach files on the server via FTP or hosting cPanel file manager;

  2. Open custom-function.php file located in wp-content/themex/themeXXX/includes folder;

  3. Add the following code to the bottom of the file right before the closing PHP tag:

     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
    		global $post;
    		        $custom  = get_post_meta( $post->ID, 'custom_text', true );
    			
    		echo $custom;
    		}
    WooCommerce.-How-to-manage-tabs-on-the-product-page-3
  4. Save changes in the file;

  5. Make sure the modified file has been uploaded to the server.

New tab content should be added as a custom filed that was created with the php code we added into custom-function.php file:

// The new tab content
global $post;
        $custom  = get_post_meta( $post->ID, 'custom_text', true );
	
echo $custom;
}

Where ‘custom_text’ is custom field title.

In order to add the text into new product tab, you should do the following:

  1. Go to edit the product;

  2. In Add New Custom Field block, please use Enter new button to add new custom filed:

    WooCommerce.-How-to-manage-tabs-on-the-product-page-4
  3. Type the custom field title added in php code – in our case it is custom_text;

  4. You can find it in the drop down:

  5. Type your custom text:

    WooCommerce.-How-to-manage-tabs-on-the-product-page-4a
  6. Update the product to save changes:

    WooCommerce.-How-to-manage-tabs-on-the-product-page-5

Feel free to check the detailed video tutorial below:

WooCommerce. How to manage tabs on the product page
This entry was posted in WooCommerce Tutorials and tagged page, product, tab, WooCommerce. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket