在 WooCommerce 中，產品屬性提供了一種靈活的方式，可為不同類型的產品定義各種特性。設定產品屬性可以幫助客戶快速找到必要的詳細資訊，從而改善使用者體驗，例如 顏色, 尺寸或 材料.以詳細資訊豐富產品頁面，可增加內容深度，有利於搜尋引擎最佳化 (SEO) 並提高產品能見度。
這篇文章涵蓋了幾種為 WooCommerce 產品頁面新增額外資訊的方法，包括使用 WooCommerce’s 內建功能 進階自訂欄位 (ACF) 外掛程式，以及 自訂程式碼.選擇最適合您需求的方法。
為什麼新增額外資訊可提升使用者體驗和 SEO？
For example, if you sell apparel, customers may want to know about color, size, and fabric. By setting these attributes, WooCommerce automatically displays them under the “其他資訊” tab on the product page, allowing users to access essential details quickly. This functionality enables better product comparison for users and improves the page’s SEO performance by adding relevant content.
Method 1: Adding Additional Information Using WooCommerce’s Built-In Features
WooCommerce 提供了直接在產品編輯畫面中加入產品屬性的簡單方法。以下是步驟：
步驟 1：登入 WooCommerce 控制面板
Navigate to the WordPress dashboard, click “產品,” and select the product for which you want to add additional information.
Step 2: Locate the “Product Data” Section
In the product editor, scroll down to the “產品資料” panel, and select the “屬性" 標籤。
步驟 3：新增屬性
按一下" "。新增” button to define new attributes such as “顏色「 或 」尺寸."
- Enter the attribute name, for example, “顏色."
- Separate attribute values with a vertical bar (|), such as “Red | Blue | Green.”
步驟 4：設定屬性可見性
Check the “Visible on the product page” option to ensure these attributes appear under the “Additional Information” tab on the product page.
步驟 5：儲存及更新產品
按一下" "。更新” button to save your changes. Once saved, the “Additional Information” tab on the product page will automatically display these attributes.
範例
If you’re selling a T-shirt that comes in three colors (Red, Blue, Green) and three sizes (S, M, L), you can set the “Color” attribute to “Red | Blue | Green” and the “Size” attribute to “S | M | L.” When the “Visible on the product page” option is checked, customers will see these options under the “Additional Information” tab.
方法 2：使用安全自訂欄位 (SCF) 外掛程式新增額外資訊
While WooCommerce’s built-in attributes are helpful, more is needed for certain needs. With the 安全自訂欄位 (SCF) 外掛程式，您可以新增更多自訂欄位，以顯示其他產品詳細資訊，例如材質和保養說明。
步驟 1：安裝 ACF 外掛程式
Go to “外掛程式” in the WordPress dashboard, search for “安全自訂欄位,” and click “Install” and “Activate.”
步驟 2：建立欄位群組
Go to “SCF” from the WordPress dashboard and select “Add New Field Group.” This allows you to define custom fields for your products.
步驟 3：定義欄位
Within the field group, add new fields such as “材質「 或 」保養說明.” Choose field types like text, text area, or image as needed.
Here’s a breakdown of some common field types:
- 正文: This field is ideal for short, single-line inputs. For example, you might use it for a “Material” field if you only need to list one or two materials, such as “100% Cotton” or “Stainless Steel.”
- 文字區域: This is useful for longer descriptions. You might use it for “Care Instructions,” where you can provide detailed washing or handling information, like “Hand wash only. Do not tumble dry.”
- 圖片: This option allows you to add images. It could be used for fields like “Product Certification,” where you want to display a certification logo or quality seal.
範例：
假設您銷售木質傢俱，並想要新增下列自訂欄位：
- 材質—This could be a “Text” field to input specific wood types, such as “Oak” or “Maple.”
- 保養說明 – Set this as a “Text Area” where you can detail care tips, such as “Wipe with a dry cloth. Avoid direct sunlight.”
- 認證標誌 – Use an “Image” field to upload a certification seal or eco-friendly badge.
定義這些欄位後，它們會出現在產品編輯器中，讓您輸入每個產品的特定資訊。
步驟 4：設定顯示規則
In the “Settings” section, define the conditions under which these custom fields should be displayed on product pages. You can apply these fields to all products or specific categories, tags, or even individual products.
步驟 5：在產品編輯器中輸入資訊
Once the fields are defined and display rules are set, go to the WooCommerce product editor for any product that meets the criteria. You will now see the custom fields you’ve created and can enter relevant information for each one.
步驟 6：修改產品範本（可選）
To display these custom fields on the front end of the product page, you may need to edit WooCommerce’s template files (e.g., single-product.php). Use SCF’s the_field() function to output the field values like so:
<div class="product-material">
<h4>材質：</h4>
<p><?php the_field('material'); ?></p>
</div>方法 3：使用自訂程式碼加入額外資訊
By adding code to your theme’s functions.php file, you can add fields directly to the WooCommerce product editing screen for more advanced customization.
步驟 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：儲存自訂欄位值
Use the woocommerce_process_product_meta hook to save the custom field’s value.
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>';Managing the WooCommerce “Additional Information” Tab
The “Additional Information” tab in WooCommerce is useful for displaying detailed product attributes, but you may want to customize its content or even hide it in some instances.
Adding Custom Text to the “Additional Information” Tab
To add custom content, like a link, to the “Additional Information” tab, use the following code:
add_action( 'woocommerce_product_additional_information', 'print_custom_html' )；
function print_custom_html() {
echo '<a href="#">點選此處瞭解更多產品詳細資訊</a>';
}Hiding or Removing the “Additional Information” Tab
If a product doesn’t require additional information (e.g., a digital product), you can remove this tab with the following code:
add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 98 );
function remove_additional_information_tab( $tabs ) {
unset( $tabs['additional_information'] );
return $tabs;
}總結
Adding additional information to WooCommerce product pages enhances user experience and SEO. WooCommerce’s built-in features, plugins like Secure Custom Fields (SCF), and custom coding provide flexible options to enrich product pages with details like color, size, material, care instructions, and certifications.
- 使用內建功能: Quickly add attributes directly to the product editor, enhancing user experience by displaying essential details in the “Additional Information” tab.
- 使用 SCF 外掛程式超越基本功能，建立自訂欄位以呈現特定產品的詳細資訊，例如材質或保養說明，讓您能針對不同的產品類型進行更好的資訊管理和自訂。
- 使用自訂程式碼:對於進階的客製化功能，直接在 functions.php 檔案中加入自訂欄位的程式碼，可完全控制產品頁面的資訊呈現方式。
Managing the “Additional Information” tab allows you to add, modify, or remove content depending on product needs, ensuring your customers can access relevant information without unnecessary clutter. Overall, enriching WooCommerce product pages helps customers make informed purchasing decisions, increasing conversions while improving your site’s SEO.