Как добавить условные поля в кассу WooCommerce

Вы хотите создать условную логику для своего магазина? Вы пришли в нужное место. В этом руководстве вы узнаете , как добавить условные поля в кассу WooCommerce .

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

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

Что такое условные поля?

Условные поля — это поля с условной логикой, поэтому при выполнении условия появляется или скрывается другое поле. Чтобы создать условную логику, вам потребуется хотя бы одно родительское поле и одно или несколько дочерних полей , зависящих от значений, которые принимает родительское поле . Например, если вы предлагаете своим клиентам возможность оплаты с помощью PayPal или кредитной карты, вы можете отображать поля сведений о кредитной карте только в том случае, если пользователи выбирают вариант « Кредитная карта ». Если они хотят заплатить через PayPal, эти поля не появятся. Таким образом, вы улучшите взаимодействие с пользователем на своем сайте и повысите коэффициент конверсии.

Что такое условная логика?

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

Следуя нашему примеру с кредитной картой, мы хотим, чтобы поля сведений о кредитной карте появлялись только в том случае, если клиент выбирает вариант оплаты кредитной картой. Этот пример довольно прост, но условная логика может достичь более высокого уровня сложности, если вы работаете с несколькими типами полей и/или добавляете несколько условий и действий.

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

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

Как добавить условные поля в кассу WooCommerce

В этом разделе мы увидим, как использовать и добавлять условную логику и условные поля в кассу в WooCommerce. Программное создание полезной условной логики требует большого количества кода, поэтому мы рекомендуем вам использовать плагин. Для этой демонстрации мы будем использовать Checkout Manager.

Этот плагин позволяет добавлять, настраивать и удалять различные типы полей на странице оформления заказа. Кроме того, вы можете применять неограниченные условные проверки, используя несколько настраиваемых полей на странице оформления заказа WooCommerce. С более чем 80 000 активных загрузок это один из лучших плагинов для оформления заказов. У него есть бесплатная версия с базовыми функциями, которые вы можете скачать здесь, и три премиальных плана, стоимость которых начинается от 19 долларов США.

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

1. Как создать условную логику
2. Условная логика с несколькими дочерними настраиваемыми полями
3. Как использовать несколько настраиваемых полей и связанные условные операторы
4. Чего нельзя делать при использовании условной логики

1. Как создать условную логику

Итак, теперь, когда у вас есть четкое представление о том, что такое условная логика и как она работает, давайте посмотрим, как создать поле условной логики с помощью плагина WooCommerce Checkout Manager. Давайте создадим условие для отображения сообщения, когда пользователь вводит « admin » в качестве имени в форме выставления счетов. Для этого сначала перейдите в WooCommerce > Checkout > Billing на панели инструментов WordPress. Там нажмите кнопку « Добавить новое поле ».

Окно откроется. Это редактор нового поля. Там выберите « Сообщение » в качестве типа и заполните такие параметры, как «Метка», «Тип» и «Сообщение». Кроме того, выберите Имя в качестве родительского поля в правом столбце. Наконец, напишите « admin » под именем и нажмите « Сохранить ».

Как видите, мы устанавливаем поле Имя в качестве родительского поля. Теперь пришло время протестировать его. Итак, перейдите на страницу оформления заказа в интерфейсе и введите « admin » в поле имени. Вы должны увидеть предупреждающее сообщение, подобное этому.

Это простой пример, но условные выражения могут включать множество полей, и при использовании большого количества условных выражений и настраиваемых полей все может стать очень сложным. Таким образом, чтобы легко управлять ими, вы можете увидеть, какое поле имеет условие и родительское поле на экране диспетчера полей соответствующей формы проверки ( Биллинг , доставка , дополнительные ).

Вот как вы можете добавить условное поле в кассу в WooCommerce с помощью Checkout Manager. Теперь давайте рассмотрим более сложный пример. И, конечно же, лучше всего то, что нет ограничений на количество настраиваемых полей, которые могут применять одни и те же или разные условия к одному и тому же родительскому полю.

2. Условная логика с несколькими пользовательскими дочерними полями

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

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

Итак, сначала перейдите в WooCommerce > Checkout и создайте поле типа радио. В этом примере мы назовем это поле «Доставка». Затем введите параметры. Мы назовем их Takeaway и Delivery. Здесь вы также можете выбрать цену для каждого варианта и установить ее по умолчанию. Поскольку мы хотим отображать различные поля для клиентов в зависимости от установленного ими флажка, мы собираемся использовать некоторые поля оформления заказа WooCommerce по умолчанию для опции доставки . Таким образом, покупатели могут заполнить свои данные, чтобы получить свои товары по адресу, который они выбирают. Итак, отредактируйте поля WooCommerce по умолчанию: штат, город, почтовый индекс и почтовый адрес. Затем создайте одинаковую условную логику для каждого из них. Кроме того, мы создадим условие и выберем тип радиополя «Доставка» в качестве родительского поля и отобразим поле «Состояние», если пользователи выберут вариант «Доставка». Конечно, вы можете сделать то же самое для всех этих полей или некоторых из них. В этом примере мы создадим условные следующие поля:

• billing_state
• billing_city
• billing_postcode
• Платежный адрес 1

Создать настраиваемое дочернее поле

Затем вам нужно создать новое настраиваемое поле, которое появится, когда покупатель выберет вариант «На вынос », чтобы вы могли отправить продукт в один из распределительных центров. Еще раз перейдите в настройки плагина и создайте тип поля Select . Активируйте условный флажок, выберите «Доставка» в качестве родителя и назовите его «Забрать» в разделе « Доставка ». После этого нужно создать адреса для распределительных центров. Итак, перейдите в раздел « Параметры » и добавьте несколько адресов. Наконец, сохраните изменения. Теперь пришло время проверить интерфейс. Перейдите на страницу оформления заказа и выберите некоторые из только что созданных вариантов. Например, когда пользователи выбирают опцию Takeaway, вы можете выбрать один из центров распределения. С другой стороны, если они выбирают « Доставка », им нужно ввести адрес, по которому они хотят получить свои продукты. ПРИМЕЧАНИЕ . Мы добавили еще два поля для отображения информационного сообщения, по одному для каждой опции, используя те же условные выражения, которые мы использовали в других полях. Теперь вы знаете, как добавить условные поля в кассу WooCommerce, используя более сложную логику. Однако вы можете пойти дальше и создать еще более сложную логику. Давайте посмотрим, как создавать связанные условные операторы .

3. Как использовать несколько настраиваемых полей и связанных условий

Когда вы работаете со многими связанными условными выражениями, все может стать довольно сложным. Связанные условные операторы являются отличным примером этого. Это когда условие применяется к полю, которое имеет другое условие к другому полю. Чтобы лучше понять это, вы можете думать об условном предложении с подусловием, которое имеет другое подусловие и так далее. Уровень иерархии условий и количество настраиваемых полей, которые вы можете использовать, не ограничены, поэтому вы можете создавать очень сложную логику со многими зависимостями.

Создание связанного условного предложения

Итак, давайте создадим более сложный пример, используя связанные условные операторы. Допустим, вы хотите предоставить своим клиентам возможность добавить дополнительный пакет к их заказу. Возможные варианты: картон, подарок и пенопласт. Во-первых, добавьте тип поля флажка, чтобы клиент мог запросить дополнительный пакет. На вкладке « Цена » редактора полей введите цену, которую вы хотите добавить к текущему заказу, когда покупатель установит флажок «Дополнительный пакет». Затем вам нужно поработать над вариантами упаковки, которые вы предложите своим клиентам. Мы позволим покупателям выбирать более одного варианта, поэтому мы создадим тип поля «Множественный выбор». Добавьте метку и выберите Extra Package в качестве родительского поля, чтобы ваша условная логика выглядела так: Затем перейдите на вкладку « Параметры » и создайте параметры для своих клиентов. На этом экране вы можете установить разные цены для каждой альтернативы. Поскольку мы уже установили цену при создании поля флажка, мы не будем использовать эту опцию здесь. Как только вы закончите это, пришло время проверить внешний интерфейс. Если все работает правильно, вы сможете выбрать несколько вариантов при проверке поля « Дополнительная упаковка »: Здесь мы использовали одно условное выражение для отображения поля множественного выбора. Теперь давайте создадим связанное условие с каждым из параметров/значений родительского поля.

Добавить несколько вариантов

Итак, давайте выберем вариант «Подарочная упаковка» и применим некоторые условия. Давайте создадим произвольное поле радио и заполним редактор следующим образом. Мы собираемся предложить несколько бумажных принтов для подарочной упаковки, поэтому мы собираемся использовать это поле, чтобы клиенты могли выбрать один из них. Для этого перейдите в раздел « Параметры » и настройте печать на бумаге для радиополя. Мы настроили параметры следующим образом: А в интерфейсе вы увидите что-то вроде этого: Поскольку мы показываем подарочные упаковки, лучше показывать изображения, а не текст. Для отображения изображений в каждом варианте мы использовали некоторые изображения, которые ранее загрузили в библиотеку. Вы можете ввести изображения для метки каждой опции с помощью следующего кода: <img class=”paper-style” src=”#path of your image url”> Итак, вы создали цепочку условной логики, которая включает два уровня. и два условия, которые зависят друг от друга. Дополнительная упаковка ->(условие 1)-> Тип упаковки ->(условие 2)-> Подарочная упаковка

Добавление еще одного условного уровня

Давайте пойдем немного дальше и добавим новый уровень условного предложения. На последнем снимке экрана вы увидите новое поле «Подарочная карта», которое дает пользователям возможность добавить в пакет специальную подарочную карту. За это мы возьмем дополнительные 4 доллара. Кроме того, мы собираемся использовать условие для отображения нового настраиваемого поля и предоставления пользователям возможности вводить текст, который они хотят напечатать на подарочной карте. Итак, давайте создадим новое поле флажка и настроим его следующим образом: Вы можете видеть, что мы ссылаемся на одно и то же родительское поле и используем то же условие, которое мы использовали для подарочной упаковки на предыдущем шаге. Затем добавьте текстовую область, чтобы пользователи могли вводить текст, который они хотят видеть на подарочной карте, и настройте его следующим образом: Это последнее условие. У него есть настраиваемое поле « Подарочная карта » в качестве родительского поля и « Текст подарочной карты» в качестве дочернего поля. Итак, теперь, когда покупатели выбирают опцию «Подарочная карта», они увидят это: И вот как вы создаете сложную логику и добавляете несколько условных полей на страницу оформления заказа в WooCommerce. Мы объединили три условных и несколько настраиваемых полей в следующем порядке: Дополнительная упаковка ->(условие 1)-> Тип упаковки ->(условие 2)-> Подарочная упаковка ->(условие 3)->Подарочная карта

4. Чего нельзя делать при использовании условной логики

Используйте поля из разных форм

В WooCommerce условные поля должны ссылаться на родительское поле, расположенное в той же форме. На странице оформления заказа есть три формы: Биллинг, Доставка и Дополнительные формы. Каждая из них работает как отдельная форма и не может иметь условных выражений, зависящих от полей из другой формы.

Условно для полей без значения (кнопка, заголовок, сообщения)

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

Изменить идентификаторы или имена полей

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

Инициировать другое действие, кроме отображения/скрытия поля

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

Применение условий к значениям полей за пределами оформления заказа

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

Вывод

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

В этом руководстве вы узнали, как создавать и настраивать дополнительные поля с помощью плагина WooCommerce Checkout Manager. Мы добавили настраиваемые поля и создали как простую условную логику, так и более сложные примеры с цепочками условных выражений. Наконец, мы рассмотрели ограничения условной логики в WooCommerce.

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

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