使用ACF Group製作出表格並放在商品頁

WooCommerce Hook：

參考文章：WooCommerce Hooks: Introduction, Tutorial, and Real-Life Examples

參考文章：WooCommerce Visual Hook Guide: Single Product Page

呈現

ACF設定

新增群組，並在下方設定文字欄位

程式碼設定

接下來將代碼放在function.php或是Code Snippets

//CSS
add_action( 'wp_head', function () { ?>
<style>
	div.acf-product-extensions table{
		font-size:13px;
	}
</style>
<?php } );

//商品額外資訊
add_action( 'woocommerce_after_single_product', 'shop_custom_product_extensions_field', 30 );
  
function shop_custom_product_extensions_field() {
	
	$extensions01 = get_field('product-extensions_product-extensions01');
	$extensions01_d = get_field_object('product-extensions_product-extensions01');
	$extensions01_t = $extensions01_d['label'];
	
	$extensions02 = get_field('product-extensions_product-extensions02');
	$extensions02_d = get_field_object('product-extensions_product-extensions02');
	$extensions02_t = $extensions02_d['label'];
	
	$extensions03 = get_field('product-extensions_product-extensions03');
	$extensions03_d = get_field_object('product-extensions_product-extensions03');
	$extensions03_t = $extensions03_d['label'];
	
	$extensions04 = get_field('product-extensions_product-extensions04');
	$extensions04_d = get_field_object('product-extensions_product-extensions04');
	$extensions04_t = $extensions04_d['label'];
	
	$extensions05 = get_field('product-extensions_product-extensions05');
	$extensions05_d = get_field_object('product-extensions_product-extensions05');
	$extensions05_t = $extensions05_d['label'];
	
	//如果有商品名稱，才會顯示表格
	if($extensions01_t['value']){	
		echo "<div class='acf-product-extensions' style='background:#f9f9f9; margin:20px 0 0 0;'>
		<table>
		<tr><td width='15%'>$extensions01_t</td> <td width='85%'>$extensions01</td></tr>
		<tr><td>$extensions02_t</td> <td>$extensions02</td></tr>
		<tr><td>$extensions03_t</td> <td>$extensions03</td></tr>
		<tr><td>$extensions04_t</td> <td>$extensions04</td></tr>
		<tr><td>$extensions05_t</td> <td>$extensions05</td></tr>
		</table>
		</div>";
	}
}

程式碼說明

群組的欄位名稱為 product-extensions

下面5個欄位的欄位名稱分別是product-extensions01、product-extensions02、product-extensions03、product-extensions04、product-extensions05

程式碼：$extensions01 = get_field(‘product-extensions_product-extensions01’);
是用變數 $extensions01 抓取在product-extensions群組內 product-extensions01 的欄位資料(value)
所以抓取到的就是商品名稱欄位的內容

程式碼：$extensions01_d = get_field_object(‘product-extensions_product-extensions01’);
是用變數 $extensions01_d 抓取在 product-extensions01 內的所有資料
包含Label(標籤)、ID、Key、Value…等內容

並使用程式碼：$extensions01_t = $extensions01_d[‘label’];
提取出 product-extensions01 欄位的標籤

最後才能在表格裡 <tr><td>$extensions01_t</td> <td>$extensions01</td></tr>
直接用變數抓取並呈現欄位的標籤名稱+欄位內容

Ps.如果直接使用 $extensions01_t = $extensions01[‘label’]; 的話
抓取出的數值會是亂碼，所以才需要額外多一個 get_field_object 的步驟