Меню

Настройка страницы checkout woocommerce

Woocommerce настройка оформления заказа – checkout

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

Не бойтесь нажимать, вы перейдете сразу к просмотру нужной информации

Сразу повторюсь, для настройки и удаления полей у woocommerce есть плагин расширение, называется он Saphali Woocommerce Russian и он частично бесплатный, вот ссылка на него. Более детально постараюсь описать в следующих статьях, сейчас не буду на нем останавливаться.

Настройка страницы оформления заказа woocommerce без плагина

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

Как переименовать поля оформления заказа

к менюПошаговая инструкция (нажимая на кнопки «раскрыть шаг» вы увидите следующий шаг, а нажав на изображение вы можете его увеличить):

В данном примере мы переименовали поле город (населённый пункт) в «Город доставки», а поле адрес в «Адрес доставки». Аналогичным способом можно переименовать остальные поля. Чтобы узнать какие у вас есть поля смотрите шаг 3.

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

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

Как изменить тип поля оформления заказа с input на textarea

к менюПредположим у нас на странице checkout есть поле «Адрес» и у него поле для ввода типа input. Давайте сделаем чтобы оно стало textarea, также удалим следующие поле за ним по ненадобности, смотрите скин:

Открываем админку, файл functions.php в редакторе, в самый конец забрасываем туда вот такой код:

и сразу же смотрим результаты работы этой функции:

Комментарии смотрите в коде, каждая строчка имеет свое значение.

Вот собственно и все. В этом уроке я показал вам как делается настройка страницы оформления заказа у woocommerce. Не забудьте поделиться этой статьей со своими друзьями:

Статья супер, все четко и по делу, реально мало качественного материала в нете. Благодарю за труды

Добрый день.
К сожалению ничем не могу помочь. С плагином не сталкивался, готового кода не делал для такой подгрузки. Хотя с определенным уровнем знания js наверное это не так сложно реализовать.

Источник

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

Содержание

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

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

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

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

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

Читайте также:  Телевизор lg 43uh603v настройка смарт тв

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Группа Название Приоритет
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 основных класса:

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

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

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

Читайте также:  Как полностью очистить телефон до заводских настроек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

WordPress.org

Русский

Checkout Manager for WooCommerce

Описание

WooCommerce Checkout Manager customization and field’s management alternatives:
* Re-order fields.
* Rename and higlight.
* Hide or extend Checkout fields within the Billing, Shipping and Additional sections.

Presentation

WooCommerce checkout manager is a plugin built to be the wizard of checkout pages. Helps to modify in an intuitive way, allows fields customization, to extend billing information and to create any field required at WooCommerce checkout.

WooCommerce Checkout process

WooCommerce Checkout Manager allows you to customize the checkout process, including or reducing order’s fields collected. Our plugin is able to consider your billing data inside checkout page, and recovers all data required by your company process.

Force to include shipping address

This option allows you to remove the toggle checkbox to display the shipping fields. Shipping fields will be always displayed, and the user is forced to complete them.

Force to create an account

This option allows you to remove/include, the account creation during the purchase process. If selected, the account will be always created with the email defined by the user in the billing fields.

Remove order notes

This option allows you to remove the order notes in the checkout form.

Add message before checkout

This option allows you to include a custom message before or after the checkout form. This works as engagement action message to grateful your customers.

Читайте также:  Настройка бесплатного шаблона wordpress

WooCommerce Checkout Fields

WooCommerce Checkout Manager allows you to include custom fields to the checkout page, related to billing, Shipping or Additional fields sections.

Our plugin allows to reorder, remove or change the field type of the WooCommerce core fields. You can choose between this field types: Text, Textarea, Password, Radio, Checkbox, Select, Country, State, Multiselect, Multicheckbox, Heading, Colorpicker, File uploader.

WooCommerce Checkout Conditional Fields

WooCommerce Checkout Manager supports conditional checkout fields allowing you to show/hide the fields based on any value of its parent fields.

Our system detects the parent field type and allows you to select the value based on the available options.

WooCommerce Checkout Upload Files

You can include an unlimited number of files from different types into fields. Then offer the user an option to display the uploaded files in order. The user will be allowed to upload or delete fields through the order page.

Скриншоты

Customize shipping fields, create account, order notes and include custom message in checkout page.

Customize or add additional fields to your checkout billing fields.

Customize or add additional fields to your checkout shipping fields.

Include additional fields to your checkout page.

Allow users to upload images in their orders.

Include select and radio fields and select default option.

Include multiselect and multicheckbox fields and select defaults options.

Set conditional relationships easily based on the parent value or parent options.

Show or hide fields based on the products selected in the cart.

Handle uploaded files in order admin dashboard.

Часто задаваемые вопросы

How to add checkout fields?

How to remove core checkout fields?

How to change default fields order?

How to change additional fields position?

How do I add conditional checkout fields?

How do I review the Order data from the custom fields?

Your Order data can be reviewed in each order within the default WooCommerce Order Data box of the WooCommerce > Edit Order screen within the WordPress Administration. Custom fields are separated by Billing, Shipping and Additional sections.

Отзывы

It has a bug which cannot upload files in checkout page

Great plugin!

Bom plugin

Good Plugin

Estupendo

Участники и разработчики

«Checkout Manager for WooCommerce» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

«Checkout Manager for WooCommerce» переведён на 10 языков. Благодарим переводчиков за их работу.

Заинтересованы в разработке?

Журнал изменений

Add Error Fix 2.
GUI upgrade.

Add Error Fix.
Add WooCommerce Order/Customer CSV Export support
Able to Change additional information header

GUI + Code clean up.
Multi-lang Save issue fix.

Источник

Adblock
detector