Руководство для начинающих по WooCommerce: Настройка доставки – Часть 1 – WPtuts.ru

В каких-то ситуациях вы захотите отключить платные способы доставки, если для покупателя доступна опция бесплатной – готовый код для WooCommerce

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Шаг первый. Добавляем форму полей во фрагмент

В WooCommerce есть такой функционал фрагментов, в них можно добавлять нужный html и выводить в нужном месте. Итак, добавляем фрагмент

Код изменен. Предыдущий фрагмент будет работать, но если в магазине используется личный кабинет, то будут проблемы. Так как данная форма подключается в файле checkout/form-billing.php, правильнее использовать такой код

/* * Добавляем часть формы к фрагменту */add_filter( ‘woocommerce_update_order_review_fragments’, ‘awoohc_add_update_form_billing’, 99 );function awoohc_add_update_form_billing( $fragments ) { $checkout = WC()->checkout(); ob_start(); echo ‘<div class=”woocommerce-billing-fields__field-wrapper”>’; $fields = $checkout->get_checkout_fields( ‘billing’ ); foreach ( $fields as $key => $field ) { if ( isset( $field[‘country_field’], $fields[ $field[‘country_field’] ] ) ) { $field[‘country’] = $checkout->get_value( $field[‘country_field’] ); } woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); } echo ‘</div>’; $art_add_update_form_billing = ob_get_clean(); $fragments[‘.woocommerce-billing-fields’] = $art_add_update_form_billing; return $fragments;}

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

к содержанию

Шаг первый. Добавляем форму полей во фрагмент

В WooCommerce есть такой функционал фрагментов, в них можно добавлять нужный html и выводить в нужном месте. Итак, добавляем фрагмент

Код изменен. Предыдущий фрагмент будет работ, но если в магазине используется личный кабинет, то будут проблемы. Так как данная форма подключается в файле checkout/form-billing.php , правильнее использовать такой код

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

Страница оформления заказа настройка плагин Woocommerce

Установить плагин WooCommerce Checkout Manager вы сможете прямо из админ-панели WordPress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

WooCommerce Checkout Manager

Далее, после установки и активации плагина, перейдите на страницу: WooCheckout. Здесь вы сможете настроить основные параметры плагина.

Uploads

– Allow Customers to Upload Files, позволить клиентам загружать файлы.

– Categorize Uploaded Files, классифицировать загруженные файлы.

– Upload Title, заголовок загрузки файла.

– Notification E-mail, ваш email адрес для уведомлений.

– Allow File Upload, укажите id товаров, которые позволяют загружать файлы.

– Deny File Upload, укажите id товаров, которые НЕ позволяют загружать файлы.

– Picture Editing Saved, текст “Сохранить изображение”.

– Deletion confirmation, текст “Удалить”.

– File types, укажите типы файлов, которые можно загружать.

– Number Of Files to Upload, укажите количество файлов для загрузки.

 Allow Upload for Order Status, позволяет загружать файлы на статус заказа.

Hide Address Fields

– Disable Billing Address fields for certain products, отключить поля оформления заказа для определённых товаров. Укажите ID товаров.

Checkout Notices

– Before Customer Address Fields, показать уведомление перед адресом клиента.

– Before Order Summary, перед заказом резюме.

– Notification text area, укажите в данном поле текст уведомления.

– Position for notification two, можно добавить второе уведомление по такому же принципу.

Switches

Скрыть заголовок “Доставка по другому адресу”.

– Force show Shipping Checkout fields (to be used in conjunction with Hide Доставка по другому адресу? heading). Поставьте здесь галочку, чтобы все поля “Доставка по другому адресу” были сразу открытыми.

– Hide Зарегистрировать вас? checkbox on Checkout page for guests, скрыть чек-бокс “Зарегистрировать вас”.

– Retain Fields Information, сохранять информационные поля.

– Editing Of Abbreviation Fields, включить редактирование аббревиатуры полей.

– Translate WooCommerce Checkout Manager Options Panel, перевести панель опций плагина.

– Before Billing fields – Additional Checkout fields will appear before the Billing Checkout fields section. Поставьте здесь галочку, чтобы дополнительные поля отображались перед полями оформления заказа.

– After Billing fields – Additional Checkout fields will appear after the Billing Checkout fields section. Тоже самое что и предыдущее, только после полей.

– Before Shipping fields – Additional Checkout fields will appear before the Shipping Checkout fields section. Поставьте здесь галочку, чтобы дополнительные поля отображались перед полями доставки заказа.

– After Shipping fields – Additional Checkout fields will appear after the Shipping Checkout fields section. Тоже самое что и предыдущее, только после полей.

– After Order Notes (Default) – Additional Checkout fields will appear after the Order Notes Checkout section. Дополнительные поля будут отображаться после примечания заказа.

Order Notes

– Order Notes Label, текст заголовка примечания заказа.

– Order Notes Placeholder, текст внутри поля примечания.

– Disable Order Notes, отключить примечание заказа.

– Order time title, заголовок время заказа.

– Set TimeZone, установить часовой пояс.

– Enable display of order time, включить отображение времени.

– Enable 24 hour time, показывать время 24 часа.

– Payment Method used by Customer, заголовок метода оплаты используемого клиентом.

– Enable display of Shipping Method, включить показ способа доставки.

– Default State code for Checkout, код для проверки по умолчанию.

Custom CSS

– Можете указать здесь свои CSS стили.

Advanced

– Дополнительный материал.

– Сохраните изменения.

WooCommerce Checkout Manager

Далее, после настройки плагина, перейдите на страницу “Billing”. Здесь вы сможете изменить поля оформления заказа.

 Required, поставьте галочку, чтобы сделать поле обязательным.

– Position, выберите позицию поля, слева, справа или во всю ширину.

– Clear, не понял, что даёт данный параметр. Кто знает, подскажите!

– Label, название поля.

– Placeholder, текст внутри поля.

– Choose Type, тип поля.

– Abbreviation, аббревиатура.

Крестик, поставьте здесь галочку, чтобы скрыть поле.

WooCommerce Checkout Manager Billing

Shipping, здесь можно изменить поля доставки, которые появляются, если поставить галочку “Доставка по другому адресу”. Всё тоже самое, что и на странице “Billing”.

Additional, здесь можно добавить дополнительные поля. Нажмите на кнопку “Add New Field” и укажите параметры нового поля.

Далее, нажав на кнопку – Import, вы можете импортировать в CSV файле настройки плагина, поля оформления заказа и поля доставки.

WooCommerce Checkout Manager Import

Далее, на странице Export можно экспортировать поля и настройки плагина в CSV файл.

Всё готово! После настройки плагина и изменения полей, перейдите на страницу “Оформления заказа”, чтобы увидеть сделанные изменения.

26A0.png Добавить новое поле на страницу товара Woocommerce!

26A0.png Добавить поля в детали заказа и email письма Woocommerce!

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

Почтовые индексы

Можно ограничить выбор зоны почтовыми индексами. Их диапазоном. Например для Москвы диапазон индексов: 101000-901997

В поле ограничения нужно добавить диапазон в таком формате: 101000…901997 (троеточие даст понять системе что все индексы между этими 2-мя попадают в эту зону)

Другие города — можно поискать в Интернете. Например: почтовые индексы диапазон Санкт-Петербург — и обычно легко находится диапазон для конкретного города или района.

Шаг второй. Убираем лишние поля

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

wc-change-field-shiping-methode-1.jpg

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

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

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

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

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

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

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

Что изменилось?

В комментариях указали на косяк — при переключении не сохраняются значения полей: Имя, Фамилия, Почта, Телефон. Полечил. Все оказалось гораздо проще.

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

Другие решения

Других решений пока нет …

Методы доставки

Мы добавим 3 метода:

  • Самовывоз (можно даже указать цену, но обычно бесплатно — 0)
  • Бесплатная доставка — добавляем и далее указываем что этот метод доступен только при сумме заказа минимум 2000 руб.
  • Доставка курьером — выбираем метод Единая ставка, цена 300 руб и название: Доставка курьером

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

Статус налога — везде указываем «Нет». Эта опция нужна для тех стран, где есть разные схемы налогов в зависимости от регионов доставки. Для России это не актуально.

Все тоже самое. Но тут мы можем не ограничивать индексы и выбрать только страну.

Метода можно указать 2:

  • Почтой России — 300 руб.
  • Бесплатная доставка если сумма заказа более 3000 руб.

В обоих случаях выбираем метод Единая ставка и далее просто вводим название и цену.

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

Например

оцените контент и участвуйте в выборе трендов

banner.png

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

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

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

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

Задача

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

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

chekckout-fields.gif

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

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

Решение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рейтинг
( 1 оценка, среднее 5 из 5 )
Загрузка ...