필드에 대한 WooCommerce 체크아웃 유효성 검사(이메일 주소 예시)

게시 됨: 2018-04-12

이 기사에서는 (아마도) 무료 플러그인을 사용하여 WooCommerce 체크아웃 양식(이메일 주소 필드용)에 대한 유효성 검사를 추가하는 가장 좋은 방법을 보여드리겠습니다! 결과적으로 WooCommerce 결제 필드(기본 및 오류 메시지가 있는 사용자 정의 필드)를 확인하는 방법을 배우게 됩니다.

추가 프로그래밍 비용을 피하기 위해 WooCommerce에서 체크아웃 필드 유효성 검사를 직접 구현하고 싶었던 적이 있습니까?

또한 무료로 오류 메시지를 포함하여 WooCommerce 결제 필드, 유효성 검사를 사용자 지정하는 것이 좋지 않습니까? 이를 위해 무료 플러그인을 사용하는 방법을 살펴보겠습니다!

목차

  1. WooCommerce 체크아웃 유효성 검사 플러그인
  2. WooCommerce Checkout 확인(이메일 주소 예시)
  3. 개발자를 위한 사용자 지정 유효성 검사 규칙
  4. 더 많은 사용자 정의 기능

WooCommerce 체크아웃 유효성 검사 플러그인

우선, 결제 필드를 사용자 지정하려면 플러그인이 필요합니다. WooCommerce에는 이 중요한 기능이 없기 때문입니다! 이러한 플러그인은 다음과 같은 옵션을 제공해야 합니다.

  • 필드 이름 변경,
  • 필드 순서 변경,
  • 새 사용자 지정 필드를 만들거나 기존 필드를 편집합니다.
  • 필드 숨기기, 필수 필드를 선택 사항으로 만들기,
  • 주소, 이메일 또는 전화 필드에 대한 결제 필드 유효성 검사를 추가합니다 .

따라서 위에 나열된 모든 기능을 포함하는 플러그인을 만들었습니다. 또한 무료로 다운로드할 수 있습니다.

이 비디오를 보고 이 플러그인이 무료 버전에서 무엇을 제공하는지 살펴보십시오.

여기에서 플러그인을 다운로드할 수 있습니다.

유연한 체크아웃 필드를 통한 WooCommerce 체크아웃 유효성 검사

체크아웃 필드에 내장된 WooCommerce 주소 확인을 사용하거나 나만의 규칙을 만드세요. 결제 필드를 관리하고 WooCommerce 속도를 높이세요!

무료로 다운로드 또는 WordPress.org로 이동
80,000+ 활성 설치
마지막 업데이트: 2023-03-13
WooCommerce 7.1 - 7.6.x에서 작동

또한 전 세계 80,000개 이상의 매장에서 매일 Flexible Checkout Fields 플러그인을 사용합니다! Taka는 일부 리뷰를 살펴 봅니다.

유연한 체크아웃 필드 리뷰
사용자는 WooCommerce 주소 확인 플러그인을 높이 평가합니다!

좋은 코드처럼 들리죠?

Flexible Checkout Fields 플러그인에는 WooCommerce 체크아웃 유효성 검사 기능이 내장되어 있습니다.

우리는 플러그인을 가능한 한 쉽게 만들고 싶었습니다. 그래서 최대한 워드프레스 스타일 로 만들기로 했습니다.

디자인이 방해가 되지 않고 목표를 원활하게 달성하는 데 도움이 되므로 결제 필드를 순식간에 구성할 수 있습니다.

유효성 검사가 포함된 체크아웃 편집기 플러그인
Flexible Checkout Fields - 주소 확인 플러그인
보시다시피 Flexible Checkout Fields는 WooCommerce 체크아웃 유효성 검사 플러그인일 뿐만 아니라 강력한 체크아웃 사용자 지정 플러그인입니다(더 많은 기능 보기).

WooCommerce Checkout 확인(이메일 주소 예시)

우선 WooCommerce에 필드 유효성 검사가 내장되어 있음을 알아야 합니다. 이메일, 전화번호 또는 우편번호를 확인할 수 있습니다.

유연한 체크아웃 필드를 사용하면 사용자 지정 체크아웃 필드에서 이러한 기본 확인 규칙을 사용할 수 있습니다.

또한 자체 유효성 검사를 사용할 수 있습니다 . 따라서 Flexible Checkout Fields를 효율적인 WooCommerce 체크아웃 유효성 검사 플러그인으로 사용할 수 있습니다!

WooCommerce 결제 필드 유효성 검사를 구성하는 방법

필드 설정에서 바로 유효성 검사를 구성할 수 있습니다.

오류 메시지가 있는 이메일 주소에 대한 WooCommerce 결제 확인
유효성 검사 필드 - 고급 탭

선택 상자가 있어 원하는 옵션을 간단히 선택할 수 있습니다(또는 유효성 검사를 전혀 사용하지 않음).

결제 필드 유효성 검사 끄기

없음 - 새 필드의 기본 옵션이므로 이 경우 필드 유효성 검사가 작동하지 않습니다.

기본 유효성 검사

이 옵션의 결과로 필드에 기본 유효성 검사가 설정됩니다. 기본 유효성 검사는 다음과 함께 작동합니다.

  • 이메일 필드
  • 전화 필드
  • 우편번호 입력란
WooCommerce의 결제 필드에 대한 기본 유효성 검사
주소 확인 WooCommerce - 예

결제 페이지에서 유효하지 않은 이메일 주소의 예를 살펴보겠습니다.

결제 시 잘못된 이메일 주소
체크아웃의 이메일 주소 필드

결과적으로 WooCommerce 결제 오류 메시지 중 하나가 표시됩니다.

WooCommerce 체크아웃 오류 메시지: 잘못된 이메일 주소
WooCommerce 결제 오류 메시지 - 예

이메일, 전화번호 또는 우편번호

따라서 WooCommerce 사용자 지정 체크아웃 필드에도 이 유효성 검사를 사용할 수 있습니다.

그러므로 시도해 봅시다! 한 줄 텍스트 필드를 만들고 유효성 검사를 추가합니다. 이메일 유효성 검사?

이메일 유효성 검사 우커머스 플러그인
이메일 확인: 단계별
WooCommerce 체크아웃 유효성 검사 - 필드 설정
주소 확인 WooCommerce - 3단계

다음으로 잘못된 이메일 주소를 입력합니다.

맞춤 입력란의 잘못된 이메일 주소
WooCommerce 결제 오류 메시지 - 예

WooCommerce 결제 확인 결과 다음과 같은 오류 메시지가 나타납니다.

WooCommerce 체크아웃 오류 메시지: 잘못된 이메일 주소
유효성 검사 오류 메시지 - 결제 양식의 최종 결과

물론 WooCommerce 맞춤 체크아웃 필드에 전화 및 우편번호 필드 유효성 검사를 사용할 수도 있습니다.

개발자를 위한 사용자 지정 유효성 검사 규칙

Flexible Checkout Fields에 사용자 지정 유효성 검사를 추가할 수도 있습니다. 개발자이거나 후크 및 PHP 코드 편집에 익숙하다면 매우 쉬울 것입니다.

WooCommerce 체크아웃 필드에 대한 사용자 지정 유효성 검사를 추가하는 방법 알아보기 →

체크아웃 필드 유효성 검사 및 추가 사용자 정의 기능

오늘은 Flexible Checkout Fields 플러그인으로 이메일 주소 유효성 검사를 구성하는 방법을 배웠습니다. 이것은 매우 강력한 도구입니다.

그러나 Flexible Checkout Fields는 단순한 WooCommerce 체크아웃 유효성 검사 플러그인이 아닙니다. 이를 사용하여 WooCommerce의 모든 체크아웃 필드(레이블, 자리 표시자 또는 CSS 클래스 포함)를 관리하거나 재정렬하거나 새 사용자 정의 필드를 추가할 수 있습니다!

이 재생 목록에는 Flexible Checkout Fields 플러그인에 관한 모든 비디오 자습서가 포함되어 있습니다. 나중을 위해 저장하십시오!

이 지식이 WooCommerce 체크아웃을 사용자 정의하고 속도를 높이는 데 도움이 되기를 바랍니다!

질문이 있으시면 아래의 의견 섹션을 사용하십시오.

추신. WooCommerce Checkout 단계별 가이드가 흥미로울 것입니다!

결제 필드 유효성 검사에 대해 자세히 알아보기

  • 결제 시 EU VAT 번호 확인

    체크아웃 시 VAT 번호 확인=
    VAT 번호 WooCommerce 확인. WooCommerce 체크아웃에서 EU VAT 번호를 확인하는 방법을 알아보세요.

  • 결제 시 EU VAT 번호 추가

    우커머스 체크아웃에 vat eu 추가
    체크아웃에 EU VAT 필드를 추가하는 방법. 플러그인으로 EU VAT 번호 필드를 추가하는 가장 쉬운 방법입니다.