WooCommerce 등록 양식을 사용자 정의하는 방법

게시 됨: 2021-07-20

등록 양식을 수정하고 더 많은 리드를 얻으시겠습니까? 이 가이드에서는 플러그인이 있거나 없는 WooCommerce 등록 양식을 사용자 정의하는 다양한 방법을 보여줍니다.

온라인 등록은 온라인 상점에서 가장 중요한 부분 중 하나입니다. 고객이 상점에서 구매할 새 계정을 만들 수 있도록 하는 표준 절차입니다. 탈락을 방지하려면 등록 양식이 상점에 맞게 조정되고 필요한 필드만 있는지 확인해야 합니다.

기본 WooCommerce 등록 양식을 사용자 정의하는 이유는 무엇입니까?

고객이 온라인 상점에 새 계정을 등록하면 이메일, 이름, 청구서 수신 주소 등과 같은 일부 정보를 받게 됩니다. 그러나 기본 WooCommerce 등록 양식은 새 계정을 등록하기 위해 이메일 주소만 요구 합니다. 이렇게 하면 고객의 프로세스가 빨라질 수 있지만 쇼핑객을 더 잘 알 수 있는 기회도 낭비됩니다.

고객이 추가 정보를 제공해야 하는 경우 결제 시 또는 "내 계정" 페이지에서 추가해야 합니다. 이것은 쇼핑객에게 매우 반복적이고 긴 절차가 될 수 있으며 온라인 상점에 대한 관심을 잃게 만들 수도 있습니다.

좋은 소식은 원하는 정보가 있는 등록 양식에 필요한 모든 필드를 추가하면 이를 피할 수 있다는 것입니다. 이렇게 하면 정보를 직접 얻을 수 있고 고객이 나중에 세부 정보를 업데이트할 필요가 없으므로 귀하와 귀하의 사용자 모두에게 더 편리합니다.

이제 WooCommerce 등록 양식을 편집하는 다양한 방법을 살펴보겠습니다.

WooCommerce 등록 양식을 사용자 정의하는 방법

WooCommerce 등록 양식을 사용자 정의하는 3가지 주요 방법이 있습니다.

  1. WooCommerce 대시보드에서
  2. 플러그인 사용
  3. 프로그래밍 방식으로

각각의 방법을 살펴보자. 시작하기 전에 스토어에서 WooCommerce를 올바르게 설정했는지 확인하십시오.

1. WooCommerce 대시보드에서 WooCommerce 등록 양식 사용자 지정

기본적으로 WooCommerce 대시보드에서 등록 양식을 편집할 수 있습니다. WooCommerce > 설정 으로 이동하여 계정 및 개인 정보 탭을 엽니다. 여기에서 고객이 상점에서 새 계정을 만들 때 몇 가지 옵션을 변경할 수 있습니다.

예를 들어, 계정 생성 중에 사용자 이름과 암호를 자동으로 생성하는 옵션을 활성화할 수 있습니다. 이러한 옵션은 기본적으로 활성화되어 있지만 비활성화할 수 있습니다.

우커머스 대시보드 우커머스 등록 양식 사용자 정의

또한 고객이 결제 또는 내 계정 페이지에서 계정을 만들 수 있도록 하고 쇼핑객이 계정 없이 주문할 수 있도록 하는 몇 가지 다른 옵션이 있습니다. 활성화하려는 옵션을 선택한 다음 변경 사항을 저장하기만 하면 됩니다 .

보시다시피, 이러한 기본 옵션은 WooCommerce 등록 양식을 편집하는 데 매우 제한적입니다. 더 많은 필드를 추가하거나 더 크게 변경하려면 다른 방법을 사용해야 합니다.

2. 플러그인을 사용하여 WooCommerce 등록 양식 사용자 정의

WooCommerce 등록 양식을 쉽게 사용자 정의하는 가장 좋은 방법 중 하나는 전용 플러그인을 사용하는 것입니다. 몇 가지 도구가 있습니다. 이 자습서에서는 사용자 등록 플러그인을 사용하여 등록 양식을 편집하는 방법을 보여줍니다.

사용자 등록은 사용자 정의 등록 양식을 생성할 수 있는 프리미엄 플러그인이며 100% 반응합니다. 프리미엄 플랜에서 사용할 수 있는 WooCommerce 애드온 을 받아야 합니다.

2.1. 플러그인 및 WooCommerce 애드온 설치 및 활성화

플러그인 사용을 시작하려면 플러그인을 설치하고 활성화해야 하므로 WooCommerce와 통합된 프리미엄 플랜에 가입해야 합니다.

그런 다음 WooCommerce 대시보드에서 플러그인 > 새로 추가 로 이동하고 플러그인 업로드를 클릭합니다.

파일 선택을 누르고 구매 후 다운로드한 플러그인의 zip 파일을 선택한 다음 지금 설치 를 클릭하여 플러그인을 설치합니다.

설치 후 플러그인을 활성화 합니다. 플러그인 > 설치된 플러그인 으로 이동하고 사용자 등록 WooCommerce 확장 옆에 있는 활성화 를 클릭합니다.

이 방법으로 설치하는 과정이 익숙하지 않다면 플러그인을 수동으로 설치하는 방법에 대한 가이드를 확인하세요.

2.2. WooCommerce 등록 양식 만들기

사용자 정의 WooCommerce 등록 양식을 만들기 시작하려면 사용자 등록 > 새로 추가 로 이동하십시오.

양식 만들기 우커머스 등록 양식 사용자 정의

새 등록 양식을 “ WooCommerce Registration ”이라고 부르지만 원하는 이름을 지정할 수 있습니다.

기본적으로 양식은 사용자의 이메일과 비밀번호만 묻지만 청구지 및 배송지 주소, 국가, 우편번호, 전화번호 등과 같은 다른 필드를 추가할 수 있습니다. 양식에 끌어다 놓기만 하면 새 WooCommerce 등록 양식이 마음에 들면 양식 만들기 를 클릭하여 저장합니다.

2.3. 기본 WooCommerce 등록 페이지 교체

등록 양식을 만든 후에는 등록 페이지에서 기본 등록 양식을 바꿔야 합니다. 이렇게 하려면 WooCommerce > 설정 으로 이동하여 계정 및 개인 정보 탭을 엽니다.

고객이 "내 계정" 페이지에서 계정을 생성하도록 허용 하는 옵션을 선택합니다.

내 계정 페이지에서 계정 만들기 우커머스 등록 양식 사용자 지정

그런 다음 사용자 등록 > 설정으로 이동하여 WooCommerce 탭을 열고 등록 양식 선택 옵션에서 방금 생성한 등록 양식 을 선택합니다.

그 후 몇 개의 필드가 나타나고 기본 WooCommerce의 로그인 및 등록 페이지를 대체 하는 옵션을 선택해야 합니다. 프로세스를 완료하려면 변경 사항을 저장하십시오 .

우커머스 등록 양식 교체 우커머스 등록 양식 사용자 정의

이제 프런트 엔드에서 새 등록 양식을 볼 차례입니다. 등록 페이지로 이동하여 새로 사용자 정의된 WooCommerce 등록 양식 을 미리 봅니다.

우커머스 등록 양식 사용자 정의 우커머스 등록 양식

3. 프로그래밍 방식으로 WooCommerce 등록 양식 사용자 지정

프리미엄 플러그인을 사용하고 싶지 않고 프로그래밍 기술이 있는 경우 이 방법이 적합합니다. 코드 조각을 사용하여 거의 모든 방법으로 WooCommerce 등록 양식을 편집할 수 있습니다.

더 이동하기 전에 WordPress 웹 사이트를 백업하고 하위 테마를 만드는 것이 좋습니다. 이 스니펫으로 테마 파일을 변경하고 문제가 발생하면 사이트가 손상될 수 있으므로 항상 준비하는 것이 좋습니다.

사이트를 백업하고 하위 테마를 설치한 후 등록 양식 편집을 시작할 수 있습니다. 이 섹션에서는 수행할 수 있는 작업의 다양한 예를 보여줍니다. 하위 테마의 functions.php 파일에 스니펫을 배치해야 합니다. 그렇게 하려면 WordPress 대시보드에서 모양 > 테마 편집기 로 이동하고 functions.php 파일을 엽니다.

시작하기 전에 "내 계정" 페이지에서 고객이 계정을 만들 수 있도록 허용하는 옵션을 선택 했는지 확인하십시오. 이렇게 하려면 아직 해당 옵션을 선택하지 않은 경우 2.3단계 에 설명된 지침을 따르십시오.

이제 프로그래밍 방식으로 WooCommerce 등록 양식을 사용자 정의하는 몇 가지 예를 살펴보겠습니다.

등록 양식에 청구 계정 번호 표시

WooCommerce 등록 양식에 청구 계정 번호를 필수 필드로 추가하려면 다음 코드 스니펫을 사용할 수 있습니다.

 // 등록에 필드 표시 / 계정 편집 
add_action( 'woocommerce_register_form_start', 'ql_display_account_registration_field' ); 
add_action( 'woocommerce_edit_account_form_start', 'ql_display_account_registration_field' ); 
기능 ql_display_account_registration_field() { 
$user = wp_get_current_user(); 
$value = isset($_POST['billing_account_number']) ? esc_attr($_POST['billing_account_number']) : $user->billing_account_number; 
?> 
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_billing_account_number"><?php _e( '배송/계좌번호', '우커머스' ); ?> <span class="required">*</span></label>
 <input type="text" maxlength="6" class="input-text" name="billing_account_number" value="<?php echo $value ?>" />
 </p> 
<div class="clear"></div> 
<?php 
}

// 등록 필드 유효성 검사 
add_filter( 'woocommerce_registration_errors', 'ql_account_registration_field_validation', 10, 3 ); 
기능 ql_account_registration_field_validation( $errors, $username, $email ) { 
if ( isset( $_POST['billing_account_number'] ) && 비어 있음( $_POST['billing_account_number'] ) ) { 
$errors->add( 'billing_account_number_error', __( '<strong>오류</strong>: 계좌 번호가 필요합니다!', 'woocommerce' ) ); } 
$ 오류를 반환합니다. 
}

// 등록 필드 값 저장 
add_action( 'woocommerce_created_customer', 'ql_save_account_registration_field' ); 
기능 ql_save_account_registration_field( $customer_id ) { 
if ( isset( $_POST['billing_account_number'] ) ) { 
update_user_meta( $customer_id, 'billing_account_number', Sanitize_text_field( $_POST['billing_account_number'] ) ); 
}
}

// 계정 편집에 필드 값 저장 
add_action( 'woocommerce_save_account_details', 'ql_save_my_account_billing_account_number', 10, 1 );
기능 ql_save_my_account_billing_account_number( $user_id ) { 
if( isset( $_POST['billing_account_number'] ) ){ 
update_user_meta( $user_id, 'billing_account_number', Sanitize_text_field( $_POST['billing_account_number'] ) ); 
}
}

// 관리자 결제 필드 섹션의 필드 표시 
add_filter( 'woocommerce_customer_meta_fields', 'ql_admin_user_custom_billing_field', 10, 1 ); 
기능 ql_admin_user_custom_billing_field( 
$args ) { $args['billing']['fields']['billing_account_number'] = 배열( 
'label' => __( '배송/계좌번호', '우커머스' ), 
'설명' => '', 
'custom_attributes' => 배열('최대 길이' => 6), 
); 
$args 반환;
}

그러면 내 계정 페이지의 계정 편집 섹션에 청구 계정 번호가 표시되고 청구 필드 섹션의 관리자 사용자 편집 페이지 에 청구 계정 번호가 표시됩니다.

이 스니펫을 기본으로 사용하여 상점에 맞게 조정할 수 있습니다. 다음과 같은 다른 WooCommerce 등록 양식 필드를 청구 섹션에 추가할 수도 있습니다.

  • 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

결제하는 동안 사용자 정의 WooCommerce 등록 양식 표시

WooCommerce 등록 양식을 체크아웃 페이지에 추가할 수도 있습니다. 이것은 손님으로 쉽게 상점을 탐색하고 무언가를 구매하려는 경우에만 계정을 만들 수 있으므로 고객에게 매우 편리할 수 있습니다.

사용자 등록 플러그인을 사용하면 쉽게 할 수 있습니다. 프리미엄 플랜 중 하나가 필요하므로 아직 하지 않았다면 2.1단계를 살펴보십시오. 또한 WooCommerce 등록 양식을 만들고 기본 양식으로 바꿔야 합니다 .

그런 다음 WooCommerce > 설정 으로 이동하여 계정 및 개인 정보 탭을 엽니다. 그런 다음 고객이 결제 중에 계정을 만들고 변경 사항을 저장할 수 있도록 옵션을 선택합니다.

그런 다음 사용자 등록 > 설정 으로 이동하여 WooCommerce 탭을 엽니다. 체크아웃 등록을 동기화 하고 변경 사항을 저장하는 옵션을 선택합니다.

이렇게 하면 고객이 사용자 등록을 WooCommerce 체크아웃 등록과 동기화 할 수 있습니다. 그런 다음 테이블의 모든 필드 레이블을 확인 하고 변경 사항을 저장합니다 .

체크아웃의 등록 양식 우커머스 사용자 정의 등록 양식

그게 다야! 이제 고객은 웹사이트에서 결제하는 동안 새 계정을 등록할 수 있습니다.

보너스: WooCommerce 등록 이메일 주소 수정

이메일 주소는 등록을 위한 기본입니다. 전자 상거래 상점은 고객의 이메일 주소를 통해 주문에 대한 정보를 제공하고, 제안, 독점 거래 등을 보낼 수 있기를 원합니다.

그렇기 때문에 WooCommerce 등록 이메일을 편집하는 방법을 배우는 것은 매우 유용합니다. 이를 수행하는 가장 좋은 방법은 이메일 템플릿을 사용자 지정하는 것입니다. 그리고 가장 좋은 점은 WooCommerce 대시보드에서 이 작업을 수행할 수 있다는 것입니다.

WooCommerce > 설정 으로 이동하여 이메일 탭을 열기만 하면 됩니다. 여기에서 이메일 발신자 및 이메일 템플릿 옵션을 사용하여 이메일 템플릿을 변경할 수 있습니다.

이메일 템플릿 편집 우커머스 등록 양식 사용자 정의

이메일 발신자 옵션을 사용하면 "보낸사람" 이름과 주소를 편집할 수 있습니다. 즉, 보낸 사람 이름과 이메일 주소가 WooCommerce 이메일에 표시되는 방식을 사용자 지정할 수 있습니다.

마찬가지로 이메일 템플릿의 머리글 이미지, 바닥글 텍스트, 기본 색상, 배경 색상, 본문 배경 및 텍스트 색상을 편집할 수 있습니다.

WooCommerce 이메일에 대해 원하는 모든 변경 사항을 적용하고 " 이메일 템플릿을 미리 보려면 여기를 클릭하십시오 " 링크를 클릭하여 실시간으로 변경 사항을 확인하십시오.

새 템플릿이 마음에 들면 변경 사항을 저장해야 합니다 .

이메일 템플릿을 편집하는 다른 방법이 있어 다른 많은 항목을 사용자 지정할 수 있습니다. 자세한 내용은 WooCommerce 이메일 템플릿을 편집하는 방법에 대한 가이드를 확인하세요.

결론

대체로 등록 양식은 고객에 대한 관련 정보를 수집할 수 있도록 하므로 매우 중요합니다. 기본 등록 양식이 항상 원하는 모든 정보를 제공하는 것은 아니므로 사용자 정의하는 것이 필요한 모든 세부 정보를 수집하는 매우 효과적인 방법이 될 수 있습니다.

이 가이드에서는 WooCommerce 등록 양식을 사용자 지정하는 3가지 방법을 살펴보았습니다.

  • 화장실 대시보드에서
  • 전용 플러그인 사용
  • 프로그래밍 방식으로

여기저기서 몇 가지를 변경하려는 경우 WooCommerce 대시보드의 기본 옵션이 유용할 수 있습니다. 그러나 제공하는 옵션이 상당히 제한되어 있으므로 더 많은 것을 사용자 정의하려면 플러그인을 사용하는 것이 좋습니다. 반면에 타사 도구를 설치하고 싶지 않고 코딩 기술이 있는 경우 코드 조각을 사용하여 프로그래밍 방식으로 등록 양식을 편집할 수 있습니다.

상점을 사용자 정의하는 방법에 대한 자세한 내용은 다음 가이드를 참조하십시오.

  • WooCommerce 내 계정 페이지를 사용자 정의하는 방법
  • WooCommerce 제품 페이지 편집
  • WooCommerce에서 카테고리 페이지를 사용자 정의하는 방법
  • WooCommerce Shop 페이지를 편집하는 방법