自定义产品字段是可以添加到在线商店中的产品的附加数据点。这些字段允许商店所有者收集和显示有关其产品的更多信息,而不仅仅是通常包含的基本详细信息(例如名称、价格、颜色和描述)。
通过添加 WooCommerce 自定义产品字段,店主可以向客户提供有关其产品的更详细、更准确的信息,这有助于改善客户体验并增加销售额。
在本教程中,我将展示如何将自定义产品字段添加到您的 WooCommerce 商店。
目录
WooCommerce 中的自定义产品字段是什么? 为什么应该在 WooCommerce 中添加自定义产品字段? 如何在 WooCommerce 中添加自定义产品字段(分步教程) 第1步:自定义产品数据页面 第 2 步:在 WooCommerce 中添加 Hooks 第 3 步:添加自定义产品字段 步骤 4:在产品页面添加自定义字段 第 5 步:在 WooCommerce 中保存自定义字段 如何在 WooCommerce 中的产品页面上显示自定义字段
WooCommerce 中的自定义产品字段是什么? WooCommerce 自定义产品字段是用于回缝产品信息以满足特定业务需求的工具。这些字段提供了向产品添加标准 WooCommerce 产品数据之外的额外详细信息或属性的能力。
WooCommerce 自定义字段使您能够收集和显示有关产品的定制详细信息,以满足独特的要求或规格。
为什么应该在 WooCommerce 中添加自定义产品字段? 自定义产品字段提供了展示产品信息的灵活性。商家可以创建用于各种目的的字段,例如显示产品尺寸、使用的材料、保养说明或任何其他可能影响客户购买决策的相关详细信息。
WooCommerce 自定义字段可以通过提供个性化选项或配置来显着增强用户体验。通过在 WooCommerce 设置中使用自定义字段,您和您的客户可以更全面地了解所提供的产品,从而促进更顺畅的交易。
如何在 WooCommerce 中添加自定义产品字段(分步教程) 在 WooCommerce 中添加自定义产品字段涉及多个步骤,但相对简单。以下是指导您完成此过程的分步教程:
第 1 步 – 自定义产品数据页面 如下面的屏幕截图所示,我将向您展示如何编辑functions.php文件(位于主题文件夹中)以将自定义字段添加到“产品数据”页面。
第 2 步 – 在 WooCommerce 中添加 Hooks 第一步是挂钩woocommerce_product_options_general_product_data。链接到此挂钩的函数负责显示新字段。 第二个钩子woocommerce_process_product_meta将保存自定义字段值。 这两个操作均在以下代码中执行:
// 显示 WooCommerce 产品自定义字段的代码
add_action( 'woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields' );
// 以下代码保存 WooCommerce 产品自定义字段
add_action( 'woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save' );
第 3 步 – 添加自定义产品字段 要添加自定义字段,我将使用默认的 WooCommerce 功能,包括:
woocommerce_wp_text_input
包: WooCommerce\Admin\Functions
位于: includes/admin/wc-meta-box-functions.php
woocommerce_wp_textarea_input
包: WooCommerce\Admin\Functions
位于includes/admin/wc-meta-box-functions.php
函数woocommerce_product_custom_fields ( ) {
全球$woocommerce、$post;
echo '<div class="product_custom_field">' ;
// 该函数有创建自定义字段的逻辑
// 该函数包括输入文本字段、文本区域和数字字段
回显'</div>' ;
}
步骤 3.1:包含字段结构 注意:使用desc_tip在字段右侧显示那些漂亮的小气泡,而不是显示默认的字段描述。该属性适用于每种字段类型。
// 自定义产品文本字段
woocommerce_wp_text_input (
大批(
'id' => '_custom_product_text_field' ,
'label' => ( '我的文本字段' , 'woocommerce' ) ,
'占位符' => '自定义产品文本字段' ,
'desc_tip' => '真'
)
);
步骤的默认值为1 ,最小值设置为零。基本上,这意味着我期望这里有一个正值(至少大于零)。
// 自定义产品编号字段
woocommerce_wp_text_input (
大批(
'id' => '_custom_product_number_field' ,
'占位符' => '自定义产品编号字段' ,
'label' => ( '自定义产品编号字段' , 'woocommerce' ) ,
'类型' => '数字' ,
'custom_attributes' =>数组(
'步骤' => '任意' ,
“分钟” => “0”
)
)
);
使用以下命令创建一个textarea.
// 自定义产品文本区域字段
woocommerce_wp_textarea_input (
大批(
'id' => '_custom_product_textarea' ,
'占位符' => '自定义产品文本区域' ,
'label' => ( '自定义产品文本区域' , 'woocommerce' )
)
);
使用以下代码作为自定义输入字段,您必须将此代码粘贴到functions.php位于主题文件夹中的文件中。
// 显示字段
add_action ( 'woocommerce_product_options_general_product_data' , 'woocommerce_product_custom_fields' ) ;
// 保存字段
add_action ( 'woocommerce_process_product_meta' , 'woocommerce_product_custom_fields_save' ) ;
函数woocommerce_product_custom_fields ( )
{
全球$woocommerce、$post;
echo '
我将创建一个函数woocommerce_product_custom_fields_save。 该函数与 woocommerce_process_product_meta 挂钩。它首先检查该字段是否为空或已填充。如果没有,则使用update_post_meta()创建帖子元。我使用esc_attr()和esc_html()来保护数据。
以下是保存所有字段值的代码:
函数woocommerce_product_custom_fields_save ( $post_id )
{
// 自定义产品文本字段
$woocommerce_custom_product_text_field = $_POST [ '_custom_product_text_field' ] ;
if ( !空( $woocommerce_custom_product_text_field ) )
update_post_meta ( $post_id, '_custom_product_text_field' , esc_attr ( $woocommerce_custom_product_text_field ) ) ;
// 自定义产品编号字段
$woocommerce_custom_product_number_field = $_POST [ '_custom_product_number_field' ] ;
if ( !空( $woocommerce_custom_product_number_field ) )
update_post_meta ( $post_id, '_custom_product_number_field' , esc_attr ( $woocommerce_custom_product_number_field ) ) ;
// 自定义产品文本区域字段
$woocommerce_custom_procut_textarea = $_POST [ '_custom_product_textarea' ] ;
如果(!空($woocommerce_custom_procut_textarea ))
update_post_meta ( $post_id, '_custom_product_textarea' , esc_html ( $woocommerce_custom_procut_textarea ) ) ;
}
将 Vlaue 保存到 DB 中 步骤 3.3:从数据库获取值 现在已经创建了字段并保存了它们的值,我将在前端显示它们。在这种情况下,我建议您使用 WooCommerce 自定义模板。
我将使用流行的get_post_meta()函数来获取这些值。
<?php while ( have_posts ( ) ) : the_post ( ) ; ?>
<?php wc_get_template_part ( '内容' , '单品' ) ; ?>
<?php
// 显示自定义产品文本字段的值
echo get_post_meta ( $post->ID, '_custom_product_text_field' , true ) ;
// 显示自定义产品编号字段的值
echo get_post_meta ( get_the_ID ( ) , '_custom_product_number_field' , true ) ;
// 显示自定义产品文本区域的值
echo get_post_meta ( get_the_ID ( ) , '_custom_product_textarea' , true ) ;
?>
<?php endwhile; // 循环结束。 ?>
步骤 4:在产品页面添加自定义字段 好处是这些自定义字段可以通过后端轻松添加。然后,这些更改将作为产品页面、购物车页面和类似区域上的自定义字段反映在前端。事实上,这些自定义字段也可以出现在订单状态页面上。
为此,我将向您展示如何在WooCommerce 产品页面的产品数据部分添加新的自定义字段:
函数woocommerce_product_custom_fields ( ) { $args =数组( 'id' => 'woocommerce_custom_fields' , 'label' => __ ( '添加 WooCommerce 自定义字段' , 'cwoa' ) , ); woocommerce_wp_text_input ( $args ) ; }
add_action ( 'woocommerce_product_options_general_product_data' , 'woocommerce_product_custom_fields' ) ; 以下是该代码片段在前端的显示方式。如您所见,自定义字段具有与 $args 数组中提到的相同标签。
第 5 步:保存自定义字段数据 使用以下代码片段将自定义字段添加到产品页面。 关于该代码片段需要注意的重要一点是它使用标准的 WooCommerce 函数和操作。 函数save_woocommerce_product_custom_fields ( $post_id ) { $product = wc_get_product ( $post_id ) ; $custom_fields_woocommerce_title = isset ( $_POST [ 'woocommerce_custom_fields' ] ) ? $_POST [ 'woocommerce_custom_fields' ] : '' ; $product-> update_meta_data ( 'woocommerce_custom_fields' , sanitize_text_field ( $custom_fields_woocommerce_title ) ) ; $产品->保存( ) ; } add_action ( 'woocommerce_process_product_meta' , 'save_woocommerce_product_custom_fields' ) ; 如何在 WooCommerce 中的产品页面上显示自定义字段 以下代码片段显示自定义字段。过程简单;它首先检查自定义字段值并确认它具有值。如果情况属实,则会将该值显示为字段的标题。
函数woocommerce_custom_fields_display ( )
{
全球$post;
$product = wc_get_product ( $post->ID ) ;
$custom_fields_woocommerce_title = $product-> get_meta ( 'woocommerce_custom_fields' ) ;
如果($custom_fields_woocommerce_title ){
打印(
'
add_action ( 'woocommerce_before_add_to_cart_button' , 'woocommerce_custom_fields_display' ) ; 从下图中可以看到,自定义字段在产品页面上可见。请注意,字段标题是“ WooCommerce 产品自定义字段”,与代码片段中的 id 值相同。
结论 对于商店所有者来说,仔细考虑他们想要添加的 WooCommerce 自定义产品字段的类型以及如何使用它们并在产品页面上显示它们非常重要。这有助于改善客户体验并增加销量,因为如果客户拥有有关产品的所有必要信息,他们更有可能购买。
经常问的问题 问:如何在 WooCommerce 中使用自定义字段? 答:要在 WooCommerce 中使用自定义字段,您可以按照以下步骤操作:
安装并激活自定义字段插件。 使用信息和字段类型创建自定义字段。 在 WooCommerce 产品编辑器中将自定义字段分配给您的产品。 根据需要配置字段设置和值。 保存并更新您的产品以在 WooCommerce 商店中显示自定义字段。 问:如何将自定义字段添加到 WooCommerce 中的产品类别页面? 答:要将自定义字段添加到 WooCommerce 中的产品类别页面:
使用与 WooCommerce 兼容的自定义字段插件。 创建自定义字段并在插件设置中指定其详细信息。 导航到 WordPress 管理中的产品类别页面。 编辑要添加自定义字段的类别。 根据插件的不同,您可能会在类别设置中找到一个分配或显示自定义字段的选项。 保存更改,自定义字段现在应该显示在 WooCommerce 的产品类别页面上。 问:WooCommerce 中的自定义字段和属性有什么区别? 答:WooCommerce 中的自定义字段允许您向产品添加除默认数据之外的其他定制信息。另一方面,属性是产品的预定义特征,例如尺寸、颜色或材料。
问:如何在 WooCommerce 中添加高级自定义字段? 答:要在 WooCommerce 中添加高级自定义字段 (ACF):
安装并激活高级自定义字段插件。 使用 ACF 的直观界面创建自定义字段。 在字段组设置中,将位置规则指定为“帖子类型”并选择“产品”以将自定义字段应用于 WooCommerce 产品。 根据需要配置其他设置,例如字段类型、可见性和条件逻辑。 保存自定义字段组。 导航到 WooCommerce 产品编辑页面。 自定义字段现在应该出现在产品编辑器中。