Как настроить регистрационную форму WooCommerce

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

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

Зачем настраивать форму регистрации WooCommerce по умолчанию?

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

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

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

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

Как настроить форму регистрации WooCommerce

Существует 3 основных способа настроить регистрационную форму WooCommerce:

1. Из панели управления WooCommerce
2. С плагинами
3. Программно

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

1. Настройте регистрационную форму WooCommerce с панели управления WooCommerce.

По умолчанию вы можете редактировать свою регистрационную форму на панели инструментов WooCommerce. Перейдите в WooCommerce > Настройки и откройте вкладку « Учетные записи и конфиденциальность ». Здесь вы можете изменить несколько параметров, когда покупатели создают новую учетную запись в вашем магазине.

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

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

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

2. Настройте регистрационную форму WooCommerce с помощью плагинов

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

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

2.1. Установите и активируйте плагин и надстройку WooCommerce.

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

После этого на панели управления WooCommerce выберите « Плагины» > «Добавить новый» и нажмите «Загрузить плагин».

Нажмите « Выбрать файл », выберите zip-файл плагина, который вы загрузили после покупки, и нажмите « Установить сейчас» , чтобы установить плагин.

После установки активируйте плагин. Перейдите в « Плагины» > «Установленные плагины» и нажмите « Активировать » рядом с расширением WooCommerce «Регистрация пользователя» .

Если вы не знакомы с процессом установки таким образом, ознакомьтесь с нашим руководством по установке плагинов вручную.

2.2. Создайте регистрационную форму WooCommerce

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

Мы назовем нашу новую регистрационную форму « Регистрация WooCommerce », но вы можете дать ей любое имя.

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

2.3. Замените страницу регистрации WooCommerce по умолчанию

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

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

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

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

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

3. Настройте регистрационную форму WooCommerce программно

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

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

После того, как вы создали резервную копию своего сайта и установили дочернюю тему, вы можете приступить к редактированию регистрационных форм. В этом разделе мы покажем вам различные примеры того, что вы можете сделать. Вам нужно будет поместить фрагменты в файл functions.php вашей дочерней темы. Для этого на панели инструментов WordPress перейдите в раздел « Внешний вид» > «Редактор тем» и откройте файл functions.php .

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

Теперь давайте рассмотрим несколько примеров программной настройки регистрационной формы WooCommerce.

Отображение номера платежного счета в регистрационной форме

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

 // Отображаем поле в Регистрации/Редактировать учетную запись 
add_action('woocommerce_register_form_start', 'ql_display_account_registration_field'); 
add_action('woocommerce_edit_account_form_start', 'ql_display_account_registration_field'); 
функция ql_display_account_registration_field() { 
$user = wp_get_current_user(); 
$value = isset($_POST['номер_счета_выставления счетов'])? esc_attr($_POST['номер_счета_выставления счетов']): $user->номер_счета_выставления счетов; 
?> 
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_billing_account_number"><?php _e('Доставка/номер счета', 'woocommerce'); ?> <span class="required">*</span></label>
 <input type="text" maxlength="6" class="input-text" name="billing_account_number" value="<?php echo $value ?>" />
 </p> 
<div class="clear"></div> 
<?php 
}

// проверка поля регистрации 
add_filter('woocommerce_registration_errors', 'ql_account_registration_field_validation', 10, 3); 
функция ql_account_registration_field_validation($errors, $username, $email) { 
if ( isset( $_POST['номер_счета_для_выставления счетов'] ) && пусто( $_POST['номер_аккаунта_для выставления счетов'] ) ) { 
$errors->add( 'billing_account_number_error', __( '<strong>Ошибка</strong>: требуется номер счета!', 'woocommerce' ) ); } 
вернуть $ошибки; 
}

// Сохранить значение поля регистрации 
add_action('woocommerce_created_customer', 'ql_save_account_registration_field'); 
функция ql_save_account_registration_field ($customer_id) { 
если ( isset($_POST['номер_счета_выставления счетов'] )) { 
update_user_meta($customer_id, 'номер_счета_выставления счетов', sanitize_text_field($_POST['номер_счета_выставления счетов'])); 
}
}

// Сохранить значение поля в Редактировать учетную запись 
add_action('woocommerce_save_account_details', 'ql_save_my_account_billing_account_number', 10, 1);
функция ql_save_my_account_billing_account_number ($user_id) { 
если( isset( $_POST['номер_счета_выставления счетов'] ) ){ 
update_user_meta($user_id, 'номер_счета_выставления счетов', sanitize_text_field($_POST['номер_счета_выставления счетов'])); 
}
}

// Поле отображения в разделе полей выставления счетов администратора 
add_filter('woocommerce_customer_meta_fields', 'ql_admin_user_custom_billing_field', 10, 1); 
функция ql_admin_user_custom_billing_field( 
$args ) { $args['billing']['fields']['billing_account_number'] = array( 
'label' => __('Доставка/номер счета', 'woocommerce'), 
'описание' => '', 
'custom_attributes' => массив ('maxlength' => 6), 
); 
вернуть $аргументы;
}

Это покажет номер учетной записи для выставления счетов в разделе редактирования учетной записи на странице «Моя учетная запись», а также страницу редактирования пользователя-администратора в разделе полей для выставления счетов.

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

• billing_first_name
• billing_last_name
• billing_company
• Платежный адрес 1
• биллинг_адрес_2
• billing_city
• billing_postcode
• страной плательщика
• billing_state
• billing_email
• billing_phone

Отображать пользовательскую регистрационную форму WooCommerce во время оформления заказа

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

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

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

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

Это позволит вашим клиентам синхронизировать регистрацию пользователя с регистрацией оформления заказа WooCommerce . После этого проверьте все метки полей в таблице и сохраните изменения .

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

Бонус: отредактируйте адрес электронной почты для регистрации WooCommerce.

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

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

Просто перейдите в WooCommerce > Настройки и откройте вкладку Электронная почта. Здесь вы можете изменить шаблоны электронной почты с помощью параметров отправителя электронной почты и шаблона электронной почты.

Опция отправителя электронной почты позволяет редактировать имя и адрес «От». Это означает, что вы можете настроить, как имя отправителя и адрес электронной почты будут отображаться в электронной почте WooCommerce.

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

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

Когда вы будете довольны новым шаблоном, не забудьте сохранить изменения .

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

Вывод

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

В этом руководстве мы рассмотрели 3 различных метода настройки регистрационной формы WooCommerce :

• Из панели управления туалетом
• Использование специального плагина
• Программно

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

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

• Как настроить страницу WooCommerce Моя учетная запись
• Отредактируйте страницу продукта WooCommerce.
• Как настроить страницу категории в WooCommerce
• Как редактировать страницу магазина WooCommerce