WooCommerce 로그인 페이지를 사용자 정의하는 방법(3가지 방법)

게시 됨: 2022-08-17

WooCommerce 고객 로그인 페이지를 사용자 정의하시겠습니까?

기본 WordPress 로그인 페이지는 단순하며 스토어 브랜딩과 일치하지 않습니다. WooCommerce 고객 로그인 페이지를 사용자 정의하면 더 나은 사용자 경험을 제공하는 데 도움이 됩니다.

이 기사에서는 완전히 사용자 정의된 WooCommerce 로그인 페이지를 만드는 방법과 체크아웃 로그인 페이지를 사용자 정의하는 방법에 대한 팁도 공유합니다.

How to create a custom WooCommerce customer login page

맞춤형 WooCommerce 고객 로그인 페이지를 만드는 이유는 무엇입니까?

고객이 WooCommerce 스토어에 로그인하면 WordPress 로고와 브랜드만 있는 기본 WordPress 로그인 페이지가 표시됩니다.

Standard WordPress login screen example

이 페이지는 사이트의 대시보드에 액세스하려는 경우에 적합합니다. 그러나 고객들은 평범한 디자인에 실망할 수 있으며 로그인 페이지가 웹사이트의 모양과 일치하지 않는다고 의심할 수 있습니다.

WooCommerce 로그인 페이지를 사용자 정의하면 로고를 추가하고 웹사이트와 일치하도록 디자인을 변경할 수 있습니다. 이렇게 하면 사이트가 더 전문적으로 보이고 더 나은 사용자 경험을 제공할 수 있습니다.

또한 양식 필드를 더 추가할 수 있으며 특정 제품을 홍보하거나 고객에게 특별 제안을 표시할 수도 있습니다.

즉, WooCommerce에서 사용자 지정 고객 로그인 페이지를 만드는 방법을 살펴보겠습니다.

  • SeedProd로 완벽한 맞춤형 WooCommerce 로그인 페이지 만들기
  • WPForms로 WooCommerce 로그인 페이지 사용자 정의
  • 보너스: WooCommerce Checkout 로그인 사용자 정의

SeedProd를 사용하여 완전히 맞춤형 WooCommerce 로그인 페이지 만들기

맞춤형 WooCommerce 고객 로그인 페이지를 만드는 가장 좋은 방법은 SeedProd를 사용하는 것입니다. WordPress를 위한 최고의 WordPress 랜딩 페이지이자 테마 빌더이며 사용하기 매우 쉽습니다.

SeedProd의 드래그 앤 드롭 빌더를 사용하여 한 줄의 코드를 건드리지 않고도 페이지 또는 WordPress 테마의 디자인과 레이아웃을 사용자 정의할 수 있습니다.

이 자습서에서는 로그인 페이지 템플릿 및 기타 고급 사용자 지정 옵션이 포함되어 있으므로 SeedProd Pro 라이선스를 사용합니다. 무료로 사용할 수 있는 SeedProd Lite 버전도 있습니다.

먼저 SeedProd 플러그인을 설치하고 활성화해야 합니다. 도움이 필요하면 WordPress 플러그인 설치 방법에 대한 가이드를 참조하세요.

활성화되면 SeedProd 시작 화면이 표시됩니다. 라이센스 키를 입력하고 '키 확인' 버튼을 클릭합니다. SeedProd 계정 영역에서 라이선스 키를 찾을 수 있습니다.

SeedProd license key

다음으로 WooCommerce 스토어에 대한 사용자 정의 로그인 페이지를 만들 수 있습니다.

WordPress 대시보드에서 SeedProd » 랜딩 페이지 로 이동하여 '로그인 페이지 설정' 버튼을 클릭하기만 하면 됩니다.

Select Login Page

그 후 SeedProd는 여러 템플릿을 표시합니다. 신속하게 하나를 선택하고 필요에 따라 사용자 정의할 수 있습니다. 이것은 시간을 절약하는 데 도움이 되며 기존 디자인을 사용하여 자신만의 WooCommerce 로그인 페이지를 만들 수 있습니다.

플러그인을 사용하면 빈 템플릿을 사용하여 처음부터 로그인 페이지를 만들 수도 있습니다.

Choose a Template for Your SeedProd Login Page

템플릿을 선택하면 팝업 창이 열립니다.

계속해서 페이지 이름을 입력하고 '저장 및 페이지 편집 시작' 버튼을 클릭하십시오.

Enter a Page Name and Page URL

다음으로 드래그 앤 드롭 페이지 빌더가 표시됩니다.

이제 왼쪽 메뉴에서 템플릿에 새 블록을 추가하여 로그인 페이지를 사용자 정의할 수 있습니다.

SeedProd는 헤드라인, 텍스트, 이미지, 버튼 등과 같은 표준 블록을 제공합니다.

Customize your WooCommerce login page

그 외에도 경품, 연락처 양식, 소셜 공유 버튼, 양식 선택 등과 같은 고급 블록을 추가할 수 있습니다. 로그인 페이지 템플릿에 추가할 수 있는 최근 제품, 추천 제품 및 베스트셀러 제품과 같은 WooCommerce 블록도 있습니다.

WooCommerce 블록을 사용하면 상위 제품을 쉽게 추천하고 할인 제안을 홍보하여 ​​더 많은 전환을 얻을 수 있습니다.

그 외에도 SeedProd를 사용하면 로그인 페이지의 모든 섹션을 추가로 사용자 지정할 수 있습니다. 섹션을 클릭하기만 하면 레이블, 색상, 글꼴 및 간격 편집과 같은 더 많은 옵션이 표시됩니다.

More customization options

WooCommerce 로그인 페이지 사용자 정의가 완료되면 상단의 '저장' 버튼을 클릭하는 것을 잊지 마십시오.

그런 다음 '페이지 설정' 탭으로 이동하여 '페이지 상태' 토글을 클릭하여 초안에서 게시로 변경할 수 있습니다. 그런 다음 '저장' 버튼을 클릭하고 페이지 빌더를 닫을 수 있습니다.

SeedProd Page Settings

여기에서 남은 것은 새로운 사용자 정의 WooCommerce 로그인 페이지를 사용자에게 표시하는 것입니다. 이렇게 하려면 WordPress 대시보드에서 SeedProd » 랜딩 페이지 로 이동합니다.

'로그인 페이지' 아래에 있는 스위치를 클릭하면 녹색이 되고 '활성'이 됩니다.

Make Your SeedProd Login Page Active

활성화되면 사이트에 새 로그인 페이지가 나타납니다!

전자 상거래 상점을 방문하여 작동하는 것을 볼 수 있습니다.

WooCommerce login page preview

WPForms를 사용하여 WooCommerce 고객 로그인 양식 사용자 정의

웹사이트 테마와 일치하고 더 많은 양식 필드를 제공하는 로그인 양식을 만들고 싶습니까?

기본 WordPress 로그인 양식에서는 사용자가 비밀번호와 함께 이메일 주소 또는 사용자 이름만 입력할 수 있습니다. 사용자 정의 로그인 양식을 사용하여 더 많은 필드를 추가하고 고객이 이름이나 전화번호로 로그인하도록 할 수 있습니다.

가장 좋은 방법은 WPForms를 사용하는 것입니다. 초보자에게 친숙한 최고의 WordPress 양식 빌더입니다. 5백만 개 이상의 웹 사이트에서 WPForms를 사용하여 더 스마트한 양식을 구축합니다.

사용자 정의 WooCommerce 로그인 양식을 쉽게 만들고 사이드바 또는 제품 페이지와 같은 온라인 상점의 어느 곳에나 표시할 수 있습니다.

이 자습서에서는 사용자 등록 애드온이 포함되어 있기 때문에 WPForms Pro 계획을 사용합니다. 시작하기 위해 WPForms의 무료 버전을 사용해 볼 수도 있습니다.

먼저 WPForms 플러그인을 설치하고 활성화해야 합니다. 도움이 필요하면 WordPress 플러그인 설치 방법에 대한 가이드를 참조하세요.

활성화하면 WordPress 대시보드에서 WPForms » 설정 으로 이동하여 라이선스 키를 입력할 수 있습니다. WPForms 계정 영역에서 라이선스 키를 찾을 수 있습니다.

Enter Your WPForms License Key

다음으로 WordPress 관리자 패널의 WPForms » Addons 로 이동해야 합니다.

그런 다음 '사용자 등록 애드온'까지 아래로 스크롤한 다음 '애드온 설치' 버튼을 클릭합니다.

Install WPForms User Registration Addon

이제 WooCommerce에 대한 사용자 정의 로그인 양식을 만들 준비가 되었습니다. WPForms » 새로 추가 로 이동하여 양식 빌더를 시작하기만 하면 됩니다.

다음 화면에서 상단에 양식 이름을 입력할 수 있습니다. 그런 다음 '사용자 로그인 양식' 템플릿을 검색하고 '템플릿 사용' 버튼을 클릭합니다.

Select the WPForms User Login Form Template

그런 다음 끌어서 놓기 빌더를 사용하여 사용자 로그인 양식 템플릿을 사용자 정의할 수 있습니다. WPForms를 사용하면 양식에 다른 필드를 추가하거나 템플릿의 기존 필드를 재정렬하는 것이 매우 쉽습니다.

예를 들어 전화번호와 같은 고급 필드를 왼쪽 메뉴에서 끌어 템플릿에 놓으면 추가할 수 있습니다.

WPForms Form Builder

템플릿의 각 양식 필드를 추가로 사용자 지정할 수 있습니다. 필드를 클릭하고 레이블을 편집하고 설명을 추가하고 양식에서 필수 필드로 만들기만 하면 됩니다.

그런 다음 양식 작성기의 '설정' 탭으로 이동할 수 있습니다. 일반 설정에서 '제출 버튼 텍스트'를 '로그인'으로 변경할 수 있습니다.

Customizing the WPForms Button Text

다음으로 '확인' 탭으로 이동하여 사용자가 성공적으로 로그인했을 때 수행할 작업을 변경할 수 있습니다.

'확인 유형' 드롭다운 메뉴를 클릭하고 옵션을 선택하기만 하면 됩니다. 고객에게 메시지를 표시하거나 페이지를 표시하거나 특정 URL로 리디렉션할 수 있습니다.

예를 들어 제품 페이지에 WooCommerce 로그인 양식을 추가하면 고객이 제품을 구매하기 위해 빠르게 로그인할 수 있습니다.

Edit confirmation settings in WPForms

완료되면 상단의 '저장' 버튼을 클릭하기만 하면 됩니다.

다음으로 WooCommerce 고객 로그인 양식을 사이트의 페이지에 추가해야 합니다.

빌더 상단의 '임베딩' 버튼을 클릭하기만 하면 됩니다. 그런 다음 기존 페이지에 양식을 넣을지 아니면 새 페이지를 만들지 선택할 수 있습니다.

Embed a form in page

지금은 '새 페이지 만들기' 옵션을 선택하겠습니다.

다음으로 페이지 이름을 입력하고 'Let's Go!'를 클릭해야 합니다. 단추.

Enter a name for new login page

그런 다음 WordPress 콘텐츠 영역에 WPForms 로그인 양식이 표시됩니다.

이제 양식을 미리 보고, 새 페이지를 게시하고, 고객을 위한 맞춤형 WooCommerce 로그인을 표시할 수 있습니다.

WooCommerce login page preview using WPForms

반면에 WooCommerce 로그인 양식을 스토어 사이드바에 추가할 수도 있습니다. 이렇게 하면 양식이 모든 제품 페이지에 표시되고 고객이 빠르게 로그인할 수 있습니다.

간단히 WordPress 대시보드에서 모양 » 위젯 으로 이동합니다. 그런 다음 '+' 버튼을 클릭하고 WPForms 위젯 블록을 추가합니다.

그런 다음 드롭다운 메뉴에서 로그인 양식을 선택하고 제목을 입력할 수 있습니다.

Add your login form in the sidebar

완료되면 '업데이트' 버튼을 클릭합니다.

이제 온라인 상점을 방문하여 사이드바에서 로그인 양식을 볼 수 있습니다.

Login form in sidebar preview

맞춤형 WooCommerce 고객 로그인 페이지를 만드는 더 많은 방법은 맞춤형 WordPress 로그인 페이지를 만드는 방법에 대한 가이드를 참조하십시오.

또한 웹사이트 탐색에 WooCommerce 로그인 페이지를 추가할 수 있도록 WordPress에 탐색 메뉴를 추가하는 방법에 대한 자습서도 볼 수 있습니다.

보너스: WooCommerce Checkout 로그인 페이지 사용자 정의

WooCommerce를 사용하면 재방문자가 결제 페이지에서 로그인할 수 있습니다. WooCommerce 체크아웃 로그인 페이지를 사용자 정의하려는 경우 가장 좋은 방법은 WooFunnels와 같은 강력한 퍼널 빌더 플러그인을 사용하는 것입니다.

WooFunnels를 사용하면 WooCommerce 결제 페이지를 사용자 지정하고, 다단계 결제를 추가하고, 원클릭 상향 판매를 추가하는 등 다양한 작업을 수행할 수 있습니다.

전환을 위해 고도로 최적화된 수십 개의 사전 제작된 체크아웃 템플릿 중에서 선택할 수 있으며 가장 좋은 점은 인기 있는 WordPress 페이지 빌더를 사용하여 맞춤화할 수 있다는 것입니다.

WooFunnels Checkout Example

여러 유입경로, 판매 페이지 및 상향 판매 제안을 A/B 테스트할 수 있는 옵션이 있습니다.

WooFunnels는 WooCommerce 퍼널의 각 단계에 대한 자세한 분석을 제공합니다.

WooFunnels A/B Testing for WooCommerce

또한 강력한 마케팅 자동화 애드온인 Autonami가 함께 제공되어 WooCommerce 이메일을 사용자 정의하고 WooCommerce에서 장바구니 포기, 환영 시리즈 등을 위한 드립 이메일 알림을 보낼 수 있습니다.

Autonami Email Library for WooCommerce

WooCommerce 스토어 성장에 대해 진지하게 생각하고 있다면 이것은 우리가 권장하는 필수 도구 중 하나입니다.

이 기사가 맞춤형 WooCommerce 고객 로그인 페이지를 만드는 방법을 배우는 데 도움이 되었기를 바랍니다. 최고의 WooCommerce 플러그인에 대한 전문가 선택과 이메일을 보내지 않는 WordPress 문제를 해결하는 방법에 대한 궁극적인 가이드도 볼 수 있습니다.

이 기사가 마음에 들면 WordPress 비디오 자습서용 YouTube 채널을 구독하십시오. Twitter와 Facebook에서도 찾을 수 있습니다.