วิธีสร้างหน้าเข้าสู่ระบบและลงทะเบียนแยกต่างหากใน WooCommerce

เผยแพร่แล้ว: 2021-05-18

แยกหน้าเข้าสู่ระบบและลงทะเบียนใน WooCommerce คุณกำลังมองหาวิธีแยกหน้าเข้าสู่ระบบและการลงทะเบียนโดยทางโปรแกรมหรือไม่? บทแนะนำสั้น ๆ นี้จะให้วิธีแก้ปัญหาที่ง่ายสำหรับคุณ

คุณอาจต้องการส่งลูกค้าที่ออกจากระบบไปยังหน้าเข้าสู่ระบบ และลูกค้าที่ไม่ได้ลงทะเบียนไปยังหน้าอื่น ตามค่าเริ่มต้น WooCommerce จะแสดงแบบฟอร์มการเข้าสู่ระบบและแบบฟอร์มการลงทะเบียนในหน้าเดียวกัน

เป็นมูลค่าการกล่าวขวัญว่าหน้าบัญชีของฉันของ WooCommerce นั้นแสดงโดยรหัสย่อ [woocommerce_my_account]

การมีทั้งแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียนในหน้าเดียวกันอาจไม่ใช่ความคิดที่ดี หากคุณต้องการใช้หน้า Landing Page หรือหน้าการขายโดยมีเป้าหมายเฉพาะ เช่น การลงทะเบียนผู้ใช้ ซึ่งหมายความว่าไม่จำเป็นต้องใช้แบบฟอร์มการเข้าสู่ระบบในหน้านี้

วิธีสร้างหน้าเข้าสู่ระบบและลงทะเบียนแยกต่างหากใน 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
วิธีซ่อนแดชบอร์ดในหน้าบัญชีของฉัน WooCommerce
วิธีซ่อนแท็บใด ๆ หน้าบัญชีของฉัน WooCommerce
วิธีลบเมนูดาวน์โหลด หน้าบัญชีของฉัน WooCommerce
วิธีรับวิธีการชำระเงินใน WooCommerce » ตัวอย่างโค้ด
วิธีแนบใบแจ้งหนี้ PDF กับอีเมล WooCommerce
วิธีเข้าถึงฐานข้อมูล WooCommerce
วิธีการเปลี่ยนผู้ส่งอีเมลใน WooCommerce
วิธีการส่งออกสินค้าใน WooCommerce
วิธีสร้างรหัสย่อการเข้าสู่ระบบ WooCommerce ออกจากระบบ
วิธีสร้าง WooCommerce Redirect หลังจากชำระเงินต่อผลิตภัณฑ์
30 สุดยอดปลั๊กอินความปลอดภัย WordPress เพื่อปกป้องเว็บไซต์ของคุณ
วิธีเพิ่มการเข้าสู่ระบบโซเชียลใน WooCommerce Social Login
วิธีเพิ่มฟิลด์ในแบบฟอร์มการลงทะเบียน WooCommerce
วิธีการเข้าสู่ระบบผู้ดูแลระบบ WooCommerce
วิธีเปลี่ยนเส้นทางผู้ใช้หลังจากเข้าสู่ระบบสำเร็จใน WordPress โดยไม่ต้องใช้ปลั๊กอิน
วิธีสร้างหน้าบัญชีของฉันใน WooCommerce
วิธีเข้าถึงแดชบอร์ดผู้ดูแลระบบ WordPress หรือเข้าสู่ระบบแดชบอร์ด WordPress ของคุณ