如何将 2 个选择字段（组合框）添加到 woocommerce 结帐页面？

Posted 2023-03-25

【中文标题】如何将 2 个选择字段（组合框）添加到 woocommerce 结帐页面？

【英文标题】：How to add 2 select fields (combobox) to woocommerce checkout page?

【发布时间】：2021-08-03 15:59:36

【问题描述】：

我正在开发一个根据邮政编码提供本地交货天数的在线商店。我使用这个 sn-p 选择了限制邮政编码

add_filter ('woocommerce_default_address_fields', 'custom_override_default_postcode_field');
function custom_override_default_postcode_field ($address_fields) 
    // Zip codes
    $postcode_array = array (
        '28001' => '28001',
        '28002' => '28002',
        '28923' => '28923'
    );
    $address_fields['postcode']['type']    = 'select';
    $address_fields['postcode']['options'] = $postcode_array;
    return $address_fields;

我正在使用插件woocommerce checkout field 编辑器，并添加了“交货天数”字段，这是一个选择字段，其值是周一、周二、周三...

现在，我想让第二个字段依赖于第一个字段，根据我的客户的规范，例如：

邮政编码 28001 / 送货天数周一和周三

邮政编码 28002 / 交货日星期二和星期四

邮政编码 28923 / 周五和周日发货

即买家选择邮政编码时，只显示选择对应的天数。

如果有办法不用插件我觉得会更好

非常感谢您的帮助， 路易斯

【参考方案1】：

这需要大量定制。试试下面的代码。代码转到您的活动主题 functions.php 文件。

add_filter ('woocommerce_default_address_fields', 'custom_override_default_postcode_field');
function custom_override_default_postcode_field ($address_fields) 
    // Zip codes
    $postcode_array = array (
        '28001' => '28001',
        '28002' => '28002',
        '28923' => '28923'
    );
    $address_fields['postcode']['type']    = 'select';
    $address_fields['postcode']['options'] = $postcode_array;
    return $address_fields;

您可以使用woocommerce_checkout_fields 过滤钩子添加新的下拉字段Delivery days。

add_filter( 'woocommerce_checkout_fields' , 'custom_delivery_days_woocommerce_billing_fields' );
function custom_delivery_days_woocommerce_billing_fields( $fields ) 
    
     $fields['billing']['delivery_days'] = array(
        'label'       => __('Delivery days', 'woocommerce'),
        'placeholder' => _x('dropdown', 'placeholder', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 95,
        'type'        => 'custom_select',
        'options'     => array(
            'monday' => array(
                'label' =>  __('Monday', 'woocommerce' ),
                'data_attr_name'  => 'post-code',
                'data_attr_value' => '28001',
            ),
            'tuesday' => array(
                'label' =>  __('Tuesday', 'woocommerce' ),
                'data_attr_name'  => 'post-code',
                'data_attr_value' => '28002',
            ),
            'wednesday' => array(
                'label' =>  __('Wednesday', 'woocommerce' ),
                'data_attr_name'  => 'post-code',
                'data_attr_value' => '28001',
            ),
            'thursday' => array(
                'label' =>  __('Thursday', 'woocommerce' ),
                'data_attr_name'  => 'post-code',
                'data_attr_value' => '28002',
            ),
            'friday' => array(
                'label' =>  __('Friday', 'woocommerce' ),
                'data_attr_name'  => 'post-code',
                'data_attr_value' => '28923',
            ),
            'sunday' => array(
                'label' =>  __('Sunday', 'woocommerce' ),
                'data_attr_name'  => 'post-code',
                'data_attr_value' => '28923',
            )
        )
     );

     return $fields;

现在根据您的要求，我将根据另一个选择选项使用数据属性来显示隐藏选择选项。但在 woocommerce 默认选择下拉列表中，现在有一种方法可以添加数据属性以进行选择。所以为此，我创建了custom_select 类型，以便我们可以添加数据属性。所以你可以在上面看到woocommerce_checkout_fields过滤钩我设置'type' => 'custom_select',。

您可以使用woocommerce_form_field 过滤钩子添加新的自定义字段类型。

add_filter( 'woocommerce_form_field', 'add_custom_select', 10 , 4 );
function add_custom_select( $field, $key, $args, $value  )

    if( $args['type'] == 'custom_select' )

        if ( $args['required'] ) 
            $args['class'][] = 'validate-required';
            $required        = '&nbsp;<abbr class="required" title="' . esc_attr__( 'required', 'woocommerce' ) . '">*</abbr>';
         else 
            $required = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
        

        $field   = '';
        $options = '';

        if ( ! empty( $args['options'] ) ) 
            foreach ( $args['options'] as $option_key => $option_text ) 
                if ( '' === $option_key ) 
                    // If we have a blank option, select2 needs a placeholder.
                    if ( empty( $args['placeholder'] ) ) 
                        $args['placeholder'] = $option_text['label'] ? $option_text['label'] : __( 'Choose an option', 'woocommerce' );
                    
                    $custom_attributes[] = 'data-allow_clear="true"';
                
                $options .= '<option value="' . esc_attr( $option_key ) . '" ' . selected( $value, $option_key, false ) . ' data-'.$option_text['data_attr_name'].'="'.$option_text['data_attr_value'].'" >'  . esc_html( $option_text['label'] ) . '</option>';
            

            $field .= '<select name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" class="select ' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" ' . implode( ' ', $custom_attributes ) . ' data-placeholder="' . esc_attr( $args['placeholder'] ) . '">
                    ' . $options . '
                </select>';
        

        $field_container = '<p class="form-row %1$s" id="%2$s" data-priority="' . esc_attr( $sort ) . '">%3$s</p>';
        
        if ( ! empty( $field ) ) 
            $field_html = '';

            if ( $args['label'] && 'checkbox' !== $args['type'] ) 
                $field_html .= '<label for="' . esc_attr( $label_id ) . '" class="' . esc_attr( implode( ' ', $args['label_class'] ) ) . '">' . wp_kses_post( $args['label'] ) . $required . '</label>';
            

            $field_html .= '<span class="woocommerce-input-wrapper">' . $field;

            if ( $args['description'] ) 
                $field_html .= '<span class="description" id="' . esc_attr( $args['id'] ) . '-description" aria-hidden="true">' . wp_kses_post( $args['description'] ) . '</span>';
            

            $field_html .= '</span>';

            $container_class = esc_attr( implode( ' ', $args['class'] ) );
            $container_id    = esc_attr( $args['id'] ) . '_field';
            $field           = sprintf( $field_container, $container_class, $container_id, $field_html );
        

        return $field;

    

    return $field;

现在在 billing_postcode 更改时，您必须获得需要与 delivery_days 下拉选项 data-post-code 进行比较的 billing_postcode 值，并在此基础上显示隐藏。

function add_custom_js()
    ?>
    <script type="text/javascript">
        (function($)
            $('#billing_postcode').on('change', function()
            var postcode = $(this).val();
            var days  = $('#delivery_days');
            var i     = 1;
            $('option', days).filter(function()
                if ( $(this).attr('data-post-code') === postcode ) 
                    $(this).show();
                    if( i == 1 )
                      $("#delivery_days").val($(this).val());
                    
                    i++;
                 else 
                    $(this).hide();
                
            );
            );
            $('#billing_postcode').trigger('change');
        )(jQuery);
    </script>
    <?php

add_action( 'wp_footer', 'add_custom_js', 10, 1 );

经过测试并且有效。

【讨论】：

哦@bhautik你是个天才。非常感谢！

它工作正常，除了一件事 ¿ 如果 2 个或更多邮政编码的交货天数重叠怎么办？假设邮政编码 28001 的交货日期是星期一、星期三和星期五，而邮政编码 28002 的交货日期是星期五和星期六。如您所见，星期五是两个邮政编码的共同日子。 ¿ 如何在同一天分配多个邮政编码？

准备好了！当交货日期重叠时，我需要重复 2 个邮政编码的选项！ 'monday' => array('label' => __('Lunes', 'woocommerce'), 'data_attr_name' => 'post-code', 'data_attr_value' => '28001', ), 'monday' =>数组（'label' => __('Lunes', 'woocommerce'), 'data_attr_name' => '邮政编码', 'data_attr_value' => '28923', ),