我正在try 在WooCommerce中实现一个功能.我有两种运输方式.默认值是固定费率,另一个是本地拾取.

当 Select 本地收件送货方式时,我想在其下方显示一个 Select 下拉列表.如果再次 Select 统一运费运输方法,则应隐藏 Select 下拉列表.

我try 了以下方法来实现此功能,但未起作用:无论我是否 Select 本地收件运输方法, Select 下拉列表始终显示

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
}

推荐答案

使用动态样式将允许您显示隐藏您的 Select 字段…我已经完全修改了你的代码.它将只在 checkout 页面中起作用.我还向该自定义字段添加了验证.

// 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());
    });");
}

代码位于您的子主题的unctions.php文件中(或在插件中).经过测试,效果良好.

Php相关问答推荐

自定义WooCommerce查询字符串仅显示前3个产品

如果WooCommerce中存在特定的运输方式,则隐藏其他运输方式

WooCommerce/WordPress:简单的产品属性显示

用于计算付款费用的WooCommerce管理编辑产品中的自定义复选框

PHP-带POST验证的for循环

Apache只允许index.php-不从根目录工作

在PHP项目中安装OpenAI PHP SDK时出现问题

登录后重定向在WooCommerce中购买产品的用户

获取作者';在WordPress中使用PHP

如何解决 Laravel 外键错误?

使用 PHP,我可以将 foreach 语句放入瞬态中吗?

需要以一种形式执行两个操作

图片上传成功

根据所选付款方式启用/禁用 WooCommerce 所需的 checkout 字段

带有分类术语数组的 WordPress Elementor 自定义查询 - 如何要求所有术语都在返回的帖子中

WooCommerce - 调用功能ID不正确.不应直接访问订单属性

Laravel 测试 assertJsonMissing 不适用于唯一的键.为什么?

如何使用属性创建属性预设?

如何为多个表的id列设置不同的值

我想更新表格中的结果并将它们发布到浏览器,但它不起作用