WooCommerce添加商品字段的3种方法

在WooCommerce中添加商品字段，不仅能丰富产品信息、提升用户体验，还能增强SEO效果并支持个性化购买。本文将通过WooCommerce内置自定义字段功能、通过ACF等插件可视化操作，以及使用自定义代码实现高度灵活的字段管理，向大家详细介绍WooCommerce添加商品字段的3种实用方法。

一、WooCommerce为什么要添加商品字段

添加商品字段为商店提供了更灵活和用户友好的大门，具体体现如下：

丰富产品信息：向客户提供所有必要的信息，帮助他们更加信任的从事购买行为。
更好的客户体验：帮助购物者一目了然地了解产品，而无需翻阅冗长的描述。
SEO优势：结构化产品数据可以改善页面在搜索结果中的呈现效果，尤其是在自定义字段配合模式标记时。
个性化支持：让客户添加自定义文字、选择颜色或上传文件，个性化购买。
简化后端管理：以结构化的方式存储额外产品数据，使管理大库存更为便捷。

推荐阅读：《谷歌SEO新人友好指南：深入理解Schema结构化数据》

二、WooCommerce添加商品字段的3种方法

方法一：内置的WooCommerce自定义字段选项

用WooCommerce内置工具创建自定义商品字段很简单，因为它不需要额外的插件。不过它需要基本的技术知识，操纵不够友好，且在前端显示字段时灵活性不大。

以下步骤适用于经典产品编辑器和更新的WooCommerce Product Editor（WooCommerce 8.9引入），界面界面可能会根据店铺使用的编辑器略有不同。

对于经典产品编辑器

前往产品-在WordPress仪表盘中添加新产品，也可以编辑已有的产品。
在产品编辑页面，点击页面右上角的屏幕选项按钮。
找到并检查“自定义字段”选项，以启用商品自定义字段。

往下翻页面，直到找到一个名为“自定义字段”的新部分。
在名称输入框中输入新字段的名称，它不会显示在网站上。

在“值”输入框中输入自定义字段的值。这可以是与产品相关的任何内容，例如可以包含序列号或唯一的规格。
点击更新保存字段。
要添加更多自定义商品字段，请使用添加WooCommerce自定义字段按钮。
完成后点击产品编辑器右上角的“更新”。

方法二：使用插件添加商品字段

安装ACF WordPress插件后，前往ACF-field groups。
点击+添加新页面按钮（或添加字段组按钮）。

给field groups起个名称，这仅供内部参考，它不会出现在网站的前端。
选择字段类型，这是产品编辑器中会出现的文本框类型。最常见的类型包括文本、文本区域、号码、范围、电子邮件、网址和密码。
提供现场标签，是后端产品编辑器中WooCommerce字段的名称，这样就知道该提供什么样的价值。
输入标签后，字段名称应该会自动填充，这是WordPress数据库中使用的唯一标识符。它不被用于产品编辑器或前端，如果愿意也可以更改它，但用和标签相符的名字最方便，以防以后需要写PHP代码。

提供默认值，这有助于了解field需要提供哪些信息。
切换到验证标签页，如果用户必须在此商品字段输入某个值，请选中“必需”，如有必要，添加字符限制。
切换到演示标签页，提供任何有助于编辑正确使用该字段的说明。
添加占位符文本以及希望在输入前后出现的任何文本。
设置包装属性，包含将缩短产品编辑器中字段的带宽大小，这使商品字段组更加紧凑，还可以包含自定义CSS类或ID，以便将其转移到网站的前端。
切换到条件逻辑标签页，并启用该滑块，在这里可以创建任何在产品编辑器中显示字段的规则。
向下滚动到设置部分，位置规则选项卡可以决定在WordPress后端的何处显示字段组。要使该字段显示在产品页面上，请设置以下规则：如果“帖子类型”等于“产品”，则显示此商品字段组。

在“演示”标签页中，可以调整商品WooCommerce字段组的样式和位置，并更改标签的位置。
完成后点击顶部的“保存更改”。

现在可以访问WooCommerce产品编辑器，查看新的自定义字段。

方法三：使用自定义代码

如果擅长编辑代码，可以通过在主题的functions.php文件中放置几个片段，手动添加自定义字段到 WooCommerce，这种方法可以完全控制字段的添加、保存和显示方式，但需要一些基础的PHP知识。

粘贴以下代码可以为产品编辑器添加添加一个叫“产品副标题”的字段，该字段具有以下功能：

第一个功能是在产品编辑界面中添加自定义字段。
第二个函数是用update_post_meta将值保存到WordPress数据库。
第三个功能利用get_post_meta检索并显示保存的值在单一产品页面上。

// Add custom field to product edit screen (admin)
add_action('woocommerce_product_options_general_product_data', 'add_custom_product_field');
function add_custom_product_field() {
woocommerce_wp_text_input(array(
'id' => '_product_subtitle',
'label' => __('Product Subtitle', 'woocommerce'),
'placeholder' => 'Enter a subtitle...',
'desc_tip' => true,
'description' => __('This appears under the product title on the front end.', 'woocommerce')
));
}
// Save the custom field value to the database
add_action('woocommerce_process_product_meta', 'save_custom_product_field');
function save_custom_product_field($post_id) {
if (isset($_POST['_product_subtitle'])) {
update_post_meta($post_id, '_product_subtitle', sanitize_text_field($_POST['_product_subtitle']));
}
}
// Display the custom field on the front-end product page
add_action('woocommerce_single_product_summary', 'show_custom_product_field', 6);
function show_custom_product_field() {
global $post;
$subtitle = get_post_meta($post->ID, '_product_subtitle', true);
if (!empty($subtitle)) {
echo '<p class="product-subtitle" style="font-size: 1.1em; color: #555;">' . esc_html($subtitle) . 
'</p>';
}
}

该字段将出现在WooCommerce产品编辑器页面中，所有产品在产品数据框的“通用”标签中，在前端，字段的值会显示在产品主标题下方。

三、如何在前端显示WooCommerce商品字段

给产品添加自定义字段只是工作的一半。如果想让客户看到这些信息，需要在前端展示出来。具体如何实现取决于如何构建WooCommerce产品页面。

1、使用页面构建器（比如Elementor）

许多页面构建器内置动态内容功能，如果你不熟悉代码，想完全掌控设计，这种方法很适合。

例如在Elementor Pro中，可以使用动态标签功能在页面任意位置插入自定义字段值。

Elementor官网：点击直达

推荐阅读：《Elementor Pro插件一年多少钱》

使用高级自定义字段创建自定义字段。
转到WooCommerce产品并为该字段提供值。

切换到Elementor，在页面上添加一个小部件，比如文本编辑器。
点击动态标签图标。
从下拉菜单中选择ACF字段。
单击ACF字段框，然后从键下拉菜单中选择相应的字段。
自定义字段的值会显示在页面上。

2、使用自定义主题或模板

如果用自定义主题（或使用默认的WooCommerce模板文件）构建商店，需要编辑PHP代码以显示自定义字段值，以下是用代码实现的方法。

假设添加了一个名为_product_subtitle的WooCommerce商品自定义字段，希望副标题显示在单一产品页面的产品标题下。

将以下代码添加到主题的functions.php文件。这段代码使用WordPress的动作钩子获取WooCommerce产品摘要区域，提取_product_subtitle自定义字段的值，并作为产品标题下方的一段显示。

可以更改钩子的优先级来重新定位字段：6会把它放在标题下方，11会把它放在价格以下，35会放在“加入购物车”按钮之后。

add_action('woocommerce_single_product_summary', 'display_product_subtitle', 6);
function display_product_subtitle() {
global $post;
$subtitle = get_post_meta($post->ID, '_product_subtitle', true);
if (!empty($subtitle)) {
echo '<p class="product-subtitle" style="font-size: 1.1em; color: #555;">' . esc_html($subtitle) . 
'</p>';
}
}