Как создать отдельные страницы входа и регистрации в WooCommerce

Опубликовано: 2021-05-18

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

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

Стоит отметить, что страница WooCommerce My Account отображается шорткодом [woocommerce_my_account].

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

Как создать отдельные страницы входа и регистрации в WooCommerce

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

Давайте посмотрим, как вы можете этого добиться.

Шаги по созданию отдельных страниц входа и регистрации в WooCommerce

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

Читайте дальше, так как мы также покажем вам, как использовать короткие коды.

Вот шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Меню редактора тем». Когда страница Theme Editor открыта, найдите файл функций темы, в который мы добавим функцию, которая создаст шорткод страницы регистрации.
Добавьте следующий код в файл php :

add_shortcode( 'wc_reg_form_njengah', 'njengah_separate_registration_form' );

function njengah_separate_registration_form() {

if ( is_admin() ) return;

if ( is_user_logged_in() ) return;

ob_start();

// NOTE: THE FOLLOWING <FORM></FORM> IS COPIED FROM woocommerce\templates\myaccount\form-login.php

// IF WOOCOMMERCE RELEASES AN UPDATE TO THAT TEMPLATE, YOU MUST CHANGE THIS ACCORDINGLY

do_action( 'woocommerce_before_customer_login_form' );

?>

<form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >

<?php do_action( 'woocommerce_register_form_start' ); ?>

<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?> <span class="required">*</span></label>

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>

</p>

<?php endif; ?>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>

<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>

</p>

<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>

<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />

</p>

<?php else : ?>

<p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_register_form' ); ?>

<p class="woocommerce-FormRow form-row">

<?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>

<button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button>

</p>

<?php do_action( 'woocommerce_register_form_end' ); ?>

</form>

<?php

return ob_get_clean();

}

Второй шорткод — [wc_login_form_bbloomer]. Вы должны добавить его на новую страницу. Добавьте следующий код в тот же файл:

add_shortcode( 'wc_login_form_njengah', 'njengah_separate_login_form' );

function njengah_separate_login_form() {

if ( is_admin() ) return;

if ( is_user_logged_in() ) return;

ob_start();

woocommerce_login_form( array( 'redirect' => 'https://custom.url' ) );

return ob_get_clean();

}

Как использовать короткие коды

Как упоминалось ранее, шорткод [woocommerce_my_account] отображает страницу «Моя учетная запись». Если вы хотите, чтобы форма входа и панель инструментов страницы учетной записи оставались на одной странице, вы должны использовать первый шорткод: [woocommerce_my_account] .

Если вы хотите иметь логин + мой аккаунт и отдельную страницу регистрации:

[wc_reg_form_njengah] на странице регистрации
[woocommerce_my_account] на странице входа + аккаунта

Если вы хотите иметь отдельные страницы входа, регистрации и моей учетной записи:

wc_reg_form_njengah] на странице регистрации
[wc_login_form_njengah] на странице входа
[woocommerce_my_njengah] на странице "Моя учетная запись"

Однако вам необходимо отключить «Разрешить клиентам создавать учетную запись», как показано ниже: Счета

Вывод

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

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

Мы надеемся, что этот пост помог решить вашу проблему.

Как создать отдельные страницы входа и регистрации в WooCommerce

Как создать отдельные страницы входа и регистрации в WooCommerce

Шаги по созданию отдельных страниц входа и регистрации в WooCommerce

Как использовать короткие коды

Вывод

Похожие статьи