如何为 WooCommerce 产品页面添加附加信息以提升用户体验和 SEO

什么是 WooCommerce 的附加信息？

WooCommerce 附加信息通常是指产品页面上的一个部分，用来显示产品的属性和其他自定义信息。这些信息对于顾客来说至关重要，特别是在涉及多种产品选择（如尺寸、颜色或材质）时。附加信息不仅能帮助买家做出明智的购买决定，还能通过丰富的内容提升搜索引擎优化（SEO）。

属性的作用

WooCommerce 的属性功能非常灵活，可以帮助定义产品的各种特性。例如，服装类产品可以有颜色和尺寸等属性，而家居类产品则可能需要包括材质、重量、尺寸等详细信息。设置这些属性后，它们将自动显示在产品页面的“附加信息”选项卡中。

如何向 WooCommerce 产品添加附加信息

方法 1：使用 WooCommerce 内置功能

WooCommerce 提供了一个简单直接的方法来向产品页面添加附加信息。以下是使用 WooCommerce 内置功能添加产品属性的步骤：

1. 登录 WooCommerce 后台：导航到 WordPress 仪表板，然后点击“产品”。

2. 选择产品：找到要编辑的产品，点击编辑进入产品编辑页面。
3. 找到“产品数据”部分：在主要描述下方，找到产品数据表格，在其中选择“属性”选项。

3. 添加属性：点击“添加”按钮，可以为产品定义新的属性，例如“颜色”、“尺寸”等。
   • 在“属性名称”字段中输入属性名称。
   • 使用竖线分隔不同属性值，如“粉色 | 蓝色 | 绿色”。

4. 保存属性：勾选“产品页面上可见”选项，以确保这些属性显示在前端产品页面的“附加信息”选项卡中。

5. 更新产品：点击“更新”按钮，保存对产品的修改。

通过这些步骤，可以轻松地为 WooCommerce 产品添加必要的附加信息，并且这些信息会自动显示在产品页面的“附加信息”选项卡中。

方法 2：使用插件（高级自定义字段 – ACF）

如果 WooCommerce 内置的属性不能满足你的需求，可以使用插件来扩展产品页面的功能。例如，“高级自定义字段（ACF）”插件可以让你轻松地添加和显示更多自定义字段，帮助你展示更详细的产品信息。以下是具体步骤：

1. 安装 ACF 插件：在 WordPress 插件库中搜索“Advanced Custom Fields”，然后点击安装并激活插件。

2. 创建字段组：在 WordPress 仪表板中导航到“ACF”菜单，点击“添加新字段组”。

3. 定义字段：创建新的自定义字段，例如文本、图像、文本区域等，并为每个字段命名。例如，可以添加“材料”、“保养说明”等字段。

4. 设置显示规则：下拉至“设置”，选择在哪些产品页面上显示这些自定义字段，可以是所有产品，也可以根据类别、标签等进行条件性显示。

5. 在产品页面中显示：在产品编辑页面中，你将看到自定义字段并可以填写相关信息。

6. 修改产品模板：为了让这些自定义字段在产品页面的前端显示，需要编辑 WooCommerce 的模板文件，例如single-product.php，并使用 ACF 的the_field()函数来显示自定义字段。

方法 3：使用自定义代码

如果喜欢手动定制 WooCommerce 产品页面，也可以通过在主题的functions.php文件中添加自定义代码来实现。以下是向 WooCommerce 产品添加自定义字段的基本步骤：

1. 向 WooCommerce 产品添加自定义字段 使用add_action()函数将新的自定义字段添加到 WooCommerce 产品编辑页面中。

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' => __( '自定义产品字段', 'woocommerce' ), 'desc_tip' => 'true', 'description' => __( '输入自定义字段内容', '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 的“附加信息”选项卡对显示产品详细信息非常有用。但有时可能需要调整这个选项卡的显示方式、内容，甚至是删除它。以下是几个常见的操作：

向“附加信息”选项卡添加自定义文本

如果你想在“附加信息”选项卡中添加一些自定义链接或文字，可以在functions.php文件中插入以下代码：

add_action( 'woocommerce_product_additional_information', 'print_custom_html' );
function print_custom_html() {
    echo '<a href="#">点击此处获取更多产品信息</a>';
}

该代码将在“附加信息”选项卡中添加一个可点击的链接，可以根据需要自定义链接的文本和目标 URL。

隐藏或删除“附加信息”选项卡

如果某些产品不需要显示附加信息（例如数字产品），可以选择隐藏或完全删除该选项卡：

• 使用 PHP 删除附加信息选项卡：

add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98 );
function remove_product_tabs( $tabs ) {
    unset( $tabs['additional_information'] );
    return $tabs;
}

• 使用 CSS 隐藏附加信息选项卡：

li.additional_information_tab {
    display: none !important;
}

结论

通过有效地向 WooCommerce 产品页面添加附加信息，可以为客户提供更详尽的产品信息，改善用户体验，并提升产品页面的 SEO 表现。无论是使用 WooCommerce 内置功能，还是通过插件和自定义代码进行高级设置，都可以帮助你根据商店的需求优化产品展示。