WooCommerce 로그인 및 등록 양식을 사용자 정의하는 방법

기본적으로 WooCommerce는 로그인 및 등록 양식에 대해 제한된 사용자 정의 옵션을 제공합니다. 이것은 상점 소유자가 고객에게 좋은 사용자 경험을 제공하기 어렵게 만듭니다.

이 외에도 기본 체크아웃 필드로 제한되므로 체크아웃하는 동안 고객으로부터 추가 정보를 수집할 수 없습니다. 이는 고객에게 예약 날짜를 선택하거나, 여러 이메일 주소를 입력하거나, 선물 포장 옵션을 제공할 수 있는 옵션을 제공하려는 매장에는 적합하지 않습니다.

이를 극복하는 한 가지 방법은 한 곳에서 모든 것을 관리할 수 있는 ProfilePress와 같은 강력한 플러그인을 사용하는 것입니다. 이 기사에서는 ProfilePress를 사용하여 WooCommerce 로그인 및 등록 양식을 사용자 정의하는 방법에 대해 설명합니다.

WooCommerce 로그인 및 등록 양식을 사용자 정의하는 이유는 무엇입니까?

WooCommerce 로그인 및 등록 양식을 사용자 정의하면 웹사이트를 보다 사용자 친화적으로 만들고 전환율을 높일 수 있습니다.

상점 소유자는 고객에게 개인화된 경험을 제공하기 위해 기본 WooCommerce 로그인 및 등록 양식을 사용자 정의해야 할 수 있습니다. 전용 로그인 및 등록 양식을 만들어 사이트에서 고객 경험을 향상하고 등록을 최대화할 수 있습니다.

고객이 체크아웃하기 전에 추가 정보를 수집하는 방법으로 WooCommerce 사이트의 체크아웃 페이지에 사용자 정의 필드를 추가할 수도 있습니다. 예를 들어 고객이 소셜 미디어 계정, 사용자 이름을 추가하거나 장바구니에 제품에 대한 추가 정보를 표시하도록 할 수 있습니다. 이를 통해 고객에게 보다 개인화된 쇼핑 경험을 제공할 수 있습니다.

WooCommerce의 기본 "내 계정" 페이지를 사용자 정의 페이지로 교체하는 것은 상점을 눈에 띄게 만드는 좋은 방법입니다. 고객이 계정에 쉽게 로그인하고 중앙 집중식으로 세부 정보를 관리하도록 할 수 있습니다. 예를 들어, 프로필 사진 업로드, 닉네임 수정 또는 약력 추가를 통해 로그인, 가입 및 사용자 계정을 개인화할 수 있습니다.

WooCommerce 로그인 및 등록 양식을 사용자 정의하면 온라인 상점에서 향상된 사용자 경험을 제공하는 데 도움이 될 수 있습니다.

WooCommerce 로그인 및 등록 양식 사용자 정의

ProfilePress를 사용하면 WooCommerce 로그인 및 등록 양식을 쉽게 사용자 정의하고 원하는 대로 정확하게 만들 수 있습니다.

ProfilePress는 매력적인 WordPress 사이트를 만들기 위한 올인원 솔루션을 제공하고 콘텐츠에 액세스할 수 있는 사람을 제어하는 ​​데 도움이 되는 광범위한 도구를 제공합니다. 끌어서 놓기 빌더를 사용하여 매력적인 등록 및 로그인 양식과 함께 직관적인 사용자 프로필을 만들 수 있습니다.

이를 위해서는 WooCommerce 플러그인이 설치된 작동하는 WordPress 사이트가 필요합니다. 사용자 정의 로그인 및 등록 양식을 생성하려면 ProfilePress 플러그인도 필요합니다.

1단계: ProfilePress 설치 및 활성화

ProfilePress 플러그인을 가져와 WordPress 사이트에 설치하여 시작하십시오. WordPress 관리자 패널을 사용하여 플러그인 → 새로 추가 로 이동하고 새로 추가 버튼을 클릭합니다. zip 파일을 업로드하고 WordPress 사이트에 플러그인을 설치합니다.

2단계: 로그인 및 등록 양식 사용자 지정

가장 먼저 해야 할 일은 ProfilePress를 사용하여 사용자 정의 로그인 양식을 만드는 것입니다. 이렇게 하려면 ProfilePress → Forms & Profiles 로 이동하고 로그인 섹션 아래에서 새로 추가 버튼을 클릭합니다. Drag & Drop Builder 를 클릭하고 템플릿을 선택합니다. 이 데모를 위해 Bash 템플릿을 선택했습니다.

템플릿을 선택하면 자동으로 양식 편집 페이지로 리디렉션됩니다. 원하는 순서대로 필드 를 추가 및 삭제하고 필드 레이블 을 편집할 수도 있습니다.

양식 설정 을 편집하고 로그인 양식에 있는 버튼의 모양과 레이블을 사용자 정의할 수도 있습니다. 완료되면 변경 사항 저장 버튼을 클릭하여 계속하십시오. 이제 새 WordPress 페이지를 만들고 사용자 정의 단축 코드를 사용하여 해당 페이지에 사용자 정의 로그인 양식을 추가해야 합니다.

페이지 → 새로 추가 로 이동하여 새 페이지를 만들고 페이지에 로그인 양식 단축 코드를 추가합니다. 계속하려면 게시 버튼을 클릭하세요.

이제 등록 양식을 만들어 새 WordPress 페이지에 추가하겠습니다. 이렇게 하려면 ProfilePress → Forms & Profiles 로 이동하고 등록 섹션 아래에서 새로 추가 버튼을 클릭합니다.

등록 양식에 제목을 지정하고 템플릿을 선택하여 사용자 정의를 시작하십시오. 튤립 템플릿을 선택했습니다. 자동으로 양식 편집 페이지로 리디렉션됩니다.

여기에서 등록 양식에서 필드를 추가하거나 제거하고 프런트 엔드에서 표시되는 방식을 변경할 수 있습니다. 등록 양식 사용자 정의를 완료했으면 변경 사항 저장 버튼을 클릭하여 계속하십시오.

새 WordPress 등록 페이지를 만들려면 페이지 → 새로 추가 로 이동하여 등록 양식 단축 코드를 붙여넣습니다. 계속하려면 게시 버튼을 클릭하세요.

3단계: 프런트 엔드에 로그인 및 등록 양식 표시

ProfilePress → 설정 으로 이동하여 일반 탭을 클릭합니다. 드롭다운 메뉴를 사용하여 새로 생성된 사용자 정의 로그인 및 등록 페이지를 스토어에 추가하고 변경 사항 저장 버튼을 클릭하여 계속하십시오.

이것은 기본 WordPress 로그인 페이지와 WooCommerce의 모든 로그인 및 등록 링크를 ProfilePress로 대체합니다 . 다음은 사이트의 프런트 엔드에 표시되는 방식입니다.

3.5단계: WooCommerce 로그인 및 등록 양식 교체

WooCommerce 내 계정 페이지에 표시된 등록 및 로그인 양식을 교체하려면 설정 >> WooCommerce 로 이동하여 교체할 ProfilePress 로그인 및 등록 양식을 선택하십시오.

사용자는 매력적인 사용자 지정 등록 양식을 사용하여 WooCommerce 사이트에서 계정을 등록할 수 있습니다. 이미 등록된 사용자는 이전에 만든 사용자 정의 로그인 양식을 사용하여 계정에 로그인할 수 있습니다.

4단계: 결제 페이지에 사용자 정의 필드 추가

WooCommerce 스토어의 결제 페이지에 사용자 정의 필드를 추가할 수도 있습니다. 이렇게 하려면 ProfilePress → 설정 으로 이동하여 사용자 정의 필드 탭을 클릭하기만 하면 됩니다.

새로 추가 버튼을 클릭하고 사용자 정의 필드에 대한 필드 레이블 을 설정하십시오. 필드 키 및 필드 설명을 설정한 후 필요에 따라 필드 유형 을 설정할 수 있습니다.

텍스트, 비밀번호, 이메일, 전화, 숨겨진 필드, 번호, 날짜, 국가, 파일 업로드, 라디오 버튼, 체크박스, 텍스트 영역 필드를 만들고 WooCommerce 스토어의 체크아웃 페이지에 표시할 수 있습니다.

준비가 되면 변경 사항 저장 버튼을 클릭하여 계속하십시오.

그런 다음 ProfilePress → 설정 으로 이동하여 WooCommerce 탭을 클릭합니다. 필수 등록 필드 메타 상자에 사용자 정의 필드를 추가하고 변경 사항 저장 버튼을 클릭하여 계속하십시오.

사용자는 온라인 스토어에서 체크아웃할 때 체크아웃 등록 페이지에서 사용자 정의 필드를 볼 수 있습니다.

.

또한 체크아웃 페이지에 사용자 정의 로그인 양식을 표시하고 기본 양식을 교체하려고 합니다. 이렇게 하려면 ProfilePress → 설정 으로 이동하여 WooCommerce 탭을 클릭하기만 하면 됩니다.

로그인 양식 체크아웃 옆에 있는 드롭다운 메뉴를 사용하여 사용자 정의 로그인 양식을 선택하고 변경 사항 저장 버튼을 클릭하여 계속하십시오. 이것은 WooCommerce 사이트의 체크아웃 페이지에 있는 기본 로그인 양식을 대체합니다.

보너스: 맞춤형 WooCommerce "내 계정" 페이지 생성

WooCommerce의 "내 계정" 페이지를 통해 사이트 방문자는 프런트 엔드에서 직접 사용자 계정에 액세스할 수 있습니다.

ProfilePress를 사용하면 사용자가 단일 페이지에서 사용자 계정을 쉽게 보고 편집할 수 있는 완전히 사용자 정의된 WooCommerce "내 계정" 페이지를 만들 수 있습니다. 이렇게 하려면 Profile Press → Forms & Profiles 로 이동하여 새로 추가 버튼을 클릭합니다.

프로필 편집 양식에 새 이름을 지정하고 템플릿을 선택하여 사용자 지정을 시작하십시오. Pinnacle 템플릿을 선택했습니다. 템플릿 선택 버튼을 클릭하면 자동으로 양식 편집 페이지로 리디렉션됩니다.

필드를 추가하고 WooCommerce 사이트의 프런트엔드에서 양식이 표시되는 방식을 사용자 지정할 수 있습니다. "내 계정" 양식 사용자 정의가 끝나면 변경 사항 저장 버튼을 클릭하여 계속하십시오.

이제 "내 계정" 양식을 만들었으므로 웹사이트에 표시할 수 있도록 WordPress 페이지를 만들어야 합니다. 페이지 → 새로 추가 로 이동하여 프로필 편집 단축 코드를 붙여넣습니다. 완료되면 게시 버튼을 클릭합니다.

아래는 사용자 정의 프로필 편집 양식의 미리보기입니다.

또는 전체 프로세스를 건너뛰고 대신 위에서 만든 페이지에서 ProfilePress 내 계정 단축 코드를 사용할 수 있습니다.

사용자는 자신의 계정 정보를 편집하고 프로필 업데이트 버튼을 클릭하여 프런트 엔드에서 직접 사용자 계정을 변경할 수 있습니다. 이 페이지는 새 내 계정 페이지로 사용됩니다.

ProfilePress → 설정으로 이동하여 사용자가 주문, 다운로드, 구독 및 멤버십을 보도록 할 수도 있습니다. WooCommerce 탭을 클릭하고 내 계정 탭 설정에 표시할 탭을 선택합니다.

결론

웹사이트에서 WooCommerce 로그인 및 등록 양식을 사용자 정의하는 것은 고객 경험을 향상하고 더 많은 사용자가 귀하에게 등록하도록 유도하는 좋은 방법입니다.

기본적으로 WordPress는 로그인 및 등록 페이지에 대한 제한된 사용자 정의 기능을 제공하지만 ProfilePress와 같은 강력한 플러그인을 사용하여 사용자 정의 페이지를 만들고 온라인 상점에서 제공하는 사용자 경험을 향상시킬 수 있습니다.

웹사이트에서 WooCommerce 로그인 및 등록 양식을 사용자 정의할 준비가 되셨습니까? 오늘 ProfilePress를 받으십시오!