给WooCommerce的订单页面添加自定义字段其实这也算是一个常见需求，有些人喜欢一碰到这类需求就找插件实现，其实大可不必。在WordPress里面找对钩子，添加对应的代码段就行了。
今天刚完成一个小需求如下：在WooCommerce的Checkout页面增加一个了解用户渠道的下拉字段，并且如果选了”Others”选项，会再多出现一个文本字段。下拉字段为必填，多出的文本字段为可选，效果如图：
直接上代码，要点都在注释中了：
<?php //增加checkout页面字段 add_action('woocommerce_after_order_notes', 'brain1981_custom_checkout_field'); //如果想在左侧那一列显示此字段，就要换成下面这个钩子： //add_action('woocommerce_after_checkout_billing_form', 'brain1981_custom_checkout_field'); function brain1981_custom_checkout_field($checkout){ woocommerce_form_field('alivecor_referral_channel', array( 'type' => 'select', 'label' => __('Through which channel did you know our product?' ), 'placeholder' => __('Please Select' ), 'required' => true, 'options' => array( '' => __('Please Select' ), 'Doctor referral' => __('Doctor referral' ), 'Friend referral' => __('Friend referral' ), 'Online advertisement' => __('Online advertisement' ), 'Offline advertisement' => __('Offline advertisement' ), 'News' => __('News' ), 'Others' => __('Others' ) ) ), $checkout->get_value('alivecor_referral_channel') ); echo "<div id='channelOther'>"; woocommerce_form_field('alivecor_referral_channel_other', array( 'type' => 'text', 'label' => __('Others' ), 'placeholder' => __('Please fill the channel' ), 'required' => false, ), $checkout->get_value('alivecor_referral_channel_other') ); echo "</div>"; ?> <script> //额外字段的显示控制 $(function(){ $("#channelOther").hide(); $("#alivecor_referral_channel").on("change",function(){ if( $(this).val()=="Others" ) $("#channelOther").show(); else $("#channelOther").hide(); }) }) </script> <?php } //如果必填的那个下拉菜单没有选择，提交的时候给出一条报错提醒用户选一下，WooCommerce自己会高亮提示这个选项 add_action('woocommerce_checkout_process', 'brain1981_customised_checkout_field_process'); function brain1981_customised_checkout_field_process(){ if (empty( $_POST['alivecor_referral_channel'] )) wc_add_notice( __('Please select a channel you know us trough.' ), 'error' ); } //保存这两个值 add_action( 'woocommerce_checkout_update_order_meta', 'brain1981_save_custom_checkout_field' ); function brain1981_save_custom_checkout_field( $order_id ){ if( !empty( $_POST['alivecor_referral_channel'] ) ) update_post_meta( $order_id, 'alivecor_referral_channel', sanitize_text_field( $_POST['alivecor_referral_channel'] ) ); if( !empty( $_POST['alivecor_referral_channel_other'] ) && $_POST['alivecor_referral_channel']=="Others" ) update_post_meta( $order_id, 'alivecor_referral_channel_other', sanitize_text_field( $_POST['alivecor_referral_channel_other'] ) ); } //在订单提交的管理员通知邮件中添加显示这两个只 //这里其实可以举一反三增加更多内容 add_filter( 'woocommerce_email_order_meta_fields', 'brain1981_email_order_meta_fields', 10, 3 ); function brain1981_email_order_meta_fields( $fields, $sent_to_admin, $order ) { $fields['alivecor_referral_channel'] = array( 'label' => __( 'Channel' ), 'value' => $order->get_meta( 'alivecor_referral_channel' ), ); $fields['alivecor_referral_channel_other'] = array( 'label' => __( 'Other Channel' ), 'value' => $order->get_meta( 'alivecor_referral_channel_other' ), ); return $fields; } //在管理员后台订单详细页面也显示一下 add_action( 'woocommerce_admin_order_data_after_order_details', 'brain_display_order_data_in_admin' ); function brain_display_order_data_in_admin( $order ){ ?> <div class="order_data_column"> <h4><?php _e( 'Extra Order Details', 'woocommerce' ); ?></h4> <?php echo '<p><strong>' . __( 'Channel' ) . ':</strong> ' . $order->get_meta( 'alivecor_referral_channel' ) . '</p>'; echo '<p><strong>' . __( 'Other Channel' ) . ':</strong> ' . $order->get_meta( 'alivecor_referral_channel_other' ) . '</p>'; ?> </div> <?php } ?> |
本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/2039.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。
本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。