چگونه به فرم ثبت نام ووکامرس فیلد اضافه کنیم؟

اگر از فروشگاه‌ساز ووکامرس استفاده می‌کنید، حتماً تمایل داشته‌اید که تغییراتی در فرم‌های آن مانند فرم ثبت‌نام دهید. برای آموزش این کار کافی است مقاله چگونه به فرم ثبت نام ووکامرس فیلد اضافه کنیم؟ تا انتها دنبال و مطالعه کنید. با ما همراه باشید

برای شروع، مطمئن شوید که فرم ثبت‌نام ووکامرس در صفحه ورود به حساب کاربری فعال شده است. به منوی ووکامرس -> پیکربندی – پیشرفته بروید و «صفحه «حساب کاربری من» را انتخاب کنید تا مشتری بتواند ثبت‌نام کند. به تصاویر زیر توجه کنید.

اگر صفحات پیش‌فرض ووکامرس را ندارید یا حذف شده‌اند، می‌توانید توسط این آموزش، دوباره آن‌ها را به صورت خودکار بازسازی کنید.

سپس می‌توانید در صفحه مورد نظر، فرم ثبت‌نام را در سایت خودتان مشاهده کنید.

همانطور که واضح است، این فرم بسیار ساده ووکامرس است. اما ما می‌توانیم با استفاده از توابع و کدهای زیر، زمینه‌های بیشتری را اضافه کنیم یا برخی از آن‌ها را حذف کنید. شما می‌توانید زمینه‌هایی (فیلدها) مانند نام و نام خانوادگی و شماره تلفن و غیره را وارد کنید.

کدهای زیر را به انتهای فایل functions.php قالب‌تان اضافه کنید. ابتدا یک کپی از فایل فانکشن تهیه کنید بعنوان بک‌آپ نگهدارید، در صورتی که مشکلی رخ داد، فایل را بازگردانی کنید.

function wooc_extra_register_fields() {?>
       <p class="form-row form-row-wide">
       <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?></label>
       <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />
       </p>
       <p class="form-row form-row-first">
       <label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>
       <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
       </p>
       <p class="form-row form-row-last">
       <label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
       <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
       </p>
       <div class="clear"></div>
       <?php
 }
 add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );

در حال حاضر اگر صفحه را تازه کرده‌اید، زمینه‌های اضافه شده به فرم ثبت‌نام ووکامرس را خواهید دید.

برای مرتبط کردن این فرم‌های ثبت‌نام با آدرس صورت حساب باید پیشوند “billing_” را قبل از نام فیلد وارد کنید. در زیر لیستی از همه زمینه‌های معتبر ووکامرس قرار داده شده است. که می‌توانید به فرم ثبت‌نام اضافه کنید و از آن‌ها استفاده کنید.

• billing_first_name
• billing_last_name
• billing_company
• billing_address_1
• billing_address_2
• billing_city
• billing_postcode
• billing_country
• billing_state
• billing_email
• billing_phone

اکنون نیاز به اعتبار سنجی زمینه‌های جدید اضافه شده است. برای تایید این زمینه‌ها از نظر ساختاری، کدها را در فایل فانکشن قالب قرار دهید.

/**

* register fields Validating.

*/

function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) {

      if ( isset( $_POST['billing_first_name'] ) && empty( $_POST['billing_first_name'] ) ) {

             $validation_errors->add( 'billing_first_name_error', __( '<strong>Error</strong>: First name is required!', 'woocommerce' ) );

      }

      if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {

             $validation_errors->add( 'billing_last_name_error', __( '<strong>Error</strong>: Last name is required!.', 'woocommerce' ) );

      }
         return $validation_errors;
}

add_action( 'woocommerce_register_post', 'wooc_validate_extra_register_fields', 10, 3 );

شما نیاز به یک تابع دارید که به سادگی آرایه $_POST برای مقادیر فرم شامل یک پیام خطا اگر مقدار وجود ندارد و یا داده‌ها نامعتبر است دارید.

در کنار این لاین‌ها، شما همچنین می‌توانید اعتبارسنجی مختلف را وارد کنید و همچنین قوانین اعتبارسنجی را به زمینه‌های مختلف اضافه کنید. شما می‌توانید یکی از قوانین اعتبارسنجی سفارشی ما رو مشاهده کنید:

    /**
    * Below code save extra fields.
    */
    function wooc_save_extra_register_fields( $customer_id ) {
        if ( isset( $_POST['billing_phone'] ) ) {
                     // Phone input filed which is used in WooCommerce
                     update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
              }
          if ( isset( $_POST['billing_first_name'] ) ) {
                 //First name field which is by default
                 update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
                 // First name field which is used in WooCommerce
                 update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
          }
          if ( isset( $_POST['billing_last_name'] ) ) {
                 // Last name field which is by default
                 update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
                 // Last name field which is used in WooCommerce
                 update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
          }
    }
    add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

در اینجا به پایان رسیدیم، تقریباً باید متوجه شده باشید که چه کاری باید انجام دهید. با تغییر همین کدها، می‌توانید به کاری که می‌خواهید برسید و آن را انجام دهید.

استفاده از یک فیلد ثبت نام در صفحه حساب کاربری

اگر می‌خواهید یک فیلد در هنگام ثبت نام به کار می‌رود در صفحه حساب کاربری هم باشد، از توابع زیر می‌توانید استفاده کنید. با استفاده از این کدها یک زمینه (فیلد) که در فرم ثبت‌نام وجود دارد، می‌توانید مقدار ثبت شده آن را در صفحه حساب کاربری هم نمایش دهید.

add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );
function woocommerce_edit_my_account_page() {
    return apply_filters( 'woocommerce_forms_field', array(
        'woocommerce_my_account_page' => array(
            'type'        => 'text',
            'label'       => __( 'کد معرف شما', ' themefour' ),
            'placeholder' => __( 'اینجا بنویسید', 'themefour' ),
            'required'    => false,
        ),
    ) );
}

در قطعه کد بالا، که با woocommerce_edit_my_account_page() آغاز می‌شود که در بخش بعدی قطعه بالا استفاده می‌شود. این تابع یک آرایه چند بعدی که حاوی اطلاعات مربوط به فیدها (برچسب، نگهدارنده، مورد نیاز و غیرالزامی است) باز می‌کند که شما به فرم می‌توانید اضافه کنید.

برای اطمینان از این مقادیر زمینه‌ها می‌توانید در ادامه با به‌روز کردن آرایه، فرآیندهای بیشتری را از طریق تابع woocommerce_form_field() انجام دهید. در نیمه بعدی این قطعه، از تابع edit_my_account_page_woocommerce() استفاده شده است. همانطور که می بینید متغیر $fields شامل آرایه تولید شده توسط تابع woocommerce_edit_my_account_page() می‌باشد. این از طریق حلقه foreach() قابل استفاده است.

افزودن فیلد الزامی شما در فرم ووکامرس

توابع و قطعه‌ کدها بسیار انعطاف پذیر هستند و می‌توانید هر نوع فیلدی را که می‌خواهید با مقدار مناسب ساختار زمینه در آرایه $fields وارد و اضافه کنید.

در اینجا چند نمونه دیگر موجود است:

زمینه ناحیه متنی

'woocommerce_my_account_page' => array(
         'type'        => 'textarea',
         'label'       => __( 'کد معرف', 'themefour' ),
         'placeholder' => __( 'اینجا بنویسید', 'themefour' ),
         'required'    => false,
     ),

زمینه چک باکس

'woocommerce_my_account_page_checkbox'   => array(
           'type'  => 'checkbox',
           'label' => __( 'Checkbox', 'themefour' ),
       ),

زمینه چند انتخابی

function woocommerce_edit_my_account_page() {
    return apply_filters( 'woocommerce_forms_field', array(
'woocommerce_my_account_page_select'     => array(
           'type'    => 'select',
           'label'   => __( 'انتخاب کنید', 'themefour' ),
           'options' => array(
               '' => __( 'انتخاب گزینه', 'themefour' ),
               ۱  => __( 'فرم‌های ووکامرس', 'themefour' ),
               ۲  => __( 'صفحه کاربری ووکامرس', 'themefour' ),
               ۳  => __( 'ویرایش جزئیات حساب', 'themefour' ),
               ۴  => __( 'مارکت تم فور', 'themefour' ),
               ۵  => __( 'خرید محصولات', 'themefour' ),
           ),),
    ) );
}

به همین راحتی توانستید به فرم‌های ثبت‌نام ووکامرس، یک فیلد جدید اضافه کنید. امیدواریم این آموزش مورد توجه شما قرار گرفته باشد. پیروز و شاد باشید.