How to manually add a custom tab with content to Woocommerce product pages

In this tutorial I am going to show you how to add a new tab to your Woocommerce product pages and then add a Contact Form 7 form to that tab. This method can however be used to add anything else to the tab.

“Why not just use a plugin for that?” you ask..

While installing plugins is the easy and intended way to go about adding a new feature or upgrade to your website, having too many plugins can be detrimental. Remember that many plugins have required javascript or css includes in order for them to function as intended. For every one of these includes you are adding on additional files that have to load when that page loads, this increases the page load time.

First we are going to add the below PHP code to the site, this can be done by adding it to the theme’s functions.php file or by adding it to a plugin that you have built.

In this first part, we add the filter which calls the function to add the new tab into the existing array of tabs.

//Add the woocommerce filter which calls the function to run 
add_filter('woocommerce_product_tabs', 'd2c_product_enquiry_tab');

Now we add in the function that fetches the array of tabs and we add in our new tab, in this case we’re calling it “Product Enquiry” via the “title” array key, the “priority” key determines the order in which the tabs should display and the “callback” array key specifies the function which displays the content of the tab.

//The function to run which adds the tab
function d2c_product_enquiry_tab($tabs){
	$tabs['product_enquiry'] = array(
		'title' => __('Product Enquiry', 'woocommerce'),
		'priority' => 50,
		'callback' => 'd2c_woocommerce_product_enquiry_tab'
	);
	
	return $tabs;
}

Finally we add some content to the new tab, in this case we created a new “Product Enquiry” form in Contact Form 7 that we wanted to display for all products. We then display the form via the WordPress do_shortcode function.
You can display any other type of content such as plain text or html.

//This is the contents of the tab which you have in the above callback
function d2c_woocommerce_product_enquiry_tab(){
    // Plain text
	//echo 'Some test content'; 
    //Or a shortcode
	echo do_shortcode('[contact-form-7 id="273019" title="Product Enquiry"]');
}

If you have any issues check out the WordPress, Woocommerce or PHP documentation. As a developer, they are your best friends.

Hope this helps, Nathaniel.