Как настроить woocommerce checkout

Woocommerce Checkout Manager — создание пользовательских полей

Администратор

Woocommerce Checkout Manager — очень полезный плагин для редактирования, добавления или удаления полей для заполнения клиентами.

К сожалению, в самом WooCommerce не предусмотрено быстрое редактирование полей для заполнения клиентами на странице Checkout. Раньше для это требовалось создавать дочернюю тему, изменять таблицы стилей и менять код. Подробные примеры описаны вот тут (на английском с видео):

Однако с выходом плагина Woocommerce Checkout Manager ситуация стала гораздо проще.
После установки и активации плагина переходим в Параметры — Woocommerce Checkout Manager и в удобных таблицах редактируем нужные поля. С помощью чекбоксов можно убрать существующие. выставит им обязательные атрибуты, изменить заголовки и добавить новые.

Кроме бесплатного варианта, автор предлагает приобрести расширенную ПРО версию своего плагина за 20$, серьезно расширяющие функционал, особенно для цифровых товаров. Посмотреть все дополнительные функции премиум версии можно по ссылке ниже.

Страница бесплатного плагина
Страница премиум версии

Источник

Woocommerce: Настройка страницы оформления заказа

Задача. Необходимо было на странице оформления заказа добавить выбор по типу покупателя: физическое или юридическое лицо. И в зависимости от выбора должны добавляться или скрываться дополнительные поля. Т.е. по умолчанию выбрано Физическое лицо, а при переключении на юридическое — появляются дополнительные поля (ИНН).

Решение. В данной ситуации поможет плагин Checkout Manager for WooCommerce (QuadLayers). С помощью него можно добавить переключатель в виде радиокнопок, дополнительные текстовые поля и настроить логику и вывода.

Настройка формы заказа плагином Checkout Manager for WooCommerce

1. Устанавливаем и активируем плагин Checkout Manager for WooCommerce.

2. В админ панели переходим Woocommerce => Настройки => вкладка «Checkout» => в настройках плагина вкладка «Платежный адрес».

3. Добавляем новое поле для переключения типов: Type — Radio; Надпись (Label) — Заказчик; во вкладке Options — «Физическое лицо» и отмечаем по умолчанию; добавляем новую опцию — «Юридическое лицо»; Сохраняемся.

4. Добавляем новое поле «Название компании» или редактируем если по умолчанию оно уже было: Type — Text; Надпись (Label) — Название компании; Условная логика — отмечаем «Activate conditional field requirement.»; Parent (Родитель) — выбираем ранее созданное поле «Заказчик»; ниже «Show field if parent has this value» (Показать поле, если родитель имеет это значение) — Юридическое лицо; Сохраняемся.

5. Аналогично полю «Название компании» создаем поля «ИНН», «КПП» и т.п.

Источник

2 способа редактирвоания полей оформления заказа в WooCommerce

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

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

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

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

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

1. Перемещать и менять местами.

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

Зажимаем левую кнопку мыши и перетаскиваем это поле туда, куда нам нужно.

2. Можно редактировать поля, изменять надпись. Для этого ставим курсор в поле, где указан заголовок и меняем его значение на своё.

5. Так же, обращаю ваше внимание на столбец«Clear», если вы устанавливаете здесь галочку, то это будет указывать на то, что следующее поле будет начинаться с новой строки. Обычно, галочки здесь следует ставить тогда, когда в одной строке идет по два поля, и ставится она возле поля с классомform-row-last.

6.Так же вы можете сделать, что бы у вас в поле было задано значение по умолчанию. Например, для адреса здесь уже введен текст «Улица и т.д.». При этом на странице формы в данном поле будет по умолчанию отображается текст, который исчезает, когда покупатель начинает вводить свои данные.

7.Так же, вы можете выбрать тип поля. Это может быть:

Select — раскрывающийся список

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

Text – стандартное поле для ввода

8.Также можно выбирать обязательно ли данное поле для заполнения или нет, и публиковать это поле или нет.

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

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

2.После этого сразу под уже существующими полями появляется новое, для которого можно задать название, значение по умолчанию, задать ему класс, ти поля и т.д. 3.После того, как вы задали все настройки, прокручиваем вниз и нажимаем на кнопку «Сохранить».

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

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

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

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

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

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

Плагин Saphali Woocommerce Russian, который мы рассмотрели выше, не плохой инструмент, но он нагружает систему. Есть еще один хороший плагин для редактирования полей, им можно как и удалить так и создать нужные поля, WooCommerce Checkout Field Editor (Manager) Pro, но он также тяжеловат для такой простой манипуляции как просто убрать поля.

И так для такого чтобы просто удалить не нужные поля при оформлении заказа мы добавляем код в файл functions.php нашей темы:

Этим кодом мы удаляем поля Компанию, второй адрес, Страну, Город и Индекс.

Если вам нужно удалить еще какие-то поля, то просто продолжаем список подставляя нужные массивы.

Вот полный список полей массива, передаваемого в фильтр woocommerce_checkout_fields:

Источник

Редактируем поля оформления заказа в WooCommerce

Содержание

У WooCommerce, как и WordPress, есть куча отличных зацепок. При работе с ними нам потребуется вносить изменения всего в один файл и часто это functions.php . Этого будет достаточно, но конечно, было бы лучше, если бы это был functions.php вашей дочерней темы.

Фильтр, с которым будем работать – это woocommerce_checkout_fields .

Знакомство с фильтром woocommerce_checkout_fields

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

Итак, добавьте товар в корзину на вашем сайта и перейдите на страницу оформления заказа WooCoommerce. В качестве темы используется «Storefront» и нашем случае страница оформления заказа выглядит вот так:

Поля на странице оформления заказа в WooCommerce

Давайте посмотрим, из чего состоит эта страница, а для этого вставляем следующий код в functions.php :

После вставки кода вы увидите массив всех полей оформления заказа в WooCommerce с параметрами. Как вы можете видеть в массиве, эти поля отсортированы по группам: billing , shipping , account , order .

А конкретный массив полей, например для поля «Название компании» выглядит так:

Посмотрели на все имеющиеся поля оформления заказа и продолжаем…

Делаем обязательные поля не такими уж и обязательными 🙂

В этом руководстве мы будет работать с вариативным товарам, но существенной разницы нет.

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

Обязательные поля при оформлении заказа WooCommerce

В рамках этого руководства мы будем работать в основном с woocommerce_checkout_fields , но если вам одновременно нужны разные поля для выставления счета (Billing) и для доставки (Shipping), лучше использовать зацепку woocommerce_default_address_fields , потому что она влияет как на поля доставки, так и на выставление счетов одновременно.

Следующий код сделает все поля не странице оформления заказа не обязательными, ну разве что кроме поля для ввода телефона (см. чуть ниже):

Ну а что там с полем телефона? К сожалению он не входит в массив полей адреса. Придется использовать woocommerce_checkout_fields , чтобы сделать поле не обязательным:

Убираем лишние поля при оформлении заказа

Самое плохо, что можно сделать это тупо скрыть не нужные поля используя CSS. Пожалуйста не делайте так!

Избавить от лишних полей очень просто:

Приоритет 9999 для зацепки выбран не случайно. Такого рода изменения нужно запускать как можно позже. Кто знает, что там у вас в теме?

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

Первые четыре строчки закомментированы, так как в качестве примера мы оставляем Имя, Фамилия, Email и Примечание к заказу:

Убираем лишние поля при оформлении заказа WooCommerce

Меняем порядок полей

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

Сортировка полей внутри группы

Во-первых, вы должны помнить, что поля разделены на группы, а их всего 4:

• billing – Адрес выставления счёта
• shipping – Адрес доставки
• account – Информация об аккаунте
• order – Детали заказа

Каждая из этих групп содержит поля и можно легко изменить их порядок с помощью специального параметра приоритета.

В качестве примера давайте сделаем поле Email первым, а это всего пара строк кода:

А в результате страница оформления заказа будет выглядеть вот так:

Меняем приоритет поля оформления заказа в WooCommerce

Почему мы установили priority (приоритет) равный 4 ? Всё просто. Каждое из полей по умолчанию имеет свой приоритет, все они перечислены в таблице ниже. Итак, согласно таблице, чтобы сделать поле электронной почты первым, нужно использовать значение меньше 10 .

Группа	Название	Приоритет
Billing	billing_first_name	10
billing_last_name	20
billing_company	30
billing_country	40
billing_address_1	50
billing_address_2	60
billing_city	70
billing_state	80
billing_postcode	90
billing_phone	100
billing_email	110
Shipping	shipping_first_name	10
shipping_last_name	20
shipping_company	30
shipping_country	40
shipping_address_1	50
shipping_address_2	60
shipping_city	70
shipping_state	80
shipping_postcode	90
Account	account_password	–
Order	order_comments	–

Иногда после игр с приоритетами можно поломать верстку и получится что-то вроде этого:

Поля при оформлении заказа отображаются не корректно

Почему так происходит? А всё просто – недостаточно отсортировать массив полей. Необходимо применить соответствующие классы и к каждому полю.

На самом деле каждое поле оформления заказа имеет свой стиль (класс CSS), в зависимости от его положения, есть 3 основных класса:

• form-row-first – 50% в ширину, первый,
• form-row-last – 50% в ширину, второй,
• form-row-wide – 100% в ширину.

Давайте расставим правильные приоритеты и назначим плавильные CSS классы:

И как результат – всё выглядит правильно и приятно:

Правильные приоритеты и CSS классы для полей оформления заказа

Перемещение поля в другую группу

К сожалению этот метод не всегда работает, да и не со всеми полями, но и обойти его стороной тоже нельзя. Для примера давайте переместим поле Email другую группу:

И как результат:

Перемещение поля из одной группы в другую

Добавляем новые поля оформления заказа в WooCommerce

В качестве примера давайте добавим два поля в форму оформления заказа WooCommerce – выпадающий список под деталями выставления счета и флажок «Подписаться» в разделе примечаний к заказу. Первое поле будет обязательным.

Прежде всего, нам надо решить где разместить наши новые поля, а вот из чего нужно сделать выбор:

• woocommerce_before_checkout_billing_form – До формы адреса оплаты.
• woocommerce_after_checkout_billing_form – После формы адреса оплаты.
• woocommerce_before_checkout_registration_form – До формы регистрации.
• woocommerce_after_checkout_registration_form – После формы регистрации.
• woocommerce_before_checkout_shipping_form – До формы адреса доставки.
• woocommerce_after_checkout_shipping_form – После формы адреса доставки.
• woocommerce_before_order_notes – До примечания к заказу.
• woocommerce_after_order_notes – После примечания к заказу.

Всё понятно из названий зацепок, ими мы воспользуемся ниже, но они могут не сработать только в одном случае – если шаблоны оформления заказа WooCommerce по умолчанию: form-shipping.php и form-billing.php были переопределены в теме . В этом случае придется вручную добавлять новые поля в файлы темы в каталоге /woocommerce/checkout .

Итак, вот собственно код:

И как результат:

Добавляем поля оформления заказа в WooCommerce

А после оформления в информации о заказе (WooCommerce → Заказы) появятся новые, только что созданные поля:

Сохранение значения новых полей в ордере

К сожалении, даже с учетом того, что для нашего выпадающего списка мы поставили ‘required’ => true , поле всё еще по сути не обязательно для заполнения. 🙁

Добавив небольшой фрагмент кода мы решим эту задачку:

Посмотрите на второй параметр функции wc_add_notice – он также поддерживает типы уведомлений «success» и «notice», но параметр «error» – именно то, что нужно в нашем случае.

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

На этом пока всё.

Если у вас есть вопросы или просто хотите поделиться своим мнением, то оставляйте комментарии ✌️

Источник