Как добавить пользовательское поле для загрузки в WooCommerce

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

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

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

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

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

Зачем добавлять настраиваемое поле загрузки в WooCommerce?

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

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

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

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

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

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

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

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

Как добавить пользовательское поле для загрузки в WooCommerce

Самый простой способ добавить пользовательское поле загрузки в WooCommerce — использовать плагин. Для этой демонстрации мы будем использовать Checkout Manager для WooCommerce, бесплатный инструмент с более чем 90 000 активных установок.

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

Шаг 1. Установите Checkout Manager для WooCommerce.

Во-первых, вам нужно установить плагин. В панели администратора WordPress перейдите в «Плагины» > «Добавить новый».

Затем найдите плагин Checkout Manager for WooCommerce от QuadLayers и нажмите кнопку « Установить сейчас ». После установки плагина нажмите « Активировать ».

Теперь пришло время настроить плагин. Давайте начнем с добавления нового пользовательского поля загрузки на страницу оформления заказа WooCommerce.

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

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

Шаг 2. Добавьте пользовательское поле загрузки на страницу оформления заказа WooCommerce.

На панели инструментов WordPress перейдите в WooCommerce > Checkout. Там вы найдете все настройки Checkout Manager.

Перейдите на вкладку « Оформить заказ » и перейдите в раздел « Дополнительно », чтобы открыть настройки дополнительных полей.

ПРИМЕЧАНИЕ . В этом примере мы добавим поле в раздел «Дополнительно», но вы можете добавить его в раздел «Оплата», «Доставка» или в любой другой раздел оформления заказа, просто перейдя в соответствующую область на вкладке «Оформление заказа».

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

Настройте пользовательское поле загрузки

После этого вы перейдете на новую страницу с меню настроек. Здесь вы можете указать параметры поля, которое хотите добавить. Поскольку мы хотим добавить пользовательское поле загрузки, выберите «Файл» в разделе «Тип» и установите пользовательскую метку и текст кнопки. Затем нажмите « Сохранить ».

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

• Перемещение: вы используете стрелки вверх и вниз, чтобы переместить поле вверх или вниз. Кроме того, вы можете щелкнуть и перетащить значок с тремя горизонтальными линиями, чтобы изменить положение поля.
• Обязательное: Включение обязательного поля делает поле обязательным. Это означает, что пользователь не может продолжить, пока не заполнит это поле.
• Позиция: вы можете выбрать позицию, в которой вы хотите отобразить поле. Есть три варианта на выбор: левый, правый или широкий.
• Очистить: включение этого параметра запрещает отображение любого другого поля слева или справа от этого конкретного поля.
• Отключить: при выборе кнопки отключения это конкретное поле не будет отображаться на странице оформления заказа.
• Редактировать и удалить: как следует из названия, вы можете редактировать или удалять определенное поле, нажав соответствующую кнопку.

После того, как вы настроили все параметры, сохраните изменения.

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

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

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

Бонус: добавьте условное поле в WooCommerce

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

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

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

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

Создайте условное поле с помощью Checkout Manager

Во-первых, давайте добавим родительское поле. Следуя тому же примеру, мы добавим его в раздел «Дополнительно», но вы можете добавить его в раздел «Оплата», «Доставка» или любой другой раздел оформления заказа.

Перейдите в WooCommerce > Checkout, перейдите на вкладку Checkout и откройте раздел « Дополнительно ». Нажмите кнопку « Добавить новое поле » и задайте параметры для родительского поля. Используя приведенный выше пример, мы выберем « Выбрать » в качестве «Типа» и добавим пользовательскую метку и текст-заполнитель.

Затем перейдите на вкладку « Параметры » с левой стороны и установите все возможные параметры, которые может выбрать пользователь. В этом примере мы задаем пользователю вопрос, на который может быть только два ответа: «Да» или «Нет». Поскольку ответ на этот вопрос не требует дополнительной оплаты (например, за быструю доставку или международную доставку), мы устанавливаем цену равной 0. После того, как вы настроили все параметры, сохраните изменения.

Создайте дочернее поле

Затем вам нужно создать дочернее поле — пользовательское поле загрузки — и настроить условные параметры.

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

Когда закончите, не забудьте сохранить изменения.

Вот и все! Теперь вы успешно настроили условное поле на странице оформления заказа WooCommerce.

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

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

Вывод

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

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

В этой статье мы обсудили:

• Преимущества добавления настраиваемого поля загрузки
• Пошаговые инструкции о том, как добавить пользовательское поле загрузки в WooCommerce с помощью Checkout Manager
• Что такое условные поля и как они работают
• Как вы можете добавить условное поле в WooCommerce, чтобы оптимизировать оформление заказа

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