Как правильно заполнить на Алиэкспресс адрес доставки woocommerce

В этой статье я вам расскажу, как можно настроить под себя страницу оформления заказа в интернет магазине, созданном на WordPress при помощи плагина Woocommerce.

Изначально страница оформления заказа в Woocommerce выглядит следующим образом:

Здесь много различных полей и не всегда все эти поля нужны. Часто возникает необходимость какие-то из этих полей убрать, какие-то добавить, поменять их местами и т.д.

Навигация по статье:

• Установка плагина Saphali Woocommerce Russian
• Редактирование существующих полей
• Добавление новых полей
• Редактирование полей реквизитов доставки и дополнительных полей
• Как сделать чтобы блоки формы размещались в один столбец?
• Видеоинструкция

Как заполнить адрес доставки на AliExpress

Установка плагина Saphali Woocommerce Russian

Для реализации данной задачи можно использовать плагин Saphali Woocommerce Russian.

Устанавливается он аналогично любому другому плагину. И после установки и активации у нас в разделе Woocommerce появляется пункт Saphali WC Lite.

Для настройки и редактирования формы оформления заказов переходим в раздел «Управление полями».

Здесь мы видим список всех полей, которые у нас отображаются на странице по умолчанию.

Редактирование существующих полей

С данными полями мы можем делать следующие операции:

1. 1. Перемещать и менять местами. Для этого наводим курсор на любое поле, при этом курсор у нас приобретает вид плюсика со стрелочками. Зажимаем левую кнопку мыши и перетаскиваем это поле туда, куда нам нужно.
2. 2. Можно редактировать поля, изменять надпись. Для этого ставим курсор в поле, где указан заголовок и меняем его значение на своё

• Если задан класс form-row-first, то это значит, что поле будет идти на половину строки, при чем, оно будет идти первым.
• Если стоит класс form-row-last — это значит, что поле также будет идти на половину строки, он оно будет расположено последним. То есть вторым в строке.
• Если нужно сделать, что бы какое-то поле шло на ширину всей строки, то в поле «Класс поля» нужно поставить класс form-row-wide.

• Select — раскрывающийся список
• Checkbox – это когда у вас доступно несколько вариантов, я человек ставит галочку
• Textarea — большое поле, в которое можно вводить какой-то более или мене большой текст
• Text – стандартное поле для ввода

Добавление новых полей

Если вам не достаточно тех полей, которые есть изначально и вы хотите добавить какое-то свое поле, то для этого:

1. Спускаемся вниз страницы и нажимаем на кнопку «Добавить»:

Если вы удалили какие-то поля, а затем решили, что вам нужно, что бы форма была снова такая же, как по умолчанию, то вы можете здесь, в самом низу нажать на кнопку «Восстановить поля по умолчанию». А затем, уже по новой, править те поля, которые вас интересуют.

Редактирование полей реквизитов доставки и дополнительных полей

Так же, в Woocommerce, когда человек оформляет заказ, и у вас в магазине настроены различные способы доставки, то ему еще высвечивается блок, в котором ему необходимо ввести адрес доставки. Так вот, поля для заполнения адреса доставки так же можно редактировать при помощи данного плагина.

Здесь есть вот такой раздел «Реквизиты доставки»:

И здесь, аналогично предыдущему, точно так же можем удалять, добавлять свои поля, менять их местами, указывать, обязательны ли они для заполнения, менять им классы и т.д.

Так же у нас есть возможность добавить дополнительные поля. По умолчанию это у нас идет поле «Примечания к заказу».

Мы можем здесь либо это поле удалить совсем, либо добавить сюда какие-то еще свои дополнительные поля.

Как сделать чтобы блоки формы размещались в один столбец?

Часто возникает необходимость сделать детали оплаты не в два столбца, как они сейчас расположены, а в один. Для этого мы можем в файл style.css вашей темы дописать несколько стилей для этих двух блоков. Прописывать стили мы можем:

1. При помощи встроенного редактора WordPress, который находится в разделе «Внешний вид» =>«Редактор». Здесь нам нужно найти файл таблицы стилей style.css, и в самом конце файла прописать необходимый набор стилей.

Прежде всего, нам нужно задать им ширину сто процентов и убрать обтекание. Для этого припишем следующий код:

#customer_details, #order_review_heading, #order_review <
width : 100% !important ;
float : none !important ;

При этом, обращаю ваше внимание, что все стили мы будем задавать с правилом !important потому, что базовые стили для элементов Woocommerce задаются в файле стилизации данного плагина. Туда мы вносить изменения не будем, по той простой причине, что при обновлении плагина у вас все прописанные стили просто сотрутся.
Там, конечно есть способ, как сделать так, что бы после обновления эти стили сохранялись, но я думаю, что ради двух столбцов мы не будем заморачиваться, и допишем все необходимые стили просто в файл стилей нашей темы.

Далее сохраняем изменения и смотрим, что получилось.

Если вы не хотите, что бы у вас этот блок занимал всю ширину страницы, то можно задать ему максимальную ширину в пикселях и выровнять этот блок по центру страницы.

Для этого припишем этим блокам еще два css-свойства, это свойство max-width, я задала здесь 900 пикселей, но вы можете задать ту ширину, которая вам нужна, и свойство margin: auto, которое позволяет выровнять эти блоки по центру страницы.

В сочетании с предыдущим кодом это будет выглядеть так:

#customer_details, #order_review_heading, #order_review <
width:100%!important;
float:none!important;
max-width:900px;
margin:auto!important;
>

Так же, сохраняем изменения и при обновлении получаем следующую картинку:

Ширина нашей форму уменьшилась и если вам нужно сделать ее чуть уже или чуть шире, то вы изменяете значение max-width. Его я пишу без правила !important, так как по умолчанию в стилях Woocommerce это значение не задается вовсе.

Названия идентификаторов блоков, для которых я прописываю данные стили я узнала при помощи инспектирования кода, и если вы хотите сделать это самостоятельно, и поменять стили для других элементов Woocommerce, то вам нужно перейти по этой ссылке и ознакомится с инструкцией, в которой я рассказываю, как это можно сделать.

Видеоинструкция

Если у вас остались какие-то вопросы по поводу изменения формы оформления заказов в плагине Woocommerce – оставляйте их в комментариях. Если данная статья была для вас полезно, не забудьте поделиться ею в социальных сетях.

На этом у меня все, спасибо за то, что посетили мой сайт, и до встречи в следующих статьях!

С уважением Юлия Гусарь

Источник: impuls-web.ru

WooCommerce. Скрытие полей заказа в зависимости от выбранного способа доставки

Иногда нужно сделать так, чтобы в зависимости от способа доставки выводились разные поля на странице оформления заказа. Можно скрывать эти поля стилями или скриптом, но возникает проблема валидации: заказ невозможно будет отправить, потому что не заполнены обязательные поля. Пришлось придумать собственное решение.

• Выглядит оно так

Выделенные строки и есть идентификаторы. Теперь достаточно сделать проверку и если получаем нужный способ доставки, удаляем лишние поля

Это пример. В каждом случае, допиливайте под свой проект. к содержанию

Шаг третий. Обновление страницы

Все работает, кроме обновления страницы. Добавим немного магии ajax, так как вся обработка полей на странице «Оформление заказа» происходит через ajax.

Как это работает?

• ловим выполнение обновления
• ловим событие выбора способа доставки
• запускаем прелоад
• загружаем фрагмент из первого шага

Код подключается на хук wp_footer , при желании его можно вынести в отдельный файл. Код проверялся на стандартной теме StoreFront. Все должно работать корректно.

И еще сделано обновление полей не после обновления методов доставки, а параллельно с этим обновлением

Весь код полностью

Просто запихать в в файл functions.php

Вот и все. А теперь реальный кейс

Реальный кейс

Задача

• два метода доставки: «Самовывоз», «Новая почта»
• убрать лишние поля на странице «Оформление заказа»
• добавить дополнительное поля для метода «Новая почта»
• значение нового поля должно добавляться в заказ и приходить с письмом

Должно получиться так

В методе «Самовывоз» остаются поля:

В методе «Новая почта»

• Имя;
• Город;
• Телефон;
• Email
• Номер отделения

Решение

Первое. Добавляем фрагмент

Второе. Добавляем условие переключения

add_filter( ‘woocommerce_checkout_fields’, ‘awoohc_override_checkout_fields’ ); function awoohc_override_checkout_fields( $fields ) < unset( $fields[‘billing’][‘billing_company’] ); unset( $fields[‘billing’][‘billing_address_1’] ); unset( $fields[‘billing’][‘billing_address_2’] ); unset( $fields[‘billing’][‘billing_postcode’] ); unset( $fields[‘billing’][‘billing_company’] ); unset( $fields[‘billing’][‘billing_state’] ); unset( $fields[‘billing’][‘billing_last_name’] ); $fields[‘billing’][‘billing_city’][‘label’] = ‘Город’; $fields[‘billing’][‘billing_first_name’][‘class’][0] = ‘form-row-wide’; $fields[‘billing’][‘billing_email’][‘class’][0] = ‘form-row-last’; $fields[‘billing’][‘billing_phone’][‘class’][0] = ‘form-row-first’; $chosen_methods = WC()->session->get( ‘chosen_shipping_methods’ ); if ( ‘flat_rate:2’ === $chosen_methods[0] ) < $fields[‘billing’][‘billing_city’][‘class’][0] = ‘form-row-first’; >else < unset( $fields[‘billing’][‘billing_number_post_office’] ); >return $fields; >

Обратите внимание! Не нужные поля убираем сразу, а только потом делаем проверку. И проверка при этом обратная — если не выбран нужный метод доставки, то убираем новое поле.

В некоторые поля сразу вносим изменения:

• В поле «Населенный пункт» меняем ярлык на «Город»
• В поле «Имя» изменяем ширину на полную
• В полях «Емайл» и «Телефон» изменяем ширину на половину, причем поле «Телефон» будет выводиться слева, а «Емайл» — справа

Третье. Добавляем новое поле

Добавляем новое поле с именем number_post_office

add_filter( ‘woocommerce_default_address_fields’, ‘awoohc_override_default_address_fields’ ); function awoohc_override_default_address_fields( $address_fields ) < $address_fields[‘number_post_office’] = array( ‘label’ =>’Номер отделения’, ‘placeholder’ => », ‘required’ => true, ‘class’ => array( ‘form-row-last’ ), ‘clear’ => true, ‘priority’ => 75, ); return $address_fields; >

Так как для добавления поля используем хук woocommerce_default_address_fields , то реально имя поля будет billing_number_post_office . Именно под таким именем сохраняем поле в метаданные заказа

add_action( ‘woocommerce_checkout_update_order_meta’, ‘awoohc_checkout_field_update_order_meta’ ); function awoohc_checkout_field_update_order_meta( $order_id ) < if ( ! empty( $_POST[‘billing_number_post_office’] ) ) < update_post_meta( $order_id, ‘billing_number_post_office’, sanitize_text_field( $_POST[‘billing_number_post_office’] ) ); >>

Теперь надо настроить поля заказа, чтобы данные выводились на странице заказа и связанных с ней. Для начала добавим новое поле в общий массив полей при администрировании заказа

add_filter( ‘woocommerce_admin_billing_fields’, ‘awoohc_add_admin_billing_fields’, 10 ); function awoohc_add_admin_billing_fields( $address ) < $address[‘billing_number_post_office’] = array( ‘label’ =>’Номер отделения’, ‘show’ => true, ); return $address; >

Теперь выведем значение поля в адресе

add_filter( ‘woocommerce_get_order_address’, ‘awoohc_add_billing_fields_get_order’ ); function awoohc_add_billing_fields_get_order( $address )

И сразу отформатируем для полей адреса доставки и адреса оплаты

add_filter( ‘woocommerce_order_formatted_shipping_address’, ‘awoohc_add_billing_fields’, 10, 2 ); add_filter( ‘woocommerce_order_formatted_billing_address’, ‘awoohc_add_billing_fields’, 10, 2 ); function awoohc_add_billing_fields( $fields, $order ) < $fields[‘billing_number_post_office’] = get_post_meta( $order->get_id(), ‘billing_number_post_office’, true ); return $fields; >

Приведем внешний адреса к привычному для России и СНГ

add_filter( ‘woocommerce_formatted_address_replacements’, ‘awoohc_formatted_address_replacements’, 10, 2 ); function awoohc_formatted_address_replacements( $replacements, $address ) < $replacements[»] = ( isset( $address[‘billing_number_post_office’] ) ! empty( $address[‘billing_number_post_office’] ) ) ? ‘№ отделения: ‘ . esc_html( $address[‘billing_number_post_office’]) : »; return $replacements; > add_filter( ‘woocommerce_localisation_address_formats’, ‘awoohc_address_format’ ); function awoohc_address_format( $formats ) < $formats[‘RU’] = «nnnг.n»; $formats[‘UA’] = «nnnг.n»; return $formats; >

Четвертое. Добавляем обновление через ajax

Все точно так же, как в третьем шаге, только добавляет сохранение значения нового поля.

add_action( ‘wp_footer’, ‘awoohc_add_script_update_shipping_method’ ); function awoohc_add_script_update_shipping_method() < if ( is_checkout() ) < ?> #billing_country_field jQuery(document).ready(function ($) < $(document.body).on(‘updated_checkout updated_shipping_method’, function (event, xhr, data) < $(‘input[name^=»shipping_method»]’).on(‘change’, function () < $(‘.woocommerce-billing-fields__field-wrapper’).block(< message: null, overlayCSS: < background: ‘#fff’, ‘z-index’: 1000000, opacity: 0.3 >>); >); var first_name = $(‘#billing_first_name’).val(), last_name = $(‘#billing_last_name’).val(), phone = $(‘#billing_phone’).val(), email = $(‘#billing_email’).val(), number_post_office = $(‘#billing_number_post_office’).val(); $(«.woocommerce-billing-fields__field-wrapper»).html(xhr.fragments[«.woocommerce-billing-fields»]); $(«.woocommerce-billing-fields__field-wrapper»).find(‘input[name=»billing_first_name»]’).val(first_name); $(«.woocommerce-billing-fields__field-wrapper»).find(‘input[name=»billing_last_name»]’).val(last_name); $(«.woocommerce-billing-fields__field-wrapper»).find(‘input[name=»billing_phone»]’).val(phone); $(«.woocommerce-billing-fields__field-wrapper»).find(‘input[name=»billing_email»]’).val(email); $(«.woocommerce-billing-fields__field-wrapper»).find(‘input[name=»billing_email»]’).val(number_post_office); $(‘.woocommerce-billing-fields__field-wrapper’).unblock(); >); >); >

Вот и весь кейс. Ничего сложного

Выводы

В итоге разобрали как можно сделать вывод полей на странице «Оформление заказа». И даже на пример реального кейса.

Все должно работать без проблем, если что, пишите в комметариях

Всем удачи! И не забудьте поделиться статьей в соцсетях!

Источник: wpruse.ru

Woocommerce доставка настройка

WooCommerce

На чтение 2 мин Опубликовано 03.09.2016

Привет ! Мы продолжаем создавать свой интернет-магазин с помощью супер плагина Woocommerce ! Сегодня мы будем разбирать функцию доставки для интернет-магазина. Чтобы настроить доставку, перейдите на страницу: Woocommerce — Настройки — Доставка . Здесь отображаются основные параметры доставки. Давайте их разберём !

О зонах доставки я написал отдельную запись — Читайте здесь !

Параметры доставки.

— Расчёты.

• Включить калькулятор стоимости доставки в корзине, после добавления товара в корзину, на странице «Корзина», возле значения «Доставка» будет отображаться вкладка «Подсчитать доставку». Нажав на данную вкладку, можно будет указать страну, город и почтовый индекс, чтобы узнать стоимость доставки.

• Спрятать стоимость доставки, пока адрес не введен, пока вы не введёте свой адрес, стоимость доставки не будет видна.

— Назначение доставки, здесь можно выбрать какой адрес клиента будет использоваться по умолчанию для доставки, платёжный адрес или адрес доставки. Лучше использовать по умолчанию — Платёжный адрес.

Классы доставки, применяются к группе товаров одного типа и могут использоваться некоторыми методами доставки, для обеспечения различными ставками, различных классов товаров. Чтобы добавить класс доставки, нажмите в правой части страницы на кнопку — Добавить класс доставки .

Далее, укажите название класса, слаг английскими буквами, описание класса доставки и нажмите на кнопку — Сохранить класс доставки .

Далее, чтобы добавить класс доставки к товару, перейдите на страницу редактирования товара. В данных о товаре, на вкладке «Доставка», вы сможете добавить к товару «Класс доставки».

Создавать классы доставки не обязательно. Достаточно создать зону доставки и всё.

Остались вопросы ? Напиши комментарий ! Удачи !

Источник: info-effect.ru