- Windows 本地安装 Kibana 查询 Elasticsearch
- Windows 本地安装和使用 Elasticsearch
- WooCommerce 请登录 链接不工作
- 使 WooCommerce 订单搜索支持自定义字段
- 如何使用 WooCommerce Session
- 获取 WooCommerce 页面地址的方法
- WooCommerce后台通过自定义字段检索产品
- WooCommerce 自定义订单号
- WooCommerce Login / Register Redirect
- WooCommerce自带的shortcodes
- WooCommerce 打印订单
- WooCommerce 新用户注册管理员通知
- WooCommerce 移除产品页商品图片的url
- WooCommerce Email 模版增加全局内容的一个方法
- 错误:Call to a member function is_visible() on a non-object
- WooCommerce实用代码集合
- WooCommerce根据支付方式收取额外费用(2021)
- WooCommerce 订单管理
- WooCommerce移除登出账户的确认提示
- WooCommerce列出所有产品分类(2021)
- WooCommerce收据功能的实现
- WooCommerce Dynamic Pricing动态价格表(2021)
- 如何免费试用WordPress付费插件
- 写代码定制WooCommerce产品页模板(2021)
- 自定义WooCommerce Order Details模板明细部分(2021)
- WooCommerce Class WC_Order
- WooCommerce 产品搜索支持 SKU
- WooCommerce定制产品的Additional Information选项卡(2021)
- WooCommerce 定制产品页选项卡(2021)
- WooCommerce admin bar快捷菜单
- WooCommerce库存管理插件Stock Manager for WooCommerce(2021)
- WordPress备份插件UpdraftPlus(2021)
- 隐藏WooCommerce的购物功能
- WooCommerce目录模式Catalog Mode(2021)
- 构建基于WooCommerce和WPML的多语言电商网站 - 概述篇
- 构建基于WooCommerce和WPML的多语言电商网站 - 安装WooCommerce和测试数据
- 配置WordPress运行环境 - Wampserver安装图解
- 构建基于WooCommerce和WPML的多语言电商网站 - 安装和配置 WPML 插件
- 构建基于 WooCommerce 和 WPML 的多语言电商网站 - 使 WooCommerce 和 WPML 协同工作
- WooCommerce Paypal & RMB
- WooCommerce 2.0 来袭
- 如何修改 WooCommerce 插件的模版
- WooCommerce 显示每个产品的总销量
- WooCommerce 中的 Custom JavaScript Event
- WooCommerce Authorize.net CIM Gateway
- 用WooCommerce Fees API 添加手续费
- WooCommerce 产品加入购物车后直接结账
- 设置 Paypal Sandbox 测试 WooCommerce Subscription 产品
- WooCommerce Conditional Tags 详解
- WooCommerce Single Category Selector
- WooCommerce 自定义结账字段(2021)
- WooCommerce 将产品属性加入网站菜单(2021)
- WooCommerce Product API(2021)
- WooCommerce 添加附加费 surcharge(2021)
- WooCommerce 安装中文语言包(2021)
- WooCommerce 营销:订阅促销弹窗和潜在客户发掘(2021)
- WooCommerce 邮件定制、预览和测试(2021)
- WooCommerce 在线站点付款测试(2021)
- WooCommerce Product Archive Image Slider(2021)
- woocommerce_form_field() examples
- WooCommerce 商店页插入 shortcode 问题
- WooCommerce 在 Email Header 中获取用户信息
- WooCommerce 自定义结账字段图文详解
- WooCommerce 2.1.12 - 如何修改相关产品列表
- 修改 WooCommerce My Account 页面的地址格式
- Woocommerce:如何根据国家设置支付方式
- Woocommerce 支付宝插件初探
- 支付宝集成 如何在回调地址中使用自定义参数
- Woocommerce Settings API 如何使用
- Woocommerce 中文货币符号错误如何解决
- WooCommerce 如何扩展支付方式
- Woo commerce 搭建 WordPress 电子商务网站
- WooCommerce 查看所有用户购物车(2021)
- WooCommerce 最近一个月销量排行(2021)
- WooCommerce 后台自定义产品选项(2021)
- WooCommerce 自定义产品列表带分页(2021)
- WooCommerce 设置 - 自定义选项卡和字段(2021)
- WooCommerce My Account Menu Links 定制方法(2021)
- WooCommerce 产品列表增加数量字段
- WooCommerce 可变产品变种的数量限制
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
WooCommerce 自定义结账字段图文详解
向结账表单添加WooCommerce自定义结账字段,可以使用插件WooCommerce checkout manager或者filter:woocommerce_checkout_fields,本文介绍的方法非上述两种,而是使用woocommerce_form_field()函数在订单备注之后添加自定义结账字段,并将字段显示在订单详情、订单邮件和后台中的方法。
2021年10月更新:WooCommerce自定义结账字段(2021)
代码测试环境和使用方法
WordPress 3.9.1 + WooCommerce 2.1.2 + 主题Twentytwelve
所有代码放在主题的functions.php中执行,每段代码后面的图片为改代码的执行效果。
代码段1 – 在订单备注后添加WooCommerce自定义结账字段
注意在最开头输出了带有my_custom_section class的div,可以用该class修改这个区域的样式,突出该区域。
/** * 代码段1 - 在订单备注后添加自定义选项 */ function my_custom_checkout_section( $checkout ){ // $checkout stores all checkout fields // Section starts, output wrapper or header echo '<div>'; // Create a select field $options = array( '只工作日送货' => '只工作日送货', '只双休日送' => '只双休日送货', '工作日、双休日均可送货' => '工作日、双休日均可送货' ); woocommerce_form_field("my_custom_field_1", array( 'type' => 'select', 'class' => array('form-row-wide my_custom_field'), 'label' => '送货时间: ', 'options' => array( '' => '-----选择送货时间-----') + $options, 'required' => true ), $checkout->get_value( 'my_custom_field_1' ) ); echo '</div>'; } add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_section' );
代码段2 – 验证自定义字段
虽然第一步中强调了required=true,但只是改变了长相,真正的验证还得自己来。这里只验证是否有值。
/** * 代码段2 - 验证自定义字段 * * required=true只改变了长相,验证还得自己写代码 */ function my_custom_checkout_field_process(){ global $woocommerce; if( empty($_POST['my_custom_field_1']) ) $woocommerce->add_error( '<strong>请选择送货时间</strong>' ); } add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process' );
代码段3 – 存储自定义字段的值
用户选择后还要把值存到订单中方便以后查询。order的本质是post,所以order meta就是post meta,用update_post_meta存储,用get_post_meta查询。
/** * 代码段3 - 存储自定义字段的值 * * 如果和用户属性相关,存到usermeta表里,否则存在order meta(postmeta)里即可 */ function my_custom_checkout_field_save( $order_id ){ // custom field名称,最前面的下划线的作用是使该custom field在后台不可见,必须通过自定义程序显示 $ordermeta_name = '_my_custom_field_1'; // 将送货时间存到订单的custom field里 if( !empty($_POST['my_custom_field_1'] ) ) update_post_meta( $order_id, $ordermeta_name, wc_clean( $_POST['my_custom_field_1'] ) ); } add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_save' );
代码段4.1-4.3 – 在成功下单页面不同位置显示结账字段的值
提供三个位置显示,一般只需要选择其中一个即可。
代码段4.1 – 在订单详情之后,customer details之前显示
/** * 代码段4.1 - 在order-received页面显示自定义字段的值 * * 在订单详情之后,customer details之前显示 */ function my_custom_field_display_on_order_received( $order ){ $my_custom_field_1 = get_post_meta( $order->id, '_my_custom_field_1', true ); if( !empty($my_custom_field_1) ){ echo '<h2>送货时间</h2>'; echo '<p><strong>送货时间:</strong>' .$my_custom_field_1. '</p>'; } } add_action('woocommerce_order_details_after_order_table', 'my_custom_field_display_on_order_received' );
代码段4.2 – 在产品列表后显示
/** * 代码段4.2在产品列表后显示 * * 在tbody内、产品列表后显示 */ function my_custom_field_display_after_product_list( $order ){ $my_custom_field_1 = get_post_meta( $order->id, '_my_custom_field_1', true ); if( !empty($my_custom_field_1) ){ ?> <tr><td>送货时间</td><td><?php echo $my_custom_field_1; ?></td></tr> <?php } } add_action( 'woocommerce_order_items_table', 'my_custom_field_display_after_product_list' );
代码段4.3 – 在配送方式前面显示
/** * 代码段4.3 - 在配送方式前面显示 * * 在tfoot内、shipping方式前显示 */ function my_custom_field_display_before_shipping( $total_rows, $order ){ $my_custom_field_1 = get_post_meta( $order->id, '_my_custom_field_1', true ); $new_total_rows = array(); if( !empty($my_custom_field_1) ){ $new_row['my_custom_field_1'] = array( 'label' => '送货时间:', 'value' => $my_custom_field_1 ); // Insert $new_row after shipping field $total_rows = array_merge( array_splice( $total_rows,0,2), $new_row, $total_rows ); } return $total_rows; } add_filter( 'woocommerce_get_order_item_totals', 'my_custom_field_display_before_shipping', 10, 2 );
代码段5 – 在订单邮件中显示
若选择代码段4.2将字段加入订单详情页面,则字段也会自动加到邮件中,就不需要代码段5了。
/** * 代码段5 - 在email中显示 * * 在email的订单详情表格之后显示 * 若使用woocommerce_get_order_item_totals添加字段, * 无需下面的代码,就可以在订单详情表格里显示 * * $sent_to_admin - 为true表示该邮件发送给管理员 */ function my_custom_field_order_email( $order, $sent_to_admin ){ $my_custom_field_1 = get_post_meta( $order->id, '_my_custom_field_1', true ); if( !empty($my_custom_field_1) ){ echo '<h3>送货时间</h3>'; echo "<p>送货时间: $my_custom_field_1 </p>"; if( $sent_to_admin ) { echo '这是发给管理员的通知邮件'; } } } add_action( 'woocommerce_email_after_order_table', 'my_custom_field_order_email', 10, 2 );
代码段6 – 在后台订单详情中显示
/** * 代码段6 - 在后台订单详情中显示自定义字段 */ function my_custom_field_admin_info( $order ){ $my_custom_field_1 = get_post_meta( $order->id, '_my_custom_field_1', true ); if( !empty($my_custom_field_1) ){ echo '<h4>送货时间</h4>'; echo "<p>$my_custom_field_1</p>"; } } add_action( 'woocommerce_admin_order_data_after_shipping_address', 'my_custom_field_admin_info' );
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论