Adding WooCommerce tabs

• cosmocanuck

• May 15, 2021 at 2:41 am

Hi all! I’m trying to add a couple of new tabs to my WooCommerce product listings, and am following advice on how to do so with code (as my needs are “slightly” customized).

Here’s what I’m adding to functions.php to create the tabs:

if (class_exists('acf')) {
	add_action('acf/init', function() {
		$fields = [
			[
				'key' => 'field_tab_title',
				'label' => __('Directions', 'txtdomain'),
				'name' => 'tab_directions_title',
				'type' => 'text',
			],
			[
				'key' => 'field_tab_contents',
				'label' => __('Enter usage directions', 'txtdomain'),
				'name' => 'tab_directions_contents',
				'type' => 'wysiwyg',
				'tabs' => 'all',
				'toolbar' => 'full',
				'media_upload' => 1,
				'delay' => 0,
			],
			[
				'key' => 'field_tab_title',
				'label' => __('Ingredients', 'txtdomain'),
				'name' => 'tab_ingredients_title',
				'type' => 'text',
			],
			[
				'key' => 'field_tab_contents',
				'label' => __('List ingredients here', 'txtdomain'),
				'name' => 'tab_ingredients_contents',
				'type' => 'wysiwyg',
				'tabs' => 'all',
				'toolbar' => 'full',
				'media_upload' => 1,
				'delay' => 0,
			]
		
		];
 
		acf_add_local_field_group([
			'key' => 'group_custom_woocommerce_tabs',
			'title' => __('Custom Tabs', 'txtdomain'),
			'fields' => $fields,
			'label_placement' => 'top',
			'menu_order' => 0,
			'style' => 'default',
			'position' => 'normal',
			'location' => [
				[
					[
						'param' => 'post_type',
						'operator' => '==',
						'value' => 'product'
					]
				]
			],
		]);
	});
}

Except, on the back end, only the first two fields, for Directions, appear. The third and fourth fields I’m trying to create – the pair for ingredients – do not show up.

I can’t figure out what I’m doing wrong… can anyone advise?

Thanks!

• cosmocanuck

• May 18, 2021 at 4:14 am

So it turns out that all fields show up if I make sure the “key” is different.

But now I need to show my tabs, and this code, which should display the new tabs, does not (even when I ensure a tab has content in it):

if (class_exists('acf') && class_exists('WooCommerce')) {
	add_filter('woocommerce_product_tabs', function($tabs) {
		global $post, $product;  // Access to the current product or post
		
		$custom_tab_title = get_field('tab_title', $post->ID);
 
		if (!empty($custom_tab_title)) {
			$tabs['awp-' . sanitize_title($custom_tab_title)] = [
				'title' => $custom_tab_title,
				'callback' => 'awp_custom_woocommerce_tabs',
				'priority' => 10
			];
		}
		return $tabs;
	});
 
	function awp_custom_woocommerce_tabs($key, $tab) {
		global $post;
 
		?><h2><?php echo $tab['title']; ?></h2><?php
 
		$custom_tab_contents = get_field('tab_contents', $post->ID);
		echo $custom_tab_contents;
	}
}

Any advice is much appreciated!

• cosmocanuck

• May 18, 2021 at 5:08 am

Thanks to all, but no worries, I discovered an alternative way to do this which works great… here is the link.

• Sarah Williams

• June 27, 2022 at 10:54 am

Hi,

Can we apply the same method on this plugin products by attributes & variations for woocommerce for the products tabs.