在 Woocommerce 中添加自定义结帐多选字段并更新订单元答案

【问题标题】：Add a custom checkout multi-select field and update order meta in Woocommerce在 Woocommerce 中添加自定义结帐多选字段并更新订单元
【发布时间】：2018-08-04 21:49:34
【问题描述】：

我正在为一个自定义 woocommerce 结帐表单的多选字段而苦苦挣扎。

我通过函数创建了自定义多选字段：

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) { 
     $fields['billing']['_myfield'] = array(
        'type'      => 'select',
        'id' => '_myfield',
        'label'     => __('My Field', 'woocommerce'),
        'required'  => true,
        'class'     => array('form-row-wide'),
        'clear'     => true,
        'options'       => [
            'key1'  => __('First Item', 'woocommerce'),
            'key2'  => __('Second Item', 'woocommerce'),
            'key3'  => __('Third Item', 'woocommerce'),
            'key4'  => __('Fourth Item', 'woocommerce')
        ]
    );
    return $fields;
}

注意，woocommerce 函数custom_override_checkout_fields 无法创建自定义多选字段，因此这里我们有简单的选择字段。

我决定使用 jQuery 以这种方式添加多个缺失的属性：

$('#_myfield').attr('multiple', 'multiple');

所以现在我有了多选字段，看起来像：

<select name="_myfield" id="_myfield" class="select " data-placeholder="" multiple="multiple">...</select>

问题是，订单元值没有正确更新，每次只显示一个值，如果人们选择多个选项，则不是一组值。

我正在使用这个函数来更新订单的元值：

add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

function my_custom_checkout_field_update_order_meta($order_id) {
   update_post_meta($order_id, '_myfield', $_POST['_myfield'] );
}

有什么帮助吗？

也许有更好的解决方案可以在结帐的结算部分创建多选字段？

【问题讨论】：

标签： php jquery wordpress woocommerce checkout

【解决方案1】：

这是制作自定义多选结帐字段并在订单元数据中获取所选值的正确方法。

所有的 jQuery 代码都包含在函数中，所以你必须删除你的。

我添加了一个隐藏的输入字段，我在其中使用 jQuery 获取选定的值。下订单后，我会保存此隐藏输入字段中的数据。

代码：

add_filter( 'woocommerce_checkout_fields' , 'custom_checkout_fields', 30, 1 );
function custom_checkout_fields ( $fields ) {
    $domain = 'woocommerce';

    $fields['billing']['multi_my_field'] = array(
        'label'        => __('My Field', 'woocommerce'),
        'required'     => true,
        'class'        => array('form-row-wide'),
        'clear'        => true,
        'autocomplete' => false,
        'type'         => 'select',
        'options'      => array(
            'key1'  => __('First Item', $domain),
            'key2'  => __('Second Item', $domain),
            'key3'  => __('Third Item', $domain),
            'key4'  => __('Fourth Item', $domain),
        ),
    );
    ?>
    <input type="hidden"  name="billing_my_field" id="billing_my_field" value="0">
    <script type='text/javascript'>
        jQuery(function($){
            var a = 'select[name="multi_my_field"]',
                b = 'input[name="billing_my_field"]';
            $(a).attr('multiple', 'multiple');
            $(a).change( function(){
                $(b).val($(this).val());
            })
        });
    </script>
    <?php
    return $fields;
}

add_action( 'woocommerce_checkout_update_order_meta', 'hidden_checkout_field_update_order_meta', 30, 1 );
function hidden_checkout_field_update_order_meta ( $order_id ) {
    if( isset( $_POST['billing_my_field'] ) )
        update_post_meta($order_id, '_billing_my_field', esc_attr( $_POST['billing_my_field'] ) );
}

代码进入您的活动子主题（或主题）的 function.php 文件中。

经过测试并且可以工作

【讨论】：