如何自訂 WooCommerce 商品分頁？

「商品分頁」會出現在商品頁面上，能提供更完整的商品資訊，你可以根據實際需求自訂 WooCommerce 商品分頁，包含新增分頁、移除分頁、重新命名分頁、重新排列分頁等等。本篇文章將一一為你說明。

如何新增商品分頁？

WooCommerce 預設的商品分頁包含描述、額外資訊、評價，如果你想要新增其他分頁，例如：注意事項、版權說明、使用教學，可以參考下方提供的三種方法。

使用佈景主題新增

某些佈景主題已有新增商品分頁的功能，例如：Blocksy。新增的方法很簡單，只需三個步驟即可完成，如下：

步驟

啟用 Custom Tabs 功能

安裝並啟用 Blocksy Pro 後，在左側選單找到 Blocksy 並點選「Dashboard」。
將分頁切換成「擴充功能」並前往 [Shop Extra]→[Custom Tabs]。
啟用 Custom Tabs 後，點選「管理」。

步驟

新增商品分頁內容

你需要新增商品分頁並輸入標題及內容。

步驟

設定顯示條件

最後一個步驟是設定顯示條件，你需要將新增好的「商品分頁」套用在指定商品上。

新增 WooCommerce 商品分頁實際案例

案例網址：https://wpelectrinc.com/product/content-checklist/

使用外掛新增

如果你使用的佈景主題沒有新增商品分頁的功能，可以考慮使用 Custom Product Tabs for WooCommerce 這款免費外掛實現，製作過程如下：

步驟

安裝 Custom Product Tabs for WooCommerce 外掛

前往 [外掛]→[安裝外掛] 後，搜尋 Custom Product Tabs for WooCommerce，接著點選 [立即安裝] 按鈕。安裝完成後，再點選 [啟用] 按鈕。

步驟

新增商品分頁

進入商品頁面後，前往商品資訊，然後點擊「Custom Tabs」，接著點選「Add a Tab」以新增欄位。

步驟

新增分頁內容

你需要輸入分頁標題及內容。輸入完成後，點擊「Save Tabs」按鈕後便大功告成！

如果你的商品分頁會套用在很多商品上，可以先將其儲存，再新增至指定商品。未來如有更改分頁內容，會一次套用完成，不需要逐一調整，非常方便。

使用程式碼片段新增

你可以將下方程式碼片段新增至子佈景主題functions.php檔案或者使用 FluentSnippets 外掛新增。需要注意的是，這個程式碼片段新增的是「全域」商品分頁，也就是會套用在所有商品上。

/**
 * 新增 WooCommerce 商品分頁
 */
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
	
	// 新增新分頁
	
	$tabs['test_tab'] = array(
		'title' 	=> __( 'New Product Tab', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'woo_new_product_tab_content'
	);

	return $tabs;

}
function woo_new_product_tab_content() {

	// 商品分頁內容

	echo '<h2>商品分頁名稱</h2>';
	echo '<p>商品分頁內容</p>';
	
}

如何移除商品分頁？

移除預設的商品分頁只需新增下方程式碼片段新增至子佈景主題functions.php檔案或者使用 FluentSnippets 外掛新增。

/**
 * 移除商品分頁
 */
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );  
    unset( $tabs['reviews'] ); 		
    unset( $tabs['additional_information'] );  

    return $tabs;
}

如何重新排列商品分頁？

重新排列預設的商品分頁只需新增下方程式碼片段新增至子佈景主題functions.php檔案或者使用 FluentSnippets 外掛新增。

/**
 * 重新排列商品分頁
 */
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {

	$tabs['reviews']['priority'] = 5;			// 第一順位
	$tabs['description']['priority'] = 10;			// 第二順位
	$tabs['additional_information']['priority'] = 15;	// 第三順位

	return $tabs;
}

如何重新命名商品分頁？

重新命名預設的商品分頁只需新增下方程式碼片段新增至子佈景主題functions.php檔案或者使用 FluentSnippets 外掛新增。

/**
 * 重新命名商品分頁
 */
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {

	$tabs['description']['title'] = __( '商品說明' );
	$tabs['reviews']['title'] = __( '客人評價' );	

	return $tabs;

}

重新命名 WooCommerce 商品分頁實際案例