Если вам необходимо скрыть лишние поля адреса только для определённых способов доставки (например для самовывоза), а для других оставить (например для курьерской доставки), у вас возникнет проблема с Woocommerce, просто так нельзя убрать поля адреса на странице оформления.
Если вы хоть немного знакомы с программированием я вам помогу.
Итак идея в следующем: используя ajax мы будем скрывать поля, при выборе определённого метода доставки.
Содержание
Определяем поля адреса, которые нужно скрыть на странице оформления заказа
- На странице оформления заказа нажимаем правой кнопкой на нужном нам варианте доставки и выбираем пункт «Посмотреть код»
- Нас интересует <Input radio (элемент) с нужным нам value (значением) — это варианты методов доставки, необходимо выписать те варианты доставки, при выборе которых мы будем скрывать ненужные поля.
В данном случае я хочу скрыть все поля адреса для метода доставки «Самовывоз», у нас это «local_pickup:6» и скрыть поле «индекс» со всех методов доставки, кроме «Почты России» — у нас это «free_shipping:15»
Создаём скрипт, который будет скрывать поля адреса для метода доставки Самовывоз и Почта России.
- Идём в директорию с нашей темой и находим папку с названием js — в ней содержатся скрипты для вашей темы;
- ваш_сайт/wp-content/ themes/ваша_тема/
- Если ваша тема содержит папку js — создаём в этой папке файл, назовём его например — hide_shipping_fields.js — название можете придумать своё,
- Код написан так, что срабатывать триггер будет при каждом обновлении / событии в изменении метода / типа доставки.
в него помещаем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
jQuery(document).on('updated_checkout', function () {//говорим, что при обновлении формы checkout надо дёрнуть нашу функцию var method = woocommerce_params.chosen_shipping_method; jQuery( 'select.shipping_method, input[name^=shipping_method][type=radio]:checked, input[name^=shipping_method][type=hidden]' ).each( function( index, input ) { method = jQuery( this ).val(); } ); switch (true) { //начинаем перебор вариантов и проверяем их, тут я не указываю конкретный самовывоз, но можно указать - local_pickup:6 case (method.indexOf('local_pickup') >= 0 ): //если наш метод Самовывоз будем выполнять этот участок кода jQuery( '#billing_address_1_field, #billing_state_name_field, #billing_address_2_field, #billing_postcode_field, #billing_city_field').hide(); //Прячем адрес if (jQuery('#billing_address_1').val() === ''){ //если клиент не авторизован или у него нет адреса, нам что-то надо передать,т.к. поле адрес обязательное jQuery('#billing_address_1').attr('value', 'Самовывоз'); //передадим туда строку "самовывоз" } break; case ( method.indexOf('free_shipping:15') >= 0 ): // если наш метод доставки ПОчта России jQuery( '#billing_address_1_field, #billing_state_name_field, #billing_address_2_field, #billing_postcode_field, #billing_city_field').show(); //Показываем все break; default: // во всех остальных случаях прячем Почтовый индекс jQuery('#billing_postcode_field').hide(); jQuery( '#billing_address_1_field, #billing_address_2_field, #billing_state_name_field, #billing_city_field').show(); //Показываем всё кроме индекса } } ); |
- Если папки js в вашей теме нет — сохраните файл в корне вашей темы (ваш_сайт/wp-content/ themes/ваша_тема/), вместе с файлами header.php, footer.php и т.п.
Правильное подключение скрипта к WordPress
- Теперь необходимо правильно подключить наш скрипт к выводу, использовать будем стандартный механизм WordPress — wp_enqueue_script(), для этого открываем файл functions.php нашей темы и в самом конце добавляем код:
12345add_action( 'wp_enqueue_scripts', 'hide_fields_script' );function hide_fields_script() {wp_enqueue_script( 'hide_shipping_fields', get_template_directory_uri() . "/js/hide_shipping_fields.js", array( 'jquery' ), GENERATE_VERSION, true );}
- Использование функции wp_enqueue_script() это самый правильный и безопасный метод добавления скриптов на страницы под управлением WordPress.
- В нашем примере мы вешаем на стандартный хук загрузчика скриптов WordPress wp_enqueue_scripts новый action — hide_fields_script (название сами придумываем), далее, на этот action (экшен) регистрируем новую одноимённую функцию, которая вызывает стандартный процесс подключения скрипта — wp_enqueue_script ()
- в качестве параметров передаем:
- ‘hide_shipping_fields’ — рабочее наименование скрипта, обязательный элемент (строка в нижнем регистре)
- get_template_directory_uri() — получаем текущее расположение нашей активной темы
- . — «точка» говорит, что мы склеим расположение темы с чем то далее
- «/js/hide_shipping_fields.js» — расположение нашего скрипта, включая папку js или без неё, если у вас её нет и вы сохранили файл в корне темы
- array( ‘jquery’ ) — указываем, что перед нашим скриптом надо загрузить скрипт jquery, наш скрипт его будет использовать
- GENERATE_VERSION, true — говорим, что надо использовать версионность скрипта
- в качестве параметров передаем:
Вот и всё. таким образом мы скрываем поля адреса в зависимости от выбранного способа доставки, Самовывоз например, без перезагрузки страницы.
