Cara Membuat Halaman Login dan Registrasi Terpisah Di WooCommerce

Diterbitkan: 2021-05-18

Pisahkan Halaman Login dan Registrasi Di WooCommerce Apakah Anda mencari cara untuk memisahkan halaman Login dan Registrasi secara terprogram? Tutorial singkat ini akan memberikan solusi mudah untuk Anda.

Anda mungkin ingin mengirim pelanggan yang keluar ke halaman Login dan pelanggan yang tidak terdaftar ke halaman terpisah. Secara default, WooCommerce menampilkan formulir login dan formulir pendaftaran di halaman yang sama.

Perlu disebutkan bahwa halaman Akun Saya WooCommerce ditampilkan oleh kode pendek [woocommerce_my_account].

Memiliki formulir Login dan Pendaftaran pada halaman yang sama mungkin bukan ide yang baik jika Anda ingin menggunakan halaman arahan atau halaman penjualan dengan tujuan tertentu seperti pendaftaran pengguna. Ini berarti bahwa formulir login tidak diperlukan di halaman ini.

Cara Membuat Halaman Login dan Registrasi Terpisah di WooCommerce

Dalam tutorial singkat ini, kami akan menunjukkan cara memisahkan halaman login dan halaman registrasi. Kami akan menunjukkan cara membuat dua kode pendek baru, satu untuk formulir masuk dan satu lagi untuk formulir pendaftaran. Kode pendek ini dapat digunakan di mana saja di situs Anda.

Mari kita lihat bagaimana Anda bisa mencapainya.

Langkah-langkah untuk Membuat Halaman Login dan Registrasi Terpisah di WooCommerce

Sebelum Anda melanjutkan, penting untuk dicatat bahwa konten yang digunakan untuk membuat kode pendek disalin dari file template WooCommerce. Ini berarti bahwa ketika WooCommerce merilis perubahan apa pun pada file-file ini selama pembaruan, Anda perlu mengubah beberapa bagian kode.

Baca terus, karena kami juga akan menunjukkan cara menggunakan kode pendek.

Berikut adalah langkah-langkah yang perlu Anda ikuti:

  1. Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
  2. Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Menu . Saat halaman Theme Editor terbuka, cari file theme functions dimana kita akan menambahkan fungsi yang akan membuat shortcode halaman registrasi.
  3. Tambahkan kode berikut ke file 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();

}
  1. Kode pendek kedua adalah [wc_login_form_bloomer]. Anda harus menambahkannya ke halaman baru. Tambahkan kode berikut dalam file yang sama: 
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();

}

Cara Menggunakan Kode Pendek

Seperti disebutkan sebelumnya, kode pendek [woocommerce_my_account] menampilkan halaman Akun Saya. Jika Anda ingin menyimpan formulir login dan dasbor halaman akun saat login di halaman yang sama, Anda harus menggunakan kode pendek pertama: [woocommerce_my_account] .

Jika Anda ingin memiliki login + akun saya, dan halaman pendaftaran terpisah:

  • [wc_reg_form_njengah] di Halaman Daftar
  • [woocommerce_my_account] di Halaman Login + Akun

Jika Anda ingin memiliki halaman login, registrasi, dan akun saya yang terpisah:

  • wc_reg_form_njengah] di Halaman Daftar
  • [wc_login_form_njengah] di Halaman Login
  • [woocommerce_my_njengah ] di Halaman Akun Saya

Namun, Anda perlu menonaktifkan "Izinkan pelanggan membuat akun", seperti yang ditunjukkan di bawah ini: akun

Kesimpulan

Itu saja yang perlu Anda lakukan untuk memisahkan halaman login dan halaman registrasi. Ingatlah untuk menyalin dan menempelkan kode pendek di halaman baru.

Sebaiknya buat tema anak. Ini akan memastikan bahwa perubahan Anda tidak hilang selama pembaruan.

Kami harap posting ini membantu menyelesaikan masalah Anda.

Artikel Serupa

  1. Cara Menambahkan Pengalihan Halaman Akun Saya WooCommerce
  2. Cara Redirect ke Keranjang setelah Login di WooCommerce
  3. Cara Menghapus Keranjang saat Logout Di WooCommerce
  4. Cara Menyembunyikan Dasbor di Halaman Akun Saya WooCommerce
  5. Cara Menyembunyikan Tab Apa Pun Halaman Akun Saya WooCommerce
  6. Cara Menghapus Menu Unduhan Halaman Akun Saya WooCommerce
  7. Cara Mendapatkan Metode Pembayaran di WooCommerce »Contoh Kode
  8. Cara Melampirkan Faktur PDF ke Email WooCommerce
  9. Cara Mengakses Basis Data WooCommerce
  10. Cara Mengubah Pengirim Email Di WooCommerce
  11. Cara Mengekspor Produk Di WooCommerce
  12. Cara Membuat Shortcode Logout Masuk WooCommerce
  13. Cara Membuat Pengalihan WooCommerce Setelah Checkout Per Produk
  14. 30 Plugin Keamanan WordPress Terbaik untuk Melindungi Situs Anda
  15. Cara Menambahkan Login Sosial Di Login Sosial WooCommerce
  16. Cara Menambahkan Kolom di Formulir Pendaftaran WooCommerce
  17. Cara Masuk ke Admin WooCommerce
  18. Cara Mengarahkan Pengguna setelah Login Berhasil di WordPress tanpa Menggunakan Plugin
  19. Cara Membuat Halaman Akun Saya Di WooCommerce
  20. Cara Mengakses Dasbor Admin WordPress atau Masuk ke Dasbor WordPress Anda