Add a select field below Local Pickup Shipping Method in WooCommerce

Question

I am trying to implement a feature in WooCommerce. I have two shipping methods. The default is a Flat rate, and the other one is Local pickup.

When the local pickup shipping method is selected, I want to display a select dropdown below it. If the flat rate shipping method is selected again, the select dropdown should be hidden.

I have tried the following approach to achieve this functionality, but it hasn't worked: Regardless of whether I choose the local pickup shipping method or not, the select dropdown always displays

function add_custom_select_box($method, $index) {
    if ($method->method_id == 'local_pickup') {
        echo '<select name="local_pickup_store" id="local_pickup_store" onchange="updateSelectedStore()">
                <option value="choose_store">choose store</option>
                <option value="store1">store1</option>
                <option value="store2">store2</option>
              </select>';
        echo '<div id="selected_store_info"></div>';
    }
}
add_action('woocommerce_after_shipping_rate', 'add_custom_select_box', 10, 2);
function save_local_pickup_store($order) {
    if (isset($_POST['local_pickup_store'])) {
        $local_pickup_store = sanitize_text_field($_POST['local_pickup_store']);
        $order->update_meta_data('_local_pickup_store', $local_pickup_store);
    }
}
add_action('woocommerce_checkout_create_order', 'save_local_pickup_store');
function display_local_pickup_store($order) {
    $local_pickup_store = $order->get_meta('_local_pickup_store');
    if ($local_pickup_store) {
        echo '<p><strong>store:</strong> ' . esc_html($local_pickup_store) . '</p>';
    }
}
add_action('woocommerce_admin_order_data_after_billing_address', 'display_local_pickup_store');
add_action('wp_footer', 'custom_local_pickup_script');
function custom_local_pickup_script() {
    ?>    
<script>
        function updateSelectedStore() {
            var selectedStore = document.getElementById('local_pickup_store').value;
            var selectedStoreInfo = document.getElementById('selected_store_info');
            
            if (selectedStore !== 'choose_store') {
                selectedStoreInfo.innerHTML = '<p><strong>Selected Store:</strong> ' + selectedStore + '</p>';
            } else {
                selectedStoreInfo.innerHTML = '';
            }
        }
    </script>

    <?php
}

Answer 1

Using dynamic styling will allow you to show hide your select field… I have revised completely your code. It will work only in checkout page. I have added validation to that custom field too.

// Displays a select field on Local pickup checkout shipping method
add_action('woocommerce_after_shipping_rate', 'display_select_store_field');
function display_select_store_field( $method ) {
    if (is_checkout() && ! is_wc_endpoint_url() && $method->method_id == 'local_pickup') {
        echo '<div class="pickup_store">
        <select id="local_pickup_store" name="local_pickup_store">
            <option value="">'.__('choose store', 'woocommerce').'</option>
            <option value="'.__('Store 1', 'woocommerce').'">'.__('Store 1 (one)', 'woocommerce').'</option>
            <option value="'.__('Store 2', 'woocommerce').'">'.__('Store 2 (two)', 'woocommerce').'</option>
        </select>
        <div class="selected_store"></div></div>';
    }
}

// Select field validation
add_action( 'woocommerce_after_checkout_validation', 'select_store_field_validation', 10, 2 );
function select_store_field_validation( $data, $errors ) {
    $chosen_shipping_methods = WC()->session->get('chosen_shipping_methods');
    $chosen_shipping_method  = reset($chosen_shipping_methods);

    if ( strpos($chosen_shipping_method, 'local_pickup') !== false 
    && isset($_POST['local_pickup_store']) && empty($_POST['local_pickup_store']) ) {
        $errors->add( 'pickup_store_error', __( 'Please select a Pickup Store.', 'woocommerce' ), 'error' );
    }
}

// Save select field value
add_action('woocommerce_checkout_create_order', 'save_select_store_field_value');
function save_select_store_field_value( $order ) {
    $chosen_shipping_methods = WC()->session->get('chosen_shipping_methods');
    $chosen_shipping_method  = reset($chosen_shipping_methods);

    if ( strpos($chosen_shipping_method, 'local_pickup') !== false && isset($_POST['local_pickup_store']) ) {
        $order->update_meta_data('_local_pickup_store', esc_attr($_POST['local_pickup_store']));
    }
}

// Display select field value in admin orders
add_action('woocommerce_admin_order_data_after_billing_address', 'display_local_pickup_store');
function display_local_pickup_store($order) {
    $local_pickup_store = $order->get_meta('_local_pickup_store');
    if ( ! empty($local_pickup_store) ) {
        echo '<p><strong>Store:</strong> ' . $local_pickup_store . '</p>';
    }
}

// Inline CSS (on checkout page)
add_action('wp_head', 'local_pickup_store_inline_css');
function local_pickup_store_inline_css() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) : ?>
    <style>body.lp_store_off .pickup_store{display:none;}</style>
    <?php endif;
}

// Inline JQuery (on checkout page)
add_action('woocommerce_checkout_init', 'local_pickup_store_inline_js');
function local_pickup_store_inline_js() {
    wc_enqueue_js("const shippingMethodSel = '#shipping_method input[type=radio]';
    var chosenSMethodVal = $(shippingMethodSel+':checked').val();

    // On start after DOM is loaded
    if (chosenSMethodVal.indexOf('local_pickup') == -1 && ! $(document.body).hasClass('lp_store_off') ) {
        $(document.body).addClass('lp_store_off');
    }

    // On Shipping method change
    $(document.body).on( 'change', shippingMethodSel, function() {
        chosenSMethodVal = $(this).val();

        if (chosenSMethodVal.indexOf('local_pickup') == -1 && ! $(document.body).hasClass('lp_store_off') ) {
            $(document.body).addClass('lp_store_off');
        } else if (chosenSMethodVal.indexOf('local_pickup') != -1 && $(document.body).hasClass('lp_store_off') ) {
            $(document.body).removeClass('lp_store_off');
        }
    });

    // On Pickup Store select change (Displays the selected Store below)
    $(document.body).on( 'change', '#local_pickup_store', function() {
        $('div.selected_store').html($(this).val());
    });");
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.