How to Add Extra Tabs on WooCommerce Product Page

WooCommerce allows you to add extra tabs on a product page alongside descriptionreviews and additional information with the filter, woocommerce_product_tabs.

Let’s say you wanted 2 extra tabs – ‘Features’ and ‘FAQ’ as the heading, you can use the filter woocommerce_product_tabs like so…

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
/**
 * Add 2 custom product data tabs
 */
function woo_new_product_tab( $tabs ) {
	
	// Adds the new tab
	if(get_field('ska_features'))
	$tabs['features_tab'] = array(
		'title' 	=> __( 'Features', 'woocommerce' ),
		'priority' 	=> 15,
		'callback' 	=> 'ska_features_callback'
        );
  if(get_field('ska_faq'))
  $tabs['faq_tab'] = array(
		'title' 	=> __( 'How To Use', 'woocommerce' ),
		'priority' 	=> 15,
		'callback' 	=> 'ska_faq_callback'
	);

	return $tabs;

}

The array values are title for the Tab Title, the priority for how early it appears in the tab tow, lower numbers appear earlier and the callback which is the function called to output the tab’s content.

See also  Move Coupon Form Under “Proceed to Checkout”

For the content of the tab you may wish to use a custom field as a text area with ACF – then echo the field name in the function callback…

function ska_features_callback() {
        echo the_field('ska_features');
}

function ska_faq_callback() {
        echo the_field('ska_faq');

}

Leave a Reply

Your email address will not be published. Required fields are marked *