Create WooCommerce Product Tab with content from Product Meta custom field

woocommerce-custom-product-tab-and-meta-field-content.php

<?php
// add this code to the functions.php file of your Theme or Child Theme

/*
 * Add Custom tabs to WooCommerce products which contain content stored in custom fields (product postmeta fields)
 * This example is adding 3 tabs. Product Instructions, Size Chart, and Tech Specs
 * There are 2 pieces that are needed:
 * 1. Declare the tab
 * 2. Declare the contents of the tab
 * Recommended to use ACF (advanced custom fields plugin) to managage the tab content per product.
 */
 
 
 // 1. Declaring the tabs
	add_filter( 'woocommerce_product_tabs', 'bhww_woo_extra_tabs' );
	
	function bhww_woo_extra_tabs( $tabs ) {
	// requesting the meta fields
		global $post;
		$product_instructions = get_post_meta( $post->ID, '_instructions_tab', true );
		$size_chart  = get_post_meta( $post->ID, '_size_chart_tab', true );
		$tech_specs  = get_post_meta( $post->ID, '_tech_specs_tab', true );
	// checking if the meta fields have content. If no content, the tab doesn't show on the product
	// checking first tab
		if ( ! empty( $product_instructions ) ) {
		
			$tabs['instructions_tab'] = array(
				'title'    => __( 'Instructions', 'woocommerce' ),
				'priority' => 15,
				'callback' => 'sls_instructions_tab' // refers to function below, which gets the content
			);
			
		}
		// checking second tab
		if ( ! empty( $size_chart ) ) {
		
			$tabs['size_chart_tab'] = array(
				'title'    => __( 'Size Chart', 'woocommerce' ),
				'priority' => 16,
				'callback' => 'sls_size_chart_tab' // refers to function below, which gets the content
			);
			
		}
    // checking third tab
		if ( ! empty( $tech_specs ) ) {
		
			$tabs['tech_specs_tab'] = array(
				'title'    => __( 'Tech Specs', 'woocommerce' ),
				'priority' => 17,
				'callback' => 'sls_tech_spec_tab' // refers to function below, which gets the content
			);
			
		}
		
		return $tabs;
	 
	}
	// Getting the content that is stored in the meta fields to display within the tab
	// Tab 1 content
	function sls_instructions_tab() {
	
		global $post;
		$product_instructions = get_post_meta( $post->ID, '_instructions_tab', true );
	 
		if ( ! empty( $product_instructions ) ) {
		
			echo '<h2>' . esc_html__( 'Product Instructions', 'woocommerce' ) . '</h2>';
			
			// Updated to apply the_content filter to WYSIWYG content
			echo apply_filters( 'the_content', $product_instructions );
			
		}
	 
	}
	// Tab 2 content
	function sls_size_chart_tab() {
	
		global $post;
		$size_chart = get_post_meta( $post->ID, '_size_chart_tab', true );
	 
		if ( ! empty( $size_chart ) ) {
		
			echo '<h2>' . esc_html__( 'Size Chart', 'woocommerce' ) . '</h2>';
		
			// Updated to apply the_content filter to WYSIWYG content
			echo apply_filters( 'the_content', $size_chart );
			
		}
	 
	}
  // Tab 3 content
	function sls_tech_spec_tab() {
	
		global $post;
		$size_chart = get_post_meta( $post->ID, '_tech_specs_tab', true );
	 
		if ( ! empty( $size_chart ) ) {
		
			echo '<h2>' . esc_html__( 'Tech Specs', 'woocommerce' ) . '</h2>';
		
			// Updated to apply the_content filter to WYSIWYG content
			echo apply_filters( 'the_content', $size_chart );
			
		}
	 
	}


?>