Use ACF Pro To Add Custom Tabs In WooCommerce

Posted on by AJ Morris
Reading Time: 2 minutes

Advanced Custom Fields Pro is a plugin that allows you to do a number of things. However, in this tutorials, we are going to walk you through how to add custom tabs to WooCommerce products.

Please note this tutorial does require the use of code, so it's best for those familiar with writing code, like a developer. You will be adding some code to your theme's functions.php file and adding another php file to your theme. You also need to make sure that you have the Advanced Custom Fields Pro plugin installed and activated on your site.

To get started the first thing you are going to need to do is to create a new file in your theme's folder. We'll call it acf-fields.php. Then we'll add the following code to the file.

<?php
if( function_exists('acf_add_local_field_group') ):

acf_add_local_field_group(array (
	'key' => 'acf_product_options',
	'title' => 'Product Options',
	'fields' => array (
		array (
			'key' => 'acf_product_options_tabbedcontent_label',
			'label' => 'Tabbed Content',
			'name' => '',
			'type' => 'tab',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array (
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'placement' => 'top',
			'endpoint' => 0,
		),
		array (
			'key' => 'acf_product_options_tabbedcontent_tabs',
			'label' => 'Tabs',
			'name' => 'tabs',
			'type' => 'repeater',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array (
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'min' => '',
			'max' => '',
			'layout' => 'row',
			'button_label' => 'Add Tab',
			'sub_fields' => array (
				array (
					'key' => 'acf_product_options_tabbedcontent_tab_title',
					'label' => 'Tab Title',
					'name' => 'tab_title',
					'type' => 'text',
					'instructions' => '',
					'required' => 0,
					'conditional_logic' => 0,
					'wrapper' => array (
						'width' => '',
						'class' => '',
						'id' => '',
					),
					'default_value' => '',
					'placeholder' => '',
					'prepend' => '',
					'append' => '',
					'maxlength' => '',
					'readonly' => 0,
					'disabled' => 0,
				),
				array (
					'key' => 'acf_product_options_tabbedcontent_tab_content',
					'label' => 'Tab Content',
					'name' => 'tab_content',
					'type' => 'wysiwyg',
					'instructions' => '',
					'required' => 0,
					'conditional_logic' => 0,
					'wrapper' => array (
						'width' => '',
						'class' => '',
						'id' => '',
					),
					'default_value' => '',
					'tabs' => 'all',
					'toolbar' => 'full',
					'media_upload' => 1,
				),
			),
		),
	),
	'location' => array (
		array (
			array (
				'param' => 'post_type',
				'operator' => '==',
				'value' => 'product',
			),
		),
	),
	'menu_order' => 0,
	'position' => 'normal',
	'style' => 'default',
	'label_placement' => 'top',
	'instruction_placement' => 'label',
	'hide_on_screen' => '',
));

endif;

This code is what creates the ACF repeater fields and in return creates the tabs on your WooCommerce product.

Next, you’ll need to add this code to your theme’s functions.php file. This will set up the tabs in your theme.

<?php
function hwid_load_custom_tab( $tab_key, $tab_info ) {
	echo apply_filters( 'the_content', $tab_info['tabContent'] );
}
function hwid_add_content_tabs( $tabs ) {
	global $post;
	$custom_tabs = get_field( 'tabs', $post->ID );
	foreach( $custom_tabs as $index => $tab ) {
		$tabs['customTab-' . $index] = array(
			'title' => $tab['tab_title'],
			'priority' => 20 + $index,
			'tabContent' => $tab['tab_content'],
			'callback' => 'hwid_load_custom_tab'
		);
	}
	return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'hwid_add_content_tabs' );

With both files being uploaded to your site, you will now have ACF custom tabs on your WooCommerce products.

Give us a call at 800.580.4985, or open a chat or ticket with us to speak with one of our knowledgeable Solutions or Experienced Hosting advisors to learn how you can take advantage of these techniques today!

Avatar for AJ Morris

About the Author: AJ Morris

AJ Morris is the Product Innovation and Marketing Manager at SolidWP. He’s been involved in the WordPress community for over a decade focusing on building, designing and launching WordPress websites and businesses.

Latest Articles

Blocking IP or whitelisting IP addresses with UFW

Read Article

CentOS Linux 7 end of life migrations

Read Article

Use ChatGPT to diagnose and resolve server issues

Read Article

What is SDDC VMware?

Read Article

Best authentication practices for email senders

Read Article