Úprava registračního formuláře WooCommerce

Standardně obsahuje registrační formulář do WooCommerce pouze uživatelské jméno, email a heslo. Protože však jde o registraci do internetového obchodu, bylo by ideální, aby formulář obsahoval všechna potřebná pole k uskutečnění objednávky, jako je například adresa a telefon. Výhody při získání těchto informací při registraci je například to, že již po zaregistrování můžete cíli propagaci výrobků, nakupující již v košíku může vidět správnou cenu dopravy, kterou by se jinak dozvěděl až při vyplnění v pokladně.

Pojďme si tedy registrační formulář upravit. Vše se bude dít pomocí snipetu umístěného do souboru functions.php Vašeho designu.

Pole, která můžeme přidat a jsou navázána na účet WooCommerce, jsou tato:

  • 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

Přidáme si tedy upravený registrační formulář, ve kterém přibude Jméno, Příjmení, Adresa, Město a PSČ, pomocí snippetu:


// úprava registračního formuláře
function wooc_extra_register_fields() {
?>
       
       

       <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'] ); ?>" />
       

       

       <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'] ); ?>" />
       

       
<div class="clear"></div>

       

       <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?><span class="required">*</span></label>
       <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php if ( ! empty( $_POST['billing_phone'] ) ) esc_attr_e( $_POST['billing_phone'] ); ?>" />
       

       

       <label for="reg_billing_address_1"><?php _e( 'Address', 'woocommerce' ); ?><span class="required">*</span></label>
       <input type="text" class="input-text" name="billing_address_1" id="reg_billing_address_1" value="<?php if ( ! empty( $_POST['billing_address_1'] ) ) esc_attr_e( $_POST['billing_address_1'] ); ?>" />
       

  
       

       <label for="reg_billing_city"><?php _e( 'City', 'woocommerce' ); ?><span class="required">*</span></label>
       <input type="text" class="input-text" name="billing_city" id="reg_billing_city" value="<?php if ( ! empty( $_POST['billing_city'] ) ) esc_attr_e( $_POST['billing_city'] ); ?>" />
       

       

       <label for="reg_billing_postcode"><?php _e( 'ZIP', 'woocommerce' ); ?><span class="required">*</span></label>
       <input type="text" class="input-text" name="billing_postcode" id="reg_billing_postcode" value="<?php if ( ! empty( $_POST['billing_postcode'] ) ) esc_attr_e( $_POST['billing_postcode'] ); ?>" />
       

       
<div class="clear"></div>

            
       <?php
}
add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );

Když už máme upravený formulář, nastavíme si ověření vyplněných polí:

// kontrola údajů
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', __( 'Jméno je povinná položka!', 'woocommerce' ) );
       }
       if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {
              $validation_errors->add( 'billing_last_name_error', __( 'Příjmení je povinná položka!.', 'woocommerce' ) );
       }
       if ( isset( $_POST['billing_phone'] ) && empty( $_POST['billing_phone'] ) ) {
              $validation_errors->add( 'billing_phone_error', __( 'Telefon je povinná položka!.', 'woocommerce' ) );
       }
       if ( isset( $_POST['billing_address_1'] ) && empty( $_POST['billing_address_1'] ) ) {
              $validation_errors->add( 'billing_address_1_error', __( 'Adresa je povinná položka!.', 'woocommerce' ) );
       }
       if ( isset( $_POST['billing_city'] ) && empty( $_POST['billing_city'] ) ) {
              $validation_errors->add( 'billing_city_error', __( 'Město je povinná položka!.', 'woocommerce' ) );
       }
       if ( isset( $_POST['billing_postcode'] ) && empty( $_POST['billing_postcode'] ) ) {
              $validation_errors->add( 'billing_postcode_error', __( 'PSČ je povinná položka!.', 'woocommerce' ) );
       }                     
}
add_action( 'woocommerce_register_post', 'wooc_validate_extra_register_fields', 10, 3 );

Pokud uživatel vyplnil všechny potřebné údaje, uložíme si je do databáze:

// uložení údajů zákazníka do databáze
function wooc_save_extra_register_fields( $customer_id ) {
       if ( isset( $_POST['billing_first_name'] ) ) {
              // WordPress default first name field.
              update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
              // WooCommerce billing first name.
              update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
       }
       if ( isset( $_POST['billing_last_name'] ) ) {
              // aktualizujeme Jméno
              update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
              // aktualizujeme Příjmení
              update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
       }
       if ( isset( $_POST['billing_phone'] ) ) {
              // aktualizujeme Telefon
              update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
       }
       if ( isset( $_POST['billing_address_1'] ) ) {
              // aktualizujeme Adresu/ulici
              update_user_meta( $customer_id, 'billing_address_1', sanitize_text_field( $_POST['billing_address_1'] ) );
       }
       if ( isset( $_POST['billing_city'] ) ) {
              // aktualizujeme Město
              update_user_meta( $customer_id, 'billing_city', sanitize_text_field( $_POST['billing_city'] ) );
       }
       if ( isset( $_POST['billing_postcode'] ) ) {
              // aktualizujeme PSČ
              update_user_meta( $customer_id, 'billing_postcode', sanitize_text_field( $_POST['billing_postcode'] ) );
       }                     
}
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

Výsledný registrační formulář bude vypadat takto:

Úprava registračního formuláře WooCommerce 1

Hodnocení: 10.0/10. hodnotil 1 člověk
Please wait...

Napsat komentář