Click for larger image

A short while ago I wrote about how to remove the reviews tab from Woocommerce themes like Wootique (See image to the right). As a reply I was asked how we can add our own tabs and panels with custom or fixed content inside so I thought I would write this quick follow up to explain all.

There are two actions we need to hook into to get our tabs to work.. firstly the tab top and secondly the tab content (or panel as they are known). The following code is a complete example for you to add a new tab and panel pair with hard coded content:

add_action( 'woocommerce_product_tabs', 'sb_woocommerce_new_tab', 40 );
add_action( 'woocommerce_product_tab_panels', 'sb_woocommerce_new_panel', 40 );

function sb_woocommerce_new_tab() {
 echo '<li><a href="#tab-new">' . __('New Tab', 'woocommerce') . '</a></li>';
}

function sb_woocommerce_new_panel() {
 echo '<div class="panel" id="tab-new">
 <h2>New Panel</h2>
 <p>Example content...</p>
 </div>';
}

If you put the above into your theme functions.php file you should see a new tab appear called test. When duplicating this be sure to make sure the anchor tag (<a>) has the correct link to the ID of the panel which should be unique. Woo use the format tab-[name] so best to stick to that really.

The question I had was to be able to put a contact form in there. The simplest method I have found for adding contact forms to WordPress is Contact Form 7. It’s a nicely written and presented plugin with few or no adverts and begging links to annoy their users. It has also been extended by others so has plenty of companion plugins to make it even better. For today though we just want to grab the shortcode from the Contact Form 7 admin page and put it a handy PHP function do_shortcode(‘[your_shortcode]‘); as follows.

function sb_woocommerce_new_panel() {

 echo '<div class="panel" id="tab-new">
 <h2>New Panel</h2>';

 echo do_shortcode('[your-shortcode]');

 echo '</div>';
}

In recent projects I have been clever and populated tabs from WordPress custom fields which can be done easily although without massive configuration possibility using the More Types plugin. This allows you to build little forms and attach them to custom post type item edit pages in custom meta boxes. Ideal for making a bespoke yet quick interface.
Assuming that made sense to you.. the following custom field code will come in handy for your panel. It pulls the tab content from the custom field called tab_content. In the event there is nothing in the custom field it won’t show the panel. Remember if you want to hide the panel when there is no content in the custom field then don’t forget to include the same code around the label output.

function sb_woocommerce_new_panel() {
 global $post;

if ($new = get_post_meta($post->ID, 'new_tab_content', true)) {
 echo '<div class="panel" id="tab-new">
 <h2>New Panel</h2>
 ' . $new . '
 </div>';
 }
}

Good luck and if there is ever anything you want me to write about then do let me know using my contact page.

Further Reading, my original post on the matter