WooCommerce: Adding Tabs to Product Pages

WooCommerce by WooThemes is a great plugin for doing e-commerce on the web and it is free. But, most of the addons for it are not free. WooThemes does have a few free themes to work with it, but most of them have the same problem: The product page has only two tabs. One for description of the product, and the second for reviews (ie. comments). Some of the for-pay themes have more, but I have not found one that allows you to just add tabs as you like. Therefore, I dove into the code to determine how to add more tabs.

WooCommerce is a very expandable plugin with many WordPress Actions and Filters defined just for it. That is how you add tabs as well. I will be using WooThemes Canvas child theme for WooCommerce, which is a very flexible theme. I highly recommend it. But, the process of adding tabs to the product page is totally not associated with the theme. Therefore, this tutorial will work no matter what theme you are using. It will just look different.

You will need the following plugins for this tutorial:

The tutorial has the following sections:

Creating the Actions

First, create a new Action in the ScriptManager called ‘woocommerce_product_tabs’. If you do not remember how, please re-read the documentation. This action is called whenever the plugin creates the product page. In this Action, place the following code:

<li><a href="#tab-features">Features</a></li><li><a href="#tab-documentation">Documents</a></li></textarea></div></pre>

Here, are are extending the list of anchors for the tabs. The anchors will control which contents to be displayed. We do not have to worry about how it does it. We simply supply the information and the plugin generates the rest.

As you can see, we are creating two new tabs: Features and Documentation. The features tab will display the features of the product, while the documentation tab will display links to other areas in the website that documents or gives more information about the product. Notice the href for the anchors: they are references to the id of the panel they are to be attached. It is a standard anchor in the document reference.

Now, we create another Action called ‘woocommerce_product_tab_panels’. This action places the proper contents into each tabbed area. In this Action, place the following code:

<?php global $woocommerce, $post; ?>
<div class="panel" id="tab-features">
<h2>Features</h2>
<?php echo get_post_meta($post->ID,'features',true); ?>
</div>
<div class="panel" id="tab-documentation">
<h2>Documentation</h2>
<p>The following are documentations available:</p>
<?php echo get_post_meta($post->ID,'documents',true);
?>

You will notice that this script is a mixture of HTML and inline PHP. All Actions in the ScriptManager are treated as HTML. Therefore, to run PHP in the script, we use the inline tags
‘<?php … ?>’ (the PHP code goes where the ‘…’ is). We will describe it line by line:

Line 1: This is a declaration of the global variables. The plugin has a $woocommerce variable defined that contains all the information for that product and store. The $post variable is the WordPress global variable containing information for that post. The Custom Field Suite also has a variable defined for each post, but does not seem to work properly in this action. Both of these variables are globals.

Line 2: We define the div for the features panel. Notice the id of the div matches the id given in the anchor for the tab. This is required for the panel to be addressed properly and forced to the top view. Also, the div must have the class ‘panel’ to be formatted properly.

Line 3-5: Here, we put whatever we want to put into the features div. I placed a h2 title of ‘Features’ and then included the information form the ‘features’ meta post data. Notice the use of the WordPress function ‘get_post_meta’. This function has three arguments: ID of the post taken from the $post global variable, the name of the meta field to be displayed (in this case: ‘features’), and a true boolean. This boolean signifies that we want the value directly and not in an array. The div is then closed.

Line 6-11: The rest of the code is the same. Just changed to reflect that we are defining the ‘documentaion’ tab area.

That is all! Now you have two new tabs added to each and every product page. If you go to your product page, it should look similar to this:

What a minute! There is no content! That is because we have to create the meta-data fields for that post type. That is our next step!


Creating the Fields

After the post edit area of the product post type edit screen, you will see the following boxed area (in WordPress, each box of information under the edit area is called a meta-box):

You click the ‘Enter New’ anchor and enter the information as in the picture:

Once you click the ‘Add Custom Field’ button, your information is saved with the new product. You can now view your new product and see the information for the features tab.

You might want to go back and add some styling to make it look the way you want it to look. Now, go do the same for the ‘documents’ custom field. You can do that for homework! Once you have defined the custom fields once, you can then add them to each future product from the drop down selector.


Making the tabs conditional

Sometimes, you do not need all the different tabs for each product shown. Some products will have the feactures and documents tab, and some should not. How do you do that? Easy, just add conditional code to each of the action scripts. Here is how:

First, create custom fields as we did above for the product. A bdoc and bfeat variable that is true/false (a boolean value). Custom Field Suite will then put a checkbox in the metabox for each product for the new variables. Then we change the ‘woocommerce_product_tabs’ Action script to the following:

<?php

global $post;

$showFeat=get_post_meta($post->ID,'bfeat',true);

$showDoc=get_post_meta($post->ID,'bdoc',true);

if($showFeat==1) {

?> <li><a href="#tab-features">Features</a></li>

<?php } if($showDoc==1) { ?>

   <li><a href="#tab-documentation">Documents</a></li>

<?php }</textarea></div></pre>
<p>And, we need to change the &#8216;woocommerce_product_tab_panels&#8217; Action script to this:</p>
<pre><div class='CodeMirror codemirrordiv cm-s-neat' lang='text/x-php'><textarea class='codemirrortext'><?php global $woocommerce, $post;

$showFeat=get_post_meta($post->ID,'bfeat',true);


$showDoc = get_post_meta($post->ID,'bdoc',true);


if($showFeat==1) {
?>
<div class="panel" id="tab-features">
<h2>Features</h2>
<?php echo get_post_meta($post->ID,'features',true); ?>
</div>
<?php } if($showDoc==1) { ?>
<div class="panel" id="tab-documentation">
<h2>Documentation</h2>
<p>The following are documentations available:</p>
<?php echo get_post_meta($post->ID,'documents',true);
?>
</div>

Once done, you can now conditionally set the tabs on a per product basis. So, if one product does not need the tab, just uncheck the display of that tab for that product. There are other ways to implement this feature, but this is the easiest way.


Conclusion

I hope you enjoyed this tutorial. Now, you can make all the tabs you want. Just be careful not to make so many that you do not have room to properly show them. Let me know if this was helpful to you.

comments powered by Disqus