在 WooCommerce 中，產品屬性提供了一種靈活的方式，可為不同類型的產品定義各種特性。設定產品屬性可以幫助客戶快速找到必要的詳細資訊，從而改善使用者體驗，例如 顏色, 尺寸或 材料.以詳細資訊豐富產品頁面，可增加內容深度，有利於搜尋引擎最佳化 (SEO) 並提高產品能見度。

這篇文章涵蓋了幾種為 WooCommerce 產品頁面新增額外資訊的方法，包括使用 WooCommerce 的 內建功能 進階自訂欄位 (ACF) 外掛程式，以及 自訂程式碼.選擇最適合您需求的方法。

為什麼新增額外資訊可提升使用者體驗和 SEO？

例如，如果您銷售服裝，客戶可能想知道顏色、尺寸和布料。透過設定這些屬性，WooCommerce 會自動在" "下顯示它們。其他資訊"標籤，讓使用者可以快速存取重要的詳細資訊。此功能可讓使用者更好地比較產品，並透過增加相關內容改善頁面的 SEO 效能。

方法 1：使用 WooCommerce 的內建功能新增額外資訊

WooCommerce 提供了直接在產品編輯畫面中加入產品屬性的簡單方法。以下是步驟：

步驟 1：登入 WooCommerce 控制面板

導覽到 WordPress 面板，按一下" "。產品," 並選擇您要新增額外資訊的產品。

步驟 2：找到「產品資料」部分

在產品編輯器中，向下捲動到 "產品資料「面板，然後選擇」屬性" 標籤。

步驟 3：新增屬性

按一下" "。新增「按鈕定義新屬性，例如」顏色「 或 」尺寸.”

• 輸入屬性名稱，例如 "顏色.”
• 以垂直條 (|) 分隔屬性值，例如 "Red | Blue | Green"。

步驟 4：設定屬性可見性

勾選「在產品頁面上可見」選項，以確保這些屬性出現在產品頁面的「附加資訊」標籤下。

步驟 5：儲存及更新產品

按一下" "。更新"按鈕儲存您的變更。儲存後，產品頁面上的「附加資訊」標籤會自動顯示這些屬性。

範例

如果您銷售的 T 恤有三種顏色 (紅、藍、綠) 和三種尺寸 (S、M、L)，您可以將 「顏色」 屬性設定為 "Red | Blue | Green「，並將 」尺寸「 屬性設定為 」S | M | L"。當勾選 「在產品頁面上可見 」選項時，客戶就會在 「其他資訊 」標籤下看到這些選項。

方法 2：使用安全自訂欄位 (SCF) 外掛程式新增額外資訊

雖然 WooCommerce 內建的屬性很有幫助，但某些需求還是需要更多。使用 安全自訂欄位 (SCF) 外掛程式，您可以新增更多自訂欄位，以顯示其他產品詳細資訊，例如材質和保養說明。

步驟 1：安裝 ACF 外掛程式

前往 "外掛程式「在 WordPress 的儀表板中，搜尋 」安全自訂欄位，「然後按一下 」安裝「 和 」啟動"。

步驟 2：建立欄位群組

前往 "SCF「 從 WordPress 面板，然後選擇 」新增欄位群組"。這可讓您為產品定義自訂欄位。

步驟 3：定義欄位

在欄位群組中，新增欄位，例如"材質「 或 」保養說明."根據需要選擇文字、文字區域或影像等欄位類型。

以下是一些常見欄位類型的細分：

• 正文:此欄位適用於簡短的單行輸入。例如，如果您只需要列出一或兩種材料，如 「100% 棉 」或 「不銹鋼」，則可以將其用於 「材料 」欄位。
• 文字區域:這對較長的描述很有用。您可以將其用於 「保養說明」，提供詳細的洗滌或處理資訊，如 "僅手洗。請勿烘乾"。
• 圖片:此選項可讓您新增圖片。它可以用於「產品認證」等欄位，在這些欄位中，您想要顯示認證標誌或品質標章。

範例：

假設您銷售木質傢俱，並想要新增下列自訂欄位：

1. 材質-這可以是一個「文字」欄位，用來輸入特定的木材類型，例如「橡木」或「楓木」。

2. 保養說明 - 將此設定為「文字區」，您可以在此詳細說明保養提示，例如「用乾布擦拭」。避免陽光直射"。

3. 認證標誌 - 使用「圖片」欄位上傳認證標章或環保徽章。

定義這些欄位後，它們會出現在產品編輯器中，讓您輸入每個產品的特定資訊。

步驟 4：設定顯示規則

在「設定」區段中，定義這些自訂欄位應該顯示在產品頁面上的條件。您可以將這些欄位套用至所有產品或特定類別、標籤，甚至個別產品。

步驟 5：在產品編輯器中輸入資訊

定義欄位並設定顯示規則後，請前往 WooCommerce 產品編輯器，選擇任何符合條件的產品。現在您會看到已建立的自訂欄位，並可為每個欄位輸入相關資訊。

步驟 6：修改產品範本（可選）

要在產品頁面的前端顯示這些自訂欄位，您可能需要編輯 WooCommerce 的範本檔案 (例如：single-product.php)。使用 SCF 的 the_field() 函數輸出欄位值，就像這樣：

<div class="product-material">

    <h4>材質：</h4>

    <p><?php the_field('material'); ?></p>

</div>

方法 3：使用自訂程式碼加入額外資訊

只要在主題的 functions.php 檔案中加入程式碼，就可以直接在 WooCommerce 產品編輯畫面中加入欄位，進行更進階的自訂。

步驟 1：新增自訂欄位至產品編輯器

使用 woocommerce_product_options_general_product_data 鈎來新增自訂欄位到產品編輯畫面。

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' )；

function add_custom_general_fields() {

    woocommerce_wp_text_input( array(

        'id' => '_custom_product_text_field'、

        'label' => __( 'Custom Product Field', 'woocommerce' )、

        'desc_tip' => 'true'、

        'description' =>__( 'Enter custom field content', 'woocommerce' )

    ));

}

步驟 2：儲存自訂欄位值

使用 woocommerce_process_product_meta 鈎儲存自訂欄位的值。

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' )；

function save_custom_general_fields( $post_id ) {

    $custom_field_value = isset( $_POST['_custom_product_text_field'] ) ? sanitize_text_field( $_POST['_custom_product_text_field'] ) : ''；

    update_post_meta( $post_id, '_custom_product_text_field', $custom_field_value )；

}

步驟 3：在產品頁面上顯示自訂欄位

要在前端顯示自訂欄位，請在 WooCommerce 產品範本中使用 get_post_meta()。

echo '<div class="custom-field">';

echo '<label>自訂欄位： </label> ';

echo get_post_meta( get_the_ID(), '_custom_product_text_field', true )；

echo '</div>';

管理 WooCommerce「附加資訊」標籤

WooCommerce 中的「附加資訊」標籤對於顯示詳細的產品屬性非常有用，但您可能想要自訂其內容，甚至在某些情況下隱藏它。

在「附加資訊」標籤中加入自訂文字

若要在 「附加資訊 」標籤中加入自訂內容（如連結），請使用下列程式碼：

add_action( 'woocommerce_product_additional_information', 'print_custom_html' )；

function print_custom_html() {

    echo '<a href="#">點選此處瞭解更多產品詳細資訊</a>';

}

隱藏或移除「附加資訊」標籤

如果產品不需要額外資訊（例如數位產品），您可以使用下列程式碼移除此標籤：

add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 98 )；

function remove_additional_information_tab( $tabs ) {

    unset( $tabs['additional_information'] )；

    return $tabs；

}

總結

在 WooCommerce 產品頁面中加入額外資訊可提升使用者體驗與 SEO。WooCommerce 的內建功能、安全自訂欄位 (SCF) 等外掛程式，以及自訂編碼提供了彈性的選項，讓您可以在產品頁面中加入顏色、尺寸、材質、保養說明和認證等詳細資訊。

• 使用內建功能:直接在產品編輯器中快速新增屬性，透過在「附加資訊」標籤中顯示重要詳細資訊，提升使用者體驗。
• 使用 SCF 外掛程式超越基本功能，建立自訂欄位以呈現特定產品的詳細資訊，例如材質或保養說明，讓您能針對不同的產品類型進行更好的資訊管理和自訂。
• 使用自訂程式碼:對於進階的客製化功能，直接在 functions.php 檔案中加入自訂欄位的程式碼，可完全控制產品頁面的資訊呈現方式。

管理「附加資訊」標籤可讓您根據產品需求新增、修改或移除內容，確保您的客戶能夠存取相關資訊，而不會產生不必要的雜亂。總而言之，豐富 WooCommerce 產品頁面有助於客戶做出明智的購買決定，提高轉換率，同時改善您網站的 SEO。