如何在WooCommerce中为产品添加自定义字段

尼耳多
1,495 阅读10分钟

作者：Vincy。最后修改于2022年7月11日。

WooCommerce是顶级电子商务软件中最好的，是免费的。它是基于WordPress平台的。使用WooCommerce平台设置购物车是非常容易的。

在以前的文章中，我们已经看到了一些基于WooCommerce的代码，用于以下实用程序。

WooCommerce的产品展示区显示的是符合客户需求的信息。有时，初步的细节不能传达所有的信息，让客户确定他们的命运。

这就需要使用自定义字段集成添加额外的信息。WooCommerce插件支持通过管理界面向产品添加自定义字段。

我们将在下面看到这些选项和它们的使用方法。

为什么WooCommerce商店的管理员需要自定义字段

在给产品添加自定义字段之前，先了解一下为什么WooCommerce商店需要这个。

因为，有些商店有一个常规的产品库，里面有常规的数据，如标题、图片和价格。在这种情况下，自定义字段是不需要的。

下面的列表显示了WooCommerce商店的这个自定义字段功能的优势。

  • 添加产品元数据，用于显示产品的额外信息。
  • 允许客户提供更多关于购买产品的规格。
  • 添加用户友好的交互式字段，以节省他们的精力，给予定制。
  • 增加促销、优惠、折扣和所有。
  • 支持终端用户指定交货日期、时间和地点。
  • 通过切换自定义开关来应用税收和运输。

WooCommerce插件支持的自定义字段创建类型

现有的WooCommerce插件可以为产品添加两种类型的自定义字段。

  1. 数据字段 - 该字段接受要在用户界面上显示的信息。
  2. 附加字段 - 在店面收集用户的数据的字段。

1.数据字段 - 该字段接受要在用户界面上显示的信息

这个自定义字段是用来显示除了常规的标题、价格和所有信息之外的更多信息。这将有助于显示关于功能、版本、评级和所有的产品元数据。

例如，一个显示器，要显示额外的信息，如。

品牌戴尔
型号戴尔20H
屏幕尺寸23
功能特点HDMI，防眩光

2.附加字段 - 在店面收集用户数据的字段

这种类型的自定义字段是为客户创建选项来进行互动。它允许在所追求的产品上添加更多的规格或定制。

它是为了让客户在购买产品时增加个性化的信息。例如。

  • 一个多选项字段来选择T恤的尺寸或颜色。
  • 一个文本字段用来收集要刻在购买的笔上的品牌名称。

在WooCommerce中添加自定义字段显示的方法

  1. 使用WooCommerce插件。
  2. 添加代码来显示产品的自定义字段。

方法1：使用插件

我们已经采取了三个插件来支持在WooCommerce商店中为产品添加自定义字段。这些都具有高级功能，也很容易设置。

  1. WooCommerce的高级产品字段
  2. WooCommerce的产品附加组件
  3. 高级自定义字段

1.WooCommerce的高级产品字段

这个插件用于在WooCommerce产品页面上添加额外的字段。它有助于嵌入产品附加字段，让客户对订单进行个性化定制。

请看下面的插件细节和先决条件。

版本4.5或更高版本
活跃安装20,000+
PHP版本5.6 或更高
最后更新2周前

功能介绍

  • 在产品页面上选择的自定义产品字段可以延续到购物车和结账页面。它在整个流程中是持久的，直到收到订单。
  • 后台平滑的产品字段生成器有一个无缝的体验。
  • 它可以选择添加多个价格，以便在选择时操纵产品的基本价格。
  • 它支持所有可能的交互式字段与显示隐藏选项。
  • 它允许产品和自定义字段映射界面来控制可见性。
  • 可以进行WooCommerce税收数字的定制。
  • 在可翻译的主题中多语言。

使用步骤

从WordPress官方仓库下载这个插件。然后为WooCommerce商店安装并激活它。如果你是WordPress的新手，那么请看这里如何设置一个插件。

  1. 通过WooCommerce的管理菜单进入产品->添加新产品。
  2. 点击 "产品数据 "面板下的 "自定义字段"。
  3. 配置 "字段组布局 "设置。这是为了指定标签或字段注释的位置，如果有的话。此外，它有助于将一个字段标记为强制性的。
  4. 选择 "添加第一个字段 "或 "添加字段 "并指定字段类型、标签和所有。
  5. 添加条件规则，在要显示的字段之间添加依赖关系。

这是WooCommerce的管理界面，用于添加产品的自定义字段。我为产品添加了尺寸选项，作为一个比率组。

advanced product field setting

这将在产品前端显示添加的自定义字段为单选。

advanced product field output

2.WooCommerce的产品插件

这个插件从它的名字本身就清楚地说明了它的目的。是的，它是为了增加更多的附加字段，让客户与商店互动，以实现个性化购买。

一个简单的自定义表单生成器可以为WooCommerce商店页面建立一个字段组。请看一下下面的版本和其他细节。

WordPress版本4.0或更高版本
有效安装30,000+
PHP版本5.6或更高版本
最后更新于3周前

从链接的WordPress仓库下载该插件。该插件提供了一个拖放界面来为产品建立自定义字段组。

功能特点

  • 能够实现采购订单的个性化。
  • 它通过在后台为产品添加的自定义字段保存客户的个性化数据。
  • 构建器帮助设计一个自定义字段组。
  • 允许更多类型的字段，如文本、数字和电子邮件字段，组合字段和所有。
  • 在基本版本中，它允许添加

    和<h*>标签，在前端显示产品元。

使用步骤

有几个步骤可以在WooCommerce主题的产品页面上添加和显示一个自定义字段。

  1. 通过WordPress管理菜单进入产品->自定义产品插件。
  2. 添加一个新的产品自定义字段组的形式，并发布它。
  3. 进入产品，打开一个新的或编辑产品面板。
  4. 从产品数据组中选择*"自定义产品选项"*。
  5. 勾选表格，在自定义字段和产品之间添加映射。

请看下面两个截图，为产品添加自定义字段并进行映射。

product addons settings

product addons mapping

然后，WooCommerce商店将在单一产品页面上显示自定义字段。

product addons output

3.高级自定义字段

它支持对WordPress编辑界面和自定义表单数据的完全控制。

WordPress版本4.7或更高版本
活跃的安装量200万以上
PHP版本5.6 或更高
最后更新6 天前

这个简单直观的插件具有强大的功能和30多种字段类型。

功能介绍

  • 它提供强大的功能来定制和添加产品的自定义字段
  • 良好而简单的后台界面，可以根据需要添加自定义字段组。
  • 支持30多种字段类型，可以在标准的自定义产品字段之外设置更多数据。

定制的步骤

在阅读下面的步骤之前，通过管理员下载或安装，启用这个插件。

  1. 添加和自定义字段组。
  2. 将表单字段添加到该组。
  3. 为产品页面上的自定义字段添加数据。
  4. 在前端显示产品信息。

步骤1：添加和自定义字段组

通过管理菜单转到自定义字段。添加一个新的字段组并指定UI位置和其他设置。

它有助于设置状态和样式，在产品页面上添加和显示自定义字段。它可以管理用户界面上字段的相对位置和排列。

字段也可以被映射到帖子、产品、页面和更多。

第2步：将表单字段添加到组中

字段添加界面允许输入以下数据。对于组合字段，它要求输入多个选项来加载。

  • 标签、名称、类型。
  • 字段注释或帮助文本。
  • 如果该字段是必需的或不是。
  • 定位器和默认值。
  • 预置或附加的内容。
  • 字符限制，规则。
  • 字段包装类或ID。

第3步：为基于产品的自定义字段添加数据

如果自定义字段组被映射到产品页面的位置，那么添加/编辑页面将显示它。

为自定义字段添加数据，这些字段将在商店的WooCommerce产品上显示。

##图片

第四步：在前端显示产品信息

然后在前端的产品单页上显示自定义字段的数据。

在这个插件中，我们需要添加一个简单的短码来在产品页面显示自定义字段。

[acf field=""]短码用于显示自定义字段组。

在WordPress中，有几个函数可以显示WooCommerce产品的字段。

<php
the_field("<field-id or slug>");
?>

或

<php
$customFieldGroup = get_field("<field-id or slug>");
echo $customFieldGroup;
?>

方法2：通过程序添加自定义字段

因此，我们已经看到了如何使用插件在WooCommerce平台中添加产品自定义字段。如果你想在不使用插件的情况下实现同样的功能，只需几个步骤就可以了，非常简单。

这些步骤在WooCommerce产品页面上呈现自定义字段。在产品页面中收集用户的输入后，自定义代码将在购物车页面中显示它们。

下面列出了通过添加自定义代码实现这种方法的步骤。

  1. 在WooCommerce管理员的产品数据面板上添加一个自定义字段。
  2. 将添加的自定义字段数据保存到购物车元数据中。
  3. 在产品单页中显示一个输入字段。
  4. 在购物车和结账页面上传递数值。

在WordPress活动主题的function.php文件中添加此自定义代码。

1.在产品数据面板中添加自定义字段

创建代码用于在WooCommerce产品数据面板中显示自定义字段。woocommerce_product_options_general_product_data钩子被用来调用这段代码。

/* Add product meta field for the WooCommerce admin */
function woocommerce_custom_select_dropdown(){
    $select = woocommerce_wp_select(array(
        'id' => '_select_color',
        'label' =>__('Select color', 'woocommerce'),
        'options' => array(
            'Black' => __('Black','woocommerce'),
            'Blue' => __('Blue','wooocommerce'),
            'Pink'=> __('Pink','woocommerce')
        ),
        
    ));
}
add_action('woocommerce_product_options_general_product_data', 'woocommerce_custom_select_dropdown');

这个例子添加了一个下拉菜单作为产品的自定义字段。所以，它使用woocommerce_wp_select函数来设置以下参数。

  • id
  • 标签
  • 描述
  • desc_tip
  • 选项

也有类似的功能来添加其他类型的表单字段。比如说。

  • woocommerce_wp_textarea_input
  • woocommerce_wp_checkbox
  • woocommerce_wp_hidden_input

2.将用户输入的自定义字段保存到购物车元数据中。

然后，添加另一个动作钩子来保存产品元数据中的自定义字段值。这将在保存产品细节时被调用。它调用了woocommerce_process_product_meta动作并钩住了处理程序。

/* Save custom field data for the product */
function woocommerce_product_custom_fields_save($post_id)
{
    $woocommerce_select_color_field = $_POST['_select_color'];
    if (!empty($woocommerce_select_color_field)) {
        update_post_meta($post_id, '_select_color', esc_attr($woocommerce_select_color_field));
    }
}
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');

3.在产品单页中显示一个输入字段

在这一节中，如果产品meta不是空的，它准备了一个附加字段HTML。

首先，管理员选择并保存产品的颜色选项。然后这段代码将在产品单页上添加一个下拉字段。

它通过全局帖子对象的引用来读取当前的产品元。然后，它通过自定义字段ID来获取产品元。

在WooCommerce的产品页面，这个自定义字段被添加到购物车按钮之前。这是因为钩住了行动 woocommerce_before_add_to_cart_button 来调用这个处理程序。

/* Show add-on field based on the saved custom field */
function woocommerce_display_select_option_value()
{
    global $post;
    $product = wc_get_product($post->ID);
    $select_option_title_field = $product->get_meta('_select_color');
    
    if ($select_option_title_field) {
        printf('
<div><select name="color_option" class="input-text text">
<option value="Default Color">Default Color</option>
<option value="' . $select_option_title_field . '">' . $select_option_title_field . '</option> </select></div>', esc_html($select_option_title_field));
    }
}
add_action('woocommerce_before_add_to_cart_button', 'woocommerce_display_select_option_value');

4.在购物车和结账页面显示所选的选项

下面的过滤器钩子处理的功能是显示所选的自定义选项。它以购物车和结账页为目标，渲染UI组件。

这段代码是在加载购物车项目数据时触发的。它调用过滤钩子 woocommerce_add_cart_item_data 并显示所选自定义字段的值。

它将数据添加到购物车项目数组中，随后将用于结账页面的用户界面。

/*  Display selected option in the cart */
function woocommerce_add_custom_field_item_data($cart_item_data, $product_id)
{
    if (! empty($_POST['color_option'])) {
        $cart_item_data['select_field'] = $_POST['color_option'];
    }
    return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'woocommerce_add_custom_field_item_data', 10, 2);

这是为了解析购物车项目数组，并在结账页面显示自定义字段的值。

它使用woocommerce_cart_item_name钩子在结账界面做这个改变。

/*  Display selected option in the checkout */
function woocommerce_cart_display($name, $cart_item, $cart_item_key)
{
    if (isset($cart_item['select_field'])) {
        $name .= sprintf('<p>%s</p>', esc_html($cart_item['select_field']));
    }
    return $name;
}
add_filter('woocommerce_cart_item_name', 'woocommerce_cart_display', 10, 3);

总结

因此，我们已经看到了两种为产品添加自定义字段的方法。它是在有或没有插件的情况下启用WooCommerce产品自定义字段。

我希望，这篇文章能给大家提供这方面的基本知识。同时，它可能会帮助你理解并复制步骤来定制你的商店。

↑ 返回顶部

avatar
文章
阅读
粉丝