WooCommerce Custom Product Tabs

27 Comments

Jul 24, 2012Reply

Lucasa

Benny,

Just a heads up, I don’t think this works anymore. There were updates to WooCommerce a few days ago, perhaps something has changed?

Thanks for working on this! Woocommerce needs to get it together and offer this as a default.
Jul 24, 2012Reply

Lucasa

Sorry, I believe I may have been mistaken.

What I should have said is: This does not work with the Genesis framework. I keep forgetting the whole world doesn’t use a framework, haha.

So, if you use a framework that requires a child theme this will not work for you.

Benny, if you had a second to look at how that might work it would be much appreciated!

Thanks,

Lucas
Jul 27, 2012Reply

Natasha

don’t bother with my previous comment… I’m gonna use the one tab plugin and put all my infos in one tab… It’s a bit frustrating but not so much important.
Sep 13, 2012Reply

Louis

Hi Benny,

How to get this to work with a child theme?

Thanks
- Sep 17, 2012Reply
  
  Benny
  
  Louis —
  
  Haven’t had time to test with child themes. Can you please share the error you received so I can test? Thanks!
Sep 17, 2012Reply

MG

I am trying to add a 3rd tab to a website with no luck, any chance you have any code for that? By the way awesome work…
- Sep 17, 2012Reply
  
  Benny
  
  Hey MG,
  
  Give this a shot: http://pastebin.com/CTRCaRdZ
  
  I shared it with a buddy on twitter a few weeks ago and he said it worked great. Let me know. Cheers!
Sep 18, 2012Reply

Gemma Wild

Hi Benny

This is a great little feature that works a treat, thank you. Was just wondering if there is a way to have a pre-filled custom tab to go across all products in a store?

For instance, I have a jewellery store and as an additional tab for all items I wanted to provide ‘jewellery care’ instructions which would not change on a per product basis. I also wanted to provide a ‘shipping details’ tab also which would be the same for each and every product.

As it stands, I would need to copy and paste the information to the custom tabs every time I create a new product. Is a pre-filled tab possible?

Thanks =)
- Sep 20, 2012Reply
  
  Benny
  
  Hi Gemma —
  
  Having a pre-filled custom tab is a bit easier depending how often you want to change the data in that tab. The quickest solution would be to hard code into the tab. Granted, this won’t give you a user-friendly to edit the data in the back-end of WordPress.
  
  A more elegant solution would be to create a custom panel in the back-end for you to edit the data in the future.
  
  Due to time limitations I can probably only offer help on the hard coded version. The more elegant solution would take a bit more time than I currently have to offer for free. Feel free to send me the data for each tab via the contact form and I’ll see what I can cook up.
  
  Cheers!
  Ben
Oct 15, 2012Reply

Nicole

Thanks heaps!

I have been looking for a solution just like this. I have taken your code and modified it to make myself 3 custom tabs: ingredients, how to use and testimonials.

🙂
Nov 1, 2012Reply

sticky

Hi Benny,

I use this code for wordpress version 3.4.2 but It seem like I can’t access wp-admin sometimes
Any solution for this problem please?

Thanks 🙂
Nov 13, 2012Reply

Stanko Metodiev

Hi Benny,

Thank you for this snippets. It helped me a low with customizing some client’s product page!

Cheers
Dec 7, 2012Reply

Selvam

Nice work and thanks for the valuable code, But have one question, In case woocommerce plugin got new updates, then what happened?
Jan 10, 2013Reply

gaston

hi from argentina, thanks for the useful code. How to put html code in “Custom Tab Content”? google maps embed code for example… thxs again.
Jan 24, 2013Reply

John

I need a wysiwyg for Edit Product Category or a way for it to not strip the html i put in. I need to style the category pages a lot and plain text is just not cutting it. Site is due in a week and we are stuck with this bug the client finds unacceptable. There is no reason for this functinality not to be there but Woothemes wont fix it.

Please help
- Jan 24, 2013Reply
  
  Ben Blanco
  
  Hi John,
  
  If you want to enable HTML in the product category editor please add this code to your functions.php file:
  //Enable HTML in Category Descriptions remove_filter('pre_term_description', 'wp_filter_kses');
  Cheers!
  Ben
Mar 8, 2013Reply

Roopal

Hi Ben, Thanks for taking the time out to write this extension for the community when a lot of people didn’t.
With woocommerce’s recent 2.0 update, they have changed how they manage tabs and due to that, your codes are throwing off this error where the tabs are supposed to be:

Warning: uasort() [function.uasort]: The argument should be an array in //wp-content/plugins/woocommerce/woocommerce-template.php on line 792

Have you faced similar error in your site where you had multiple product tabs after you updated to Woocommerce2.0? How to deal with this!
- Mar 8, 2013Reply
  
  Ben Blanco
  
  Hi Roopal,
  
  Thanks for making me aware of the error. I was planning on upgrading my sites over the weekend. I’ll release a fix for this issue by Sunday…if not sooner.
  
  Thanks for your patience,
  Ben
  - Mar 18, 2013Reply
    
    Grace
    
    Hi Ben! This code has worked fabulously for my e-commerce site until the Woocommerce update. With hundreds of products, I’d hate to lose the custom tab data that’s currently attached to each one by switching to another method. Do you have any idea when you’ll publish a fix? Thanks!
    - Mar 25, 2013Reply
      
      Ben Blanco
      
      Grace,
      
      I was finally able to develop a solution/upgrade to my original WooCommerce Tab code. The new code is compatible with WooCommerce 2.0+. I’ll be posting the code on my blog today.
      
      Cheers!
      Ben
      - Apr 5, 2013
        
        Grace
        
        Fabulous! Thank you so much for posting the new code.
- Mar 25, 2013Reply
  
  Ben Blanco
  
  Hi Roopal,
  
  Better late than never. I updated the WooCommerce Tab code to be compatible with WooCommerce 2.0: http://www.benblanco.com/woocommerce-2-multiple-custom-product-tabs/
  
  Cheers!
  Ben
Mar 11, 2013Reply

Shilpi

Hi Ben,

I’ve been looking for exactly this kind of solution. thought I shall do a requirements analysis of what we all want.

Currently WC 2.0.2 offers Description and Product Short Description content editing areas in 2 places, rather confusing. Perhaps depending on the theme used, the content entered in Description appears near the product image, and the content entered in Product Short Description appear under the heading Product Description.

The Product Page’s Additional Information heading shows the product’s Weight and Dimension values drawn from WC 2.0.2 > Settings > Catalog > Product Data > Show weight and dimension values on the Additional Information tab.

I’m looking for a WC 2.0.2 plugin that has and does the following:

1. Product Pages to’ve an integrated content editing area for adding a maximum of 20 product information tabs with custom names.

2. Each tab must’ve URL fields for text and images, which can fetch and render content from that URL.

3. Show the Description, Specifications, and Additional Information tab areas under each other by default, with “Add new tab” Checkbox placed below the editor. These tabs’ names also should be re-nameable and re-orderable by drag-and-drop.

4. The product’s weight and dimension values must appear in an editable table in the default Specifications tab. Hitting the keyboard’s Tab key on the end of a row must create a new row.

5. When checked, opens a new tab below with “Enter tab name” in the name field. ” There must be a “Show this Tab” checkbox, if checked, displays this tab and content in the rendered page. If not not checked, this tab does not stop preceding or succeeding tabs from displaying their content.

6. If a tab is named Reviews or Review, or User Opinions, or any similar tag, this tab must also offer to display excerpts of the Testimonial post type content. The user can also pull in content from other URLs using the functionality mentioned in 2.

7. All tabs must render their info seamlessly without breaking the theme’s stylesheet.

My 2 cents, Ben. Thanks for your time.
May 9, 2013Reply

Scott

Hi,

Thanks for the update for the latest version of woocommerce. I am building a site for a friend so need it to be as easy as possible.

The problem I am finding is that when I add a custom tab, all of the content is unformatted and is outputted into just one paragraph.

Is there a way to get the content text to display in multiple paragraphs without having to enter the “h2” and “p” tags?

thanks

Jan 13, 2015Reply

Here is an updated version of the code with support for woocommerce 2.2. Note, for my use, I did not need the capability to put in a custom name but I did need three separate tabs. The code will only display the tab content in the even there is content loaded to that area. I also implemented the ability to use the WYSIWYG TinyMCE editor. If you wanted more or less tabs, it should be fairly easy to customize the code to fit your needs.

This does work in a child theme. Simply place the code in the functions.php file of your child theme.

Cheers.

&lt;?php

/**
 * Custom Tab for Product display
 * 
 * Outputs an extra tab to the default set of info tabs on the single product page.
 */
function custom_tab_options_tab() {
?&gt;
	&lt;li class=&quot;custom_tab&quot;&gt;&lt;a href=&quot;#custom_tab_data&quot;&gt;&lt;?php _e('Custom Tabs', 'woothemes'); ?&gt;&lt;/a&gt;&lt;/li&gt;
&lt;?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(
		'content1' =&gt; get_post_meta($post-&gt;ID, 'custom_tab_content1', true),
		'content2' =&gt; get_post_meta($post-&gt;ID, 'custom_tab_content2', true),
		'content3' =&gt; get_post_meta($post-&gt;ID, 'custom_tab_content3', true),
	);
	
?&gt;
	&lt;div id=&quot;custom_tab_data&quot; class=&quot;panel woocommerce_options_panel&quot;&gt;
		&lt;div class=&quot;options_group custom_tab_options&quot;&gt;                								
			&lt;h2 class=&quot;form-field&quot;&gt;&lt;?php _e('Required Equipment:', 'woothemes'); ?&gt;&lt;/h2&gt;
			&lt;?php wp_editor($custom_tab_options['content1'], 'custom_tab_content1', array('textarea_name' =&gt; 'custom_tab_content1','media_buttons'=&gt;false,'textarea_rows'=&gt;5,'teeny'=&gt;true));?&gt;
			
			&lt;h2 class=&quot;form-field&quot;&gt;&lt;?php _e('Kudos:', 'woothemes'); ?&gt;&lt;/h2&gt;
			&lt;?php wp_editor($custom_tab_options['content2'], 'custom_tab_content2', array('textarea_name' =&gt; 'custom_tab_content2','media_buttons'=&gt;false,'textarea_rows'=&gt;5,'teeny'=&gt;true));?&gt;
			
			&lt;h2 class=&quot;form-field&quot;&gt;&lt;?php _e('Sample Session:', 'woothemes'); ?&gt;&lt;/h2&gt;
			&lt;?php wp_editor($custom_tab_options['content3'], 'custom_tab_content3', array('textarea_name' =&gt; 'custom_tab_content3','media_buttons'=&gt;false,'textarea_rows'=&gt;5,'teeny'=&gt;true));?&gt;
        &lt;/div&gt;	
	&lt;/div&gt;
&lt;?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( $post_id ) {
	update_post_meta( $post_id, 'custom_tab_content1', $_POST['custom_tab_content1']);
	update_post_meta( $post_id, 'custom_tab_content2', $_POST['custom_tab_content2']);
	update_post_meta( $post_id, 'custom_tab_content3', $_POST['custom_tab_content3']);
}
add_action('woocommerce_process_product_meta', 'process_product_meta_custom_tab');



/** Add extra tabs to front end product page **/
if (!function_exists('woocommerce_product_custom_tab')) {
	function woocommerce_product_custom_tab($tabs) {
		global $post;
		
		$custom_tab_options = array(
			'content1' =&gt; get_post_meta($post-&gt;ID, 'custom_tab_content1', true),
			'content2' =&gt; get_post_meta($post-&gt;ID, 'custom_tab_content2', true),
			'content3' =&gt; get_post_meta($post-&gt;ID, 'custom_tab_content3', true),
		);
		if($custom_tab_options['content1']!=''){
			$tabs[]=array(
				'title'=&gt;'Required Equipment',
				'callback'=&gt;custom_product_tab_panel_1,
				'priority'=&gt;11
			);
		}
		if($custom_tab_options['content2']!=''){			
			$tabs[]=array(
				'title'=&gt;'Kudos',
				'callback'=&gt;custom_product_tab_panel_2,
				'priority'=&gt;12
			);
		}
		if($custom_tab_options['content3']!=''){
			$tabs[]=array(
				'title'=&gt;'Sample Session',
				'callback'=&gt;custom_product_tab_panel_3,
				'priority'=&gt;13
			);
		}
		return $tabs;	
	}
}
add_action( 'woocommerce_product_tabs', 'woocommerce_product_custom_tab', 11 );

function custom_product_tab_panel_1(){
	global $post;	
	$content=get_post_meta($post-&gt;ID, 'custom_tab_content1', true);
	echo '&lt;h2&gt;Required Equipment&lt;/h2&gt;'.nl2br($content);
}
function custom_product_tab_panel_2(){
	global $post;	
	$content=get_post_meta($post-&gt;ID, 'custom_tab_content2', true);
	echo '&lt;h2&gt;Kudos&lt;/h2&gt;'.nl2br($content);
}
function custom_product_tab_panel_3(){
	global $post;	
	$content=get_post_meta($post-&gt;ID, 'custom_tab_content3', true);
	echo '&lt;h2&gt;Sample Session&lt;/h2&gt;'.nl2br($content);
}
add_action( 'woocommerce_product_tab_panels', 'woocommerce_product_custom_panel', 11 );

Nov 17, 2015Reply

Ryon D

Yes that works for WC 2.4.8

Jan 13, 2015Reply

Aj Best

The code got messed up in my prior post. to fix,

do a search and replace for and replace with the greater than sign.

Ben Blanco
FREELANCE WEB DEVELOPER