title: "如何让您的 WooCommerce 附加结账字段在结账页面上根据条件显示" post_status: publish comment_status: open taxonomy: category: - woocommerce post_tag: - Tutorials - Block Development - Repos
如何让您的 WooCommerce 附加结账字段在结账页面上根据条件显示
此功能需要 WooCommerce 9.9.0 或更高版本。
条件可见性允许您创建智能、自适应的结账表单，仅在需要时显示相关字段，从而减少表单的复杂性，并改善客户体验。
为什么使用条件可见性？
条件字段可以帮助您：
- 通过隐藏不相关的字段，减少表单的复杂性
- 根据客户的选择，创建动态的结账流程
- 仅为特定产品或客户类型显示专门的字段
- 通过更简洁、更集中的表单，提高转化率
- 收集仅在特定情况下才相关的上下文信息
了解用于条件的 JSON 结构化数据
WooCommerce 的附加结账字段使用 JSON 结构化数据来定义条件逻辑。 如果您不熟悉 JSON 结构化数据，请不要担心，我们将通过实际示例来演示，您可以根据自己的需求进行调整。
基本结构如下：
'required' => [
// 在此处定义隐藏条件
],
'hidden' => [
// 在此处定义隐藏条件
]
常见的条件场景
根据配送方式显示字段
最常见的用例之一是仅在选择特定配送方式时显示字段（例如，本地自提）：
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-plugin/delivery-instructions',
'label' => __('特殊配送说明', 'your-text-domain'),
'location' => 'order',
'type' => 'text',
'required' => [
'cart' => [
'properties' => [
'prefers_collection' => [
'const' => true
]
]
]
],
'hidden' => [
'cart' => [
'properties' => [
'prefers_collection' => [
'const' => false
]
]
]
]
)
);
根据购物车内容显示字段
仅当购物车中包含特定产品时，显示字段：
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-plugin/fragile-handling',
'label' => __('此订单包含易碎物品 - 需要特殊处理吗？', 'your-text-domain'),
'location' => 'order',
'type' => 'checkbox',
'required' => [
'cart' => [
'properties' => [
'items' => [
'contains' => [
'enum' => [2766, 456, 789] // 易碎物品的产品 ID
]
]
]
]
]
)
);
根据购物车数值显示字段
仅为高价值订单显示高级服务选项：
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-plugin/white-glove-service',
'label' => __('Add white glove delivery service?', 'your-text-domain'),
'location' => 'order',
'type' => 'checkbox',
'hidden' => [
'cart' => [
'properties' => [
'totals' => [
'properties' => [
'totalPrice' => [
'maximum' => 50000 // 如果购物车总价 小于 $500 (以美分计)，则隐藏
]
]
]
]
]
]
)
);
根据客户位置显示字段
仅为来自特定国家的客户显示字段：
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-plugin/tax-exemption-number',
'label' => __('Tax exemption number', 'your-text-domain'),
'location' => 'address',
'type' => 'text',
'required' => [
'customer' => [
'properties' => [
'address' => [
'properties' => [
'country' => [
'enum' => ['US', 'CA'] // 仅在美国和加拿大需要
]
]
]
]
]
],
'hidden' => [
'customer' => [
'properties' => [
'address' => [
'properties' => [
'country' => [
'not' => [
'enum' => ['US', 'CA'] // 对于美国和加拿大以外的国家隐藏
]
]
]
]
]
]
]
)
);
根据其他字段值显示字段
创建依赖字段，其中一个字段的可见性取决于另一个字段的值：
// 第一个字段 - 服务类型选择
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-plugin/service-type',
'label' => __('Type of service needed', 'your-text-domain'),
'location' => 'order',
'type' => 'select',
'options' => array(
array( 'value' => 'standard', 'label' => 'Standard' ),
array( 'value' => 'express', 'label' => 'Express' ),
array( 'value' => 'custom', 'label' => 'Custom' ),
),
)
);
// 第二个字段 - 仅当选择 "custom" 时显示
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-plugin/custom-requirements',
'label' => __('Describe your custom requirements', 'your-text-domain'),
'location' => 'order',
'type' => 'text',
'required' => [
'checkout' => [
'properties' => [
'additional_fields' => [
'properties' => [
'my-plugin/service-type' => [
'const' => 'custom'
]
]
]
]
]
],
'hidden' => [
'checkout' => [
'properties' => [
'additional_fields' => [
'properties' => [
'my-plugin/service-type' => [
'not' => [
'const' => 'custom'
]
]
]
]
]
]
]
)
);
实用完整示例
这是一个针对提供数字和实体产品的商店的综合示例：
add_action( 'woocommerce_init', function() {
if ( ! function_exists( 'woocommerce_register_additional_checkout_field' ) ) {
return;
}
// 配送偏好 - 仅适用于实体产品
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-store/delivery-preference',
'label' => __('配送偏好', 'your-text-domain'),
'location' => 'order',
'type' => 'select',
'options' => array(
array( 'value' => 'doorstep', 'label' => __('放置在门前', 'your-text-domain') ),
array( 'value' => 'neighbor', 'label' => __('交给邻居', 'your-text-domain') ),
array( 'value' => 'pickup_point', 'label' => __('送至取件点', 'your-text-domain') ),
),
'required' => [
'cart' => [
'properties' => [
'needs_shipping' => [
'const' => true
]
]
]
],
'hidden' => [
'cart' => [
'properties' => [
'needs_shipping' => [
'const' => false
]
]
]
]
)
);
// 配送说明 - 仅当选择“放置在门前”时显示
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-store/doorstep-instructions',
'label' => __('关于门前配送的详细说明', 'your-text-domain'),
'location' => 'order',
'type' => 'text',
'required' => [
'checkout' => [
'properties' => [
'additional_fields' => [
'properties' => [
'my-store/delivery-preference' => [
'const' => 'doorstep'
]
]
]
]
]
],
'hidden' => [
'checkout' => [
'properties' => [
'additional_fields' => [
'properties' => [
'my-store/delivery-preference' => [
'not' => [
'const' => 'doorstep'
]
]
]
]
]
]
]
)
);
// 数字产品配送邮箱 - 仅适用于数字产品
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-store/digital-delivery-email',
'label' => __('用于数字产品的备用邮箱', 'your-text-domain'),
'location' => 'contact',
'type' => 'text',
'required' => [
'cart' => [
'properties' => [
'needs_shipping' => [
'const' => false
]
]
]
],
'hidden' => [
'cart' => [
'properties' => [
'needs_shipping' => [
'const' => true
]
]
]
],
'sanitize_callback' => function ( $field_value ) {
return sanitize_email( $field_value );
},
'validate_callback' => function ( $field_value ) {
if ( ! is_email( $field_value ) ) {
return new \WP_Error( 'invalid_alt_email', __('请确保您的备用邮箱符合正确的格式。', 'your-text-domain') );
}
},
)
);
});
可用于条件的可用数据
您可以基于各种结账数据创建条件：
- 购物车信息：总价、商品数量、配送费率、优惠券、重量
- 客户数据：ID、账单/配送地址、电子邮件
- 其他附加字段：来自其他自定义字段的参考值以及更多！
下一步
条件可见性将静态结账表单转换为动态、智能的界面，这些界面可以根据客户的需求进行调整。 结合我们上一篇文章中介绍的基本附加字段，您可以创建复杂的结账体验，以便在正确的时间收集到准确的信息。
从简单的条件开始，逐步构建更复杂的逻辑，随着您对 JSON 结构化数据语法越来越熟悉。 您的客户将欣赏更简洁、更相关的结账体验！