WooCommerce에 WordPress 소셜 로그인을 추가하는 방법

소셜 미디어 팔로어가 WooCommerce 사이트에 쉽게 로그인할 수 있는 방법을 찾고 계십니까? 웹 사이트에 WordPress 소셜 로그인을 추가하는 것을 고려하십시오.

WooCommerce에 소셜 로그인을 추가하면 사이트 방문자가 소셜 미디어 계정 자격 증명을 사용하여 빠르게 로그인할 수 있습니다.

그러나 유일한 문제는 WooCommerce가 기본적으로 전자 상거래 사이트에 대한 소셜 로그인 옵션을 제공하지 않는다는 것입니다. 새 자격 증명으로 새 계정을 만들도록 요구하는 사이트 방문자에게만 간단한 로그인 및 등록 양식을 제공할 수 있습니다.

좋은 소식은 ProfilePress와 같은 플러그인을 사용하여 WooCommerce 사이트에서 사용자 정의 로그인 및 등록 양식을 만들 수 있다는 것입니다.

이 기사에서는 WooCommerce 로그인 양식에 소셜 버튼을 추가하고 기본 WooCommerce 버튼을 맞춤형 ProfilePress 버튼으로 교체하는 방법을 보여줍니다.

WooCommerce에 소셜 로그인을 추가해야 하는 이유는 무엇입니까?

온라인 상점 소유자로서 WooCommerce는 기본적으로 사이트 방문자가 웹사이트에 로그인할 수 있는 제한된 옵션을 제공한다는 것을 이미 알고 있을 것입니다.

모든 사이트 방문자는 콘텐츠에 액세스하기 전에 고유한 사용자 이름과 이메일 주소를 사용하여 먼저 웹사이트에 등록해야 합니다. 기본 로그인 양식은 기본적으로 보일 뿐만 아니라 사용자가 WooCommerce 사이트에 빠르게 등록하고 로그인할 수 있는 제한된 옵션을 제공합니다.

기본 WooCommerce 양식은 사용자가 소셜 미디어 계정을 사용하여 웹사이트에 로그인할 수 있도록 설계되지 않았습니다. 많은 사람들이 Facebook, Twitter 또는 Google과 같은 플랫폼에 소셜 미디어 계정을 가지고 있기 때문에 해당 계정 세부 정보를 사용하여 스토어에 로그인하는 것이 더 쉽습니다.

WooCommerce 사이트에 소셜 로그인을 추가하는 것이 유용한 이유는 다음과 같습니다.

• 모든 유형의 사용자가 사이트에 등록하고 로그인할 수 있습니다. 대부분의 사람들이 이미 소셜 미디어 계정을 사용할 준비가 되어 있으므로 WooCommerce 사이트를 모든 유형의 사용자가 훨씬 더 쉽게 액세스할 수 있고 환영하도록 만들 수 있습니다. 이미 등록된 Facebook 계정이 있는 사용자는 몇 번의 클릭만으로 쉽게 등록하고 웹사이트에 로그인할 수 있습니다.

• 친근한 사용자 경험을 제공합니다. WooCommerce 사이트에서 친숙한 사용자 경험을 제공하면 사람들이 더 많은 구매를 하고 고객 유지를 개선할 수 있습니다. 생각해 보세요. 고객이 WooCommerce 사이트에 로그인하여 주문을 하는 것이 쉬우면 동일한 고객이 다음에 온라인 상점을 다시 방문할 가능성이 더 높아집니다.

• 더 많은 사람들이 등록하도록 독려하십시오. 간편한 원클릭 가입 및 로그인을 제공하여 더 많은 사람들이 WooCommerce 사이트에 등록하도록 권장합니다. 이것은 이메일 목록을 작성하고 이메일 마케팅 캠페인을 향상시키는 좋은 방법입니다.

• 소셜 미디어 팔로잉을 사이트에 등록된 사용자로 전환하십시오. 귀하의 비즈니스가 소셜 미디어 플랫폼에서 엄청난 팔로워를 보유하고 있다면 WooCommerce 사이트로 모든 관심을 돌리는 것이 좋습니다. 청중이 WooCommerce 사이트에 더 쉽게 액세스할 수 있도록 WooCommerce 사이트에 소셜 로그인 버튼을 제공하여 이를 수행할 수 있습니다.

기본 WooCommerce에 소셜 로그인을 추가하는 가장 쉬운 방법

WooCommerce 사이트에 소셜 로그인 버튼을 추가하는 데 사용할 수 있는 플러그인이 많이 있지만 ProfilePress는 눈에 띄는 유일한 솔루션입니다.

ProfilePress는 강력한 양식 작성기 및 고급 사용자 지정 기능이 내장된 전문 사용자 프로필 및 멤버십 플러그인입니다.

코드를 한 줄도 작성하지 않고도 기본 WooCommerce 로그인 및 등록 페이지에 대해 매력적으로 보이는 사용자 정의 양식을 만들 수 있습니다. 이 외에도 회원 디렉토리를 만들고 WooCommerce 사이트의 프런트 엔드에서 등록된 모든 회원을 보여줄 수도 있습니다. ProfilePress의 가장 좋은 점은 미리 디자인된 템플릿을 사용하여 사용자 정의 양식을 빠르게 생성한 다음 필요에 따라 개인화할 수 있다는 것입니다.

ProfilePress 플러그인을 사용하여 맞춤형 ProfilePress 로그인 양식에 소셜 로그인 버튼을 추가하고 "내 계정" 페이지에서 기본 WooCommerce 등록 및 로그인 양식으로 교체할 수 있습니다.

ProfilePress를 사용하여 WooCommerce에 소셜 로그인 추가

여기서는 ProfilePress를 사용하여 WooCommerce에 소셜 로그인을 추가하는 것이 얼마나 쉬운지 보여드리겠습니다.

이 튜토리얼의 경우 WordPress 사이트에 WooCommerce 플러그인이 설치되어 있어야 합니다. 또한 WooCommerce 사이트에 소셜 로그인 버튼이 있는 사용자 정의 로그인 양식을 추가하려면 ProfilePress 플러그인이 필요합니다.

1단계: ProfilePress 설치 및 활성화

시작하려면 ProfilePress 플러그인을 가져와 WordPress 사이트에 설치하십시오.

WordPress 관리자 패널에서 플러그인 → 새로 추가 로 이동하여 새로 추가 버튼을 클릭합니다. 이제 zip 파일을 업로드하고 WooCommerce 사이트에 플러그인 설치를 진행합니다.

2단계: 사용자 정의 로그인 양식 만들기

ProfilePress 플러그인을 사용할 준비가 되면 소셜 미디어 버튼이 추가된 사용자 정의 로그인 양식을 만들 수 있습니다. ProfilePress → 애드온 화면으로 이동하여 먼저 소셜 로그인 애드온을 활성화해야 합니다.

완료되면 ProfilePress → Forms & Profiles 로 이동하여 Add New 버튼을 클릭합니다.

드래그 앤 드롭 빌더 를 선택하고 사용자 정의 로그인 양식에 새 제목을 지정하십시오. 이제 템플릿을 선택하여 로그인 양식 편집을 시작하십시오. 시연할 Bash 템플릿을 선택했습니다.

템플릿 선택 버튼을 클릭하면 소셜 미디어 로그인 버튼과 추가 필드를 추가할 수 있는 양식 편집 페이지로 자동 리디렉션됩니다.

3단계: 소셜 로그인 버튼 추가

이 페이지에서 로그인 양식에 여러 개의 소셜 로그인 버튼을 추가하고 드래그 앤 드롭으로 추가 필드를 추가하거나 제거할 수 있습니다.

또한 각 필드를 편집하고 WooCommerce 사이트의 프런트 엔드에 표시되는 필드 텍스트를 사용자 지정할 수 있습니다.

필드 위로 마우스를 가져간 상태에서 설정 아이콘을 클릭하고 완료되면 변경 사항 적용 버튼을 클릭하기만 하면 됩니다. 필드 사용자 정의가 끝나면 양식 설정 메타 상자를 사용하여 로그인 양식에 소셜 미디어 로그인 버튼을 추가할 수 있습니다.

모양 탭을 사용하여 소셜 로그인 버튼 텍스트 필드를 사용하여 소셜 미디어 계정을 추가하십시오. 또한 제출 버튼의 버튼 텍스트와 사용자 정의 로그인 양식의 텍스트 필드 자리 표시자를 사용자 정의할 수 있습니다.

완료되면 변경 사항 적용 버튼을 클릭하여 계속하십시오.

4단계: 기본 WooCommerce 로그인 양식 바꾸기

사용자 정의 로그인 양식 단축 코드를 복사하고 페이지 → 새로 추가 로 이동하여 WooCommerce 사이트에 새 소셜 로그인 페이지를 만듭니다.

단축 코드 블록을 사용하여 로그인 양식 단축 코드를 붙여넣고 게시 버튼을 클릭하여 계속하십시오. 이제 설정에서 실제 소셜 로그인을 구성하고 기본 WooCommerce 로그인 양식을 방금 만든 양식으로 바꾸는 일만 남았습니다.

사이트에서 생성한 페이지를 기본 WordPress 로그인 페이지로 설정하려면 ProfilePress → 설정 으로 이동하고 글로벌 설정 탭에서 로그인 페이지 드롭다운을 사용하여 새로 생성된 로그인 페이지를 선택합니다.

실제 소셜 로그인 프로세스를 설정하려면 ProfilePress → 설정 으로 이동하고 소셜 로그인 탭을 클릭하여 소셜 로그인 설정을 지정합니다.

여기에서 모든 소셜 미디어 계정에 대한 API 키 설정을 입력하여 다양한 소셜 앱이 ProfilePress 소셜 로그인 양식과 원활하게 통합되도록 할 수 있습니다. 소셜 미디어 플랫폼용 API 키를 입력한 후 변경 사항 저장 버튼을 클릭합니다.

이 외에도 버튼 탭으로 이동하여 소셜 로그인 버튼의 버튼 텍스트를 변경할 수도 있습니다.

완료되면 변경 사항 저장 버튼을 클릭해야 합니다.

WooCommerce 내 계정 페이지에 표시된 기본 등록 및 로그인 양식을 교체하려면 WooCommerce 탭을 클릭하고 내 계정 로그인 양식 및 내 계정 등록 양식 드롭다운 필드를 사용하여 새로 만든 소셜 로그인 페이지를 선택합니다.

선택한 양식 테마에 따라 WooCommerce 내 계정 페이지에서 어떻게 보일 수 있는지 보여줍니다.

결제 시 기본 WooCommerce 로그인 양식을 소셜 로그인이 포함된 ProfilePress 로그인 양식으로 바꿀 수도 있습니다. 이렇게 하려면 로그인 양식 체크아웃 드롭다운 메뉴를 사용하여 이전에 만든 소셜 로그인이 있는 로그인 양식이 포함된 로그인 페이지를 선택하기만 하면 됩니다.

계속하려면 변경 사항 저장 버튼을 클릭하십시오.

소셜 로그인 버튼을 클릭하면 사용자를 로그인 인증 페이지로 리디렉션합니다.

고객은 소셜 미디어 계정을 사용하여 WooCommerce 결제 페이지에서 로그인할 수도 있습니다.

결론

WooCommerce 사이트에 소셜 로그인 버튼을 추가하면 더 많은 등록을 유도하고 사이트의 사용자 경험을 개선할 수 있습니다. 이것은 이미 소셜 미디어 계정에서 많은 팔로워를 보유하고 있는 비즈니스에 특히 유용합니다.

그러나 사이트에서 소셜 로그인을 제공할 때 기본 WooCommerce 기능으로 제한됩니다. 이것이 ProfilePress와 같은 전용 사용자 정의 양식 빌더 플러그인을 사용하여 WooCommerce 사이트의 기본 로그인 양식을 대체할 것을 권장하는 이유입니다.

WooCommerce 사이트에 소셜 로그인을 추가하는 쉬운 방법을 찾고 계십니까? 오늘 ProfilePress를 받으십시오!