1

Based on the answer here https://stackoverflow.com/a/48727517/15407096, I modified the code.

// Add checkout custom select fields
add_action( 'woocommerce_before_checkout_billing_form',  'change_city_to_dropdown', 20, 1 );
function change_city_to_dropdown( $checkout) {
    $domain = 'woocommerce'; // The domain slug

    // First Select field (Master)
    woocommerce_form_field( 'billing_city', array(
        'type'          => 'select',
        'label'         => __( 'Delivery options one' , $domain),
        'class'         => array( 'form-row-wide' ),
        'required'       => true,
        'options'       => array(
            ''  => __( 'Please select a value', $domain ),
            'A' => __( 'A', $domain ),
            'B' => __( 'B', $domain ),
            'C' => __( 'C', $domain ),
        ),
    ),
    $checkout->get_value( 'billing_city' ) );

    // Default option value
    $default_billing_address_1 = __( 'Please select a value', $domain );

    // Dynamic select field options for Javascript/jQuery
    $options_0 = array( '' => $default_billing_address_1 );
    $options_a = array(
        ''  => $default_billing_address_1,
        'D' => __( 'D', $domain ),
        'E' => __( 'E', $domain ),
        'F' => __( 'F', $domain ),
        'G' => __( 'G', $domain ),
    );
    $options_b = array(
        ''  => $default_billing_address_1,
        'H' => __( 'H', $domain ),
        'I' => __( 'I', $domain ),
        'J' => __( 'J', $domain ),
    );
    $options_c = array(
        ''  => $default_billing_address_1,
        'K' => __( 'K', $domain ),
        'L' => __( 'L', $domain ),
        'M' => __( 'M', $domain ),
    );

    // Second Select field (Dynamic Slave)
    woocommerce_form_field( 'billing_address_1', array(
        'type'          => 'select',
        'label'         => __( 'Delivery options two', $domain ),
        'class'         => array( 'form-row-wide' ),
        'required'       => true,
        'options'       => $options_0,
    ),
    $checkout->get_value( 'billing_address_1' ) );

    $required = esc_attr__( 'required', 'woocommerce' );

    // jQuery code
    ?>
    <script>
    jQuery(function($){
        var op0 = <?php echo json_encode($options_0); ?>,
            opa = <?php echo json_encode($options_a); ?>,
            opb = <?php echo json_encode($options_b); ?>,
            opc = <?php echo json_encode($options_c); ?>,
            select1 = 'select[name="billing_city"]',
            select2 = 'select[name="billing_address_1"]';

        // Utility function to fill dynamically the select field options
        function dynamicSelectOptions( opt ){
            var options = '';
            $.each( opt, function( key, value ){
                options += '<option value="'+key+'">'+value+'</option>';
            });
            $(select2).html(options);
        }

        // 1. When dom is loaded we add the select field option for "A" value
        // => Disabled (optional) — Uncomment below to enable
        // dynamicSelectOptions( opa );

        // 2. On live selection event on the first dropdown
        $(select1).change(function(){
            if( $(this).val() == 'A' )
                dynamicSelectOptions( opa );
            else if( $(this).val() == 'B' )
                dynamicSelectOptions( opb );
            else if( $(this).val() == 'C' )
                dynamicSelectOptions( opc );
            else
                dynamicSelectOptions( op0 ); // Reset to default
        });
    });
    </script>
    <?php
}

// Check checkout custom fields
add_action( 'woocommerce_checkout_process', 'wps_check_city_to_dropdown', 20 ) ;
function wps_check_checkout_custom_fields() {
    // if custom fields are empty stop checkout process displaying an error notice.
    if ( empty($_POST['billing_city']) || empty($_POST['billing_address_1']) ){
        $notice = __( 'Please select a day part under Delivery options' );
        wc_add_notice( '<strong>' . $notice . '</strong>', 'error' );
    }
}

The problem would be that it added a new area where my fields appear. How to replace the fields "city" and "street" based on those fields? After making these changes, I would like them to appear in the billing area and in the shipping area (currently it only appears in the billing area).

Instead of billing_city and billing_address_1, I tried to enter only city and address_1, but they still don't appear in both areas.I also tried to enter 'input_class' => array( 'wc-enhanced-select', ) to have a search field, but it gives me an error when entering it.

Please help me to solve these problems.

Thank you in advance!

brc
  • 21
  • 1

0 Answers0