Add Custom Tabs In WooCommerce Using ACF

Posted on by AJ Morris
Reading Time: 3 minutes

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

Please note that this tutorial is a bit of a developer tutorial. 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.

The first thing you need to do is create a new file in your theme’s folder. We’ll call it acf-fields.php. 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 thus 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
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;

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

About the Author: AJ Morris

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

Have Some Questions?

Our Sales and Support teams are available 24 hours by phone or e-mail to assist.

1.800.580.4985
1.517.322.0434

Latest Articles

Cloning an Existing Virtual Machine with VMware

Read Article

Podman vs Docker: A Comparison

Read Article

Five Steps to Create a Robots.txt File for Your Website

Read Article

Premium Business Email Pricing FAQ

Read Article

Microsoft Exchange Server Security Update

Read Article