WooCommerce 商品頁常用小代碼：分頁改名、購買須知、已售出數量、隱藏相關商品

WooCommerce 的商品頁，預設是：商品圖、名稱、價格、簡短說明、加入購物車，下面是「描述／額外資訊／評價」三個分頁，最後是「相關商品」。

很多店家想做一點小調整，這篇整理 4 段常用的程式碼：

1. 分頁：拿掉「額外資訊」、「描述」改名、新增「購買須知」
2. 價格下面顯示「已售出 N 件」
3. 不顯示「相關商品」
4. 隱藏「貨號、分類」那一區

都放在子佈景主題的 functions.php，或用 Code Snippets 這類外掛新增，可以只挑需要的。

1. 分頁：改名、拿掉、新增「購買須知」

// 商品頁的分頁：拿掉「額外資訊」、「描述」改名、新增「購買須知」
add_filter( 'woocommerce_product_tabs', function ( $tabs ) {
	unset( $tabs['additional_information'] );

	if ( isset( $tabs['description'] ) ) {
		$tabs['description']['title'] = '商品介紹';
	}

	// 「購買須知」的內容寫在網址代稱是 shopping-notice 的頁面，改內容不用動程式碼
	$notice = get_page_by_path( 'shopping-notice' );
	if ( $notice ) {
		$tabs['zw_notice'] = array(
			'title'    => '購買須知',
			'priority' => 15, // 描述是 10、評價是 30，數字小的排前面
			'callback' => function () use ( $notice ) {
				echo '<h2>購買須知</h2>';
				echo apply_filters( 'the_content', $notice->post_content );
			},
		);
	}
	return $tabs;
}, 98 );

// 分頁裡面的小標題也跟著改
add_filter( 'woocommerce_product_description_heading', function () {
	return '商品介紹';
} );

• woocommerce_product_tabs 拿到所有分頁的清單，可以刪、改名、調順序、新增。三個內建分頁的代號是 description（描述）、additional_information（額外資訊）、reviews（評價）。
• 額外資訊：顯示重量、尺寸和商品屬性。商品沒填這些，或用不到，就可以拿掉。
• 改名：分頁標題改成「商品介紹」，下面的 woocommerce_product_description_heading 把分頁裡面的小標題也改掉。只改分頁標題的話，點開後裡面還是寫「描述」。
• 購買須知：出貨時間、運費、退換貨方式，每個商品都一樣，適合放成一個分頁。內容寫在一個網址代稱是 shopping-notice 的頁面裡，要改內容就去改那個頁面，不用動程式碼。這個頁面存成草稿也讀得到，訪客不會從網址單獨看到它；想讓它也是一個公開的頁面，就直接發佈。
• priority 決定順序，數字小的在前面：描述是 10、額外資訊 20、評價 30。購買須知設 15，排在商品介紹和評價中間。

2. 價格下面顯示「已售出 N 件」

// 價格下面顯示「已售出 N 件」（賣出 10 件以上才顯示）
add_action( 'woocommerce_single_product_summary', function () {
	global $product;
	if ( ! $product instanceof WC_Product ) {
		return;
	}
	$sold = (int) $product->get_total_sales();
	if ( $sold >= 10 ) {
		printf( '<p class="zw-sold">已售出 %s 件</p>', esc_html( number_format_i18n( $sold ) ) );
	}
}, 11 ); // 價格是 10，11 就接在價格後面

• woocommerce_single_product_summary 是商品頁右邊那一欄的位置，WooCommerce 依數字排順序：標題 5、價格 10、簡短說明 20、加入購物車 30。用 11 就會接在價格後面。
• get_total_sales() 是 WooCommerce 自己記的銷售數量，以件數計算（一張訂單買 3 個算 3 件）。
• 賣出 10 件以上才顯示，剛上架的商品不會出現「已售出 0 件」這種反效果的字。門檻自己調整。

WooCommerce 什麼時候加、減這個數字（看原始碼確認的）：訂單變成「保留」「處理中」或「完成」時加上去；訂單取消、丟到垃圾桶、刪除時扣回來。退款不會扣，有退款的商品數字會比實際多一點。

3. 不顯示「相關商品」

// 商品頁不顯示「相關商品」
add_filter( 'woocommerce_related_products', '__return_empty_array' );

相關商品是 WooCommerce 從同分類、同標籤的商品裡隨機挑的，有時候挑到不搭的商品，或店家只想讓客人專心看這一個商品。讓「相關商品」的清單變成空的，整個區塊（包含「相關商品」標題）就不會出現。

網路上常見的另一種寫法是移除 woocommerce_output_related_products 這個動作。我們兩種都測了：移除動作的寫法在 Twenty Twenty-One 有效，在 Twenty Twenty-Five 相關商品還是會出現（區塊佈景主題的相關商品是另一個區塊）；上面清空清單的寫法，兩個佈景主題都有效。

4. 隱藏「貨號、分類」那一區

// 商品頁不顯示「貨號、分類、標籤」那一區（後台的貨號欄位照常可以填）
add_action( 'init', function () {
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 ); // 傳統佈景主題
} );
add_filter( 'render_block_woocommerce/product-meta', '__return_empty_string' ); // 區塊佈景主題

加入購物車按鈕下面那一小區，會顯示「貨號：SOAP-LAV」「分類：手工皂」。貨號是店家內部用的，很多店不想給客人看。

• 傳統佈景主題：拿掉 woocommerce_template_single_meta 這個動作。
• 區塊佈景主題：這一區是「產品中繼資料」區塊，用 render_block_woocommerce/product-meta 讓它輸出空白。
• 兩行都加，換佈景主題也不用改。後台編輯商品時，貨號欄位照常可以填，庫存管理、訂單裡也都還看得到貨號。

實際測試的結果

測試商品「薰衣草手工皂」：有貨號、分類、重量，已售出 23 件，同分類另外有 2 個商品。

Twenty Twenty-Five（區塊佈景主題）和 Twenty Twenty-One（傳統佈景主題）的結果完全一樣：

• 分頁：描述／額外資訊／評價，變成商品介紹／購買須知／評價，分頁裡的小標題也改成「商品介紹」。
• 購買須知：讀到草稿頁面的內容。
• 已售出：價格下方顯示「已售出 23 件」；改成 9 件就不顯示。
• 相關商品：整區不見。
• 貨號、分類：前台不見，後台的貨號欄位還在。

區塊佈景主題的商品頁是用區塊組成的，原本擔心 woocommerce_single_product_summary 這類傳統的掛鉤不會執行。實測 WooCommerce 11.2.1 在區塊商品頁也會執行這些掛鉤，「已售出」一樣出現在價格下面。換成其他區塊佈景主題，或在網站編輯器裡大幅改過商品頁範本，加上程式碼後還是要打開商品頁確認位置。

延伸閱讀

• WooCommerce 結帳欄位怎麼改？移除、改名、設為必填的程式碼與區塊結帳注意事項
• WooCommerce 價格顯示成「100 元」、隱藏 NT$ 貨幣符號的設定方法
• WooCommerce 加入購物車後直接到結帳頁

正威網路行銷是 25 年經驗的基隆網頁設計工作室，購物車／電商方案包含購物車、金流、會員與訂單管理，台北與全台客戶也歡迎來聊聊。