如何在产品页面上添加 Woocommerce 自定义文本字段
已发表: 2020-09-21
在这篇文章中，我将向您展示一个在产品页面上添加 WooCommerce 自定义文本字段的非常简单的解决方案。 这些自定义字段也称为产品插件，它们包括文本字段、选择字段、复选框等。 添加此功能的主要原因是允许客户付费输入有关产品的其他个性化信息。
WooCommerce 是一个强大的 WordPress 电子商务解决方案，多年来广受欢迎。 据估计，WooCommerce 为所有可用在线商店的 42% 以上提供支持。
这是一个很大的百分比，如果您正在寻找易于设置和管理的在线商店，那么 WooCommerce 是您的最佳选择。 它是一个免费的开源解决方案，已发展成为一个非常适合基于 WordPress 的网站的电子商务解决方案。
产品页面上的 Woocommerce 自定义文本字段
如果您在互联网上进行快速搜索，许多人会为您提供难以实施的复杂解决方案。 在这个简短的教程中，我将分享一个 PHP 代码片段，它将将此功能添加到您的产品页面。
在本教程结束时，您在线商店的用户将能够为每个产品添加自定义注释。 如果未填写自定义字段，则会引发错误。
此外，如果您正在寻找一种更简单的方法来添加自定义字段，那么 WooCommerce 插件的 Product Extras 将是您的最佳解决方案。 但是，它是一个高级插件，您必须支付 59 美元的年费。 
为什么要在产品页面上添加自定义字段？
这样做的主要原因是提高客户保留率，这可能会促进销售，因为客户将能够在订单上添加自定义注释。
例如，客户可能想要产品上的礼品包装或个性化贺卡，他或她可以在产品上添加自定义注释。
将所有内容摆在桌面上，让我们看一下在 WooCommerce 商店的产品页面上添加自定义文本字段所需遵循的步骤。 默认产品页面如下所示： 
在产品页面上添加 Woocommerce 自定义文本字段的步骤
以下是您需要遵循的步骤：
- 登录您的 WordPress 站点并以管理员用户身份访问仪表板。
- 从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。 打开主题编辑器页面后，查找主题函数文件，我们将在其中添加将在产品页面上添加 WooCommerce 自定义字段的函数。
- 将以下代码添加到 functions.php 文件中：
/**
* @snippet 向产品添加输入字段 - WooCommerce
*/
// -----------------------------------------
// 1. 在添加到购物车上方显示自定义输入字段
add_action（'woocommerce_before_add_to_cart_button'，'njengah_product_add_on'，9）；
功能 njengah_product_add_on() {
$value = isset($_POST['custom_text_add_on']) ？ sanitize_text_field（$_POST['_custom_text_add_on']）：''；
echo '<div><label>自定义文本插件 <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' 。 $value . '"></p></div>';
}
// -----------------------------------------
// 2. 如果自定义输入字段为空，则抛出错误
add_filter('woocommerce_add_to_cart_validation', 'njengah_product_add_on_validation', 10, 3);
功能 njengah_product_add_on_validation( $passed, $product_id, $qty ){
if(isset($_POST['custom_text_add_on']) && sanitize_text_field($_POST['custom_text_add_on']) == '') {
wc_add_notice( '自定义文本插件是必填字段', 'error' );
$通过=假；
}
返回$通过；
}
// -----------------------------------------
// 3. 将自定义输入字段值保存到购物车商品数据中
add_filter('woocommerce_add_cart_item_data', 'njengah_product_add_on_cart_item_data', 10, 2);
功能 njengah_product_add_on_cart_item_data（$cart_item，$product_id）{
如果（isset（$_POST['custom_text_add_on']））{
$cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );
}
返回 $cart_item;
}
// -----------------------------------------
// 4. 显示自定义输入字段值@购物车
add_filter('woocommerce_get_item_data', 'njengah_product_add_on_display_cart', 10, 2);
功能 njengah_product_add_on_display_cart( $data, $cart_item ) {
if ( isset( $cart_item['custom_text_add_on'] ) ){
$数据[] = 数组（
'name' => '自定义文本插件',
'价值' => sanitize_text_field( $cart_item['custom_text_add_on'] )
);
}
返回$数据；
}
// -----------------------------------------
// 5. 将自定义输入字段值保存到订单项元数据中
add_action('woocommerce_add_order_item_meta', 'njengah_product_add_on_order_item_meta', 10, 2);
功能 njengah_product_add_on_order_item_meta( $item_id, $values ) {
if ( !empty( $values['custom_text_add_on'] ) ) {
wc_add_order_item_meta( $item_id, '自定义文本插件', $values['custom_text_add_on'], true );
}
}
// -----------------------------------------
// 6. 将自定义输入字段值显示到订单表中
add_filter('woocommerce_order_item_product', 'njengah_product_add_on_display_order', 10, 2);
功能 njengah_product_add_on_display_order( $cart_item, $order_item ){
if(isset($order_item['custom_text_add_on'])){
$cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];
}
返回 $cart_item;
}
// -----------------------------------------
// 7. 在订单邮件中显示自定义输入字段值
add_filter（'woocommerce_email_order_meta_fields'，'njengah_product_add_on_display_emails'）；
功能 njengah_product_add_on_display_emails( $fields ) {
$fields['custom_text_add_on'] = '自定义文本插件';
返回$字段；
}- 要查看结果，只需刷新产品页面，您应该会看到：
如果用户没有输入详细信息，则会显示错误，直到用户添加自定义文本，如下所示： 
自定义注释也将出现在订单详细信息中，如下所示： 
代码如何运作
首先，代码显示了添加到购物车上方的自定义输入字段，然后如果自定义输入字段为空则添加错误。 然后保存自定义输入字段值，并显示在购物车、订单项目、订单表和订单电子邮件中。
结论
在这篇文章中，我为那些涉及使用插件的不太精通技术的用户提供了一个更简单的解决方案。 然后我分享了一个 PHP 代码片段，它应该放在 functions.php 文件中，以在购物车、订单商品、订单表和订单电子邮件中显示客户插件。 我希望这篇文章能帮助您在产品页面上添加 WooCommerce 自定义文本字段。
类似文章
- 如何在 WooCommerce 中设置自定义相关产品
- 如何通过示例使用 WordPress 自定义 Hooks do_action 和 apply_filters
- 如何删除下载菜单我的帐户页面 WooCommerce
- 如何在 WooCommerce 中获取付款方式 » 代码示例
- 如何在 WooCommerce 中隐藏没有图像的产品
- 如何删除 WooCommerce 产品图像的缩放效果
- 如何向 WooCommerce 产品添加类别
- 如何从 WordPress 的无序列表中删除项目符号
- 如何在 WooCommerce 结帐表单中添加额外字段
- 如何在 WooCommerce 中更改继续结帐文本
- 如何从前端添加 Woocommerce 产品
- 如何计算添加到购物车 WooCommerce 购物车计数代码的项目
- 如何在 WooCommerce 中更改结帐按钮文本 [下订单]
- 5个带有示例的WordPress分页代码片段[从简单到高级]
- 如何在 WooCommerce 中更改库存文本
- 按角色注册后如何重定向 WooCommerce 用户
- 如何在 Woocommerce 中获取订单 ID
- 如何使用简单的技巧从 WordPress URL 中删除 Hash #
- 如何在 WooCommerce 中的价格后添加描述
- 如何更改 WooCommerce 的“已添加到购物车”通知