WooCommerce Checkout 오류 메시지를 변경하는 방법

게시 됨: 2021-12-21

결제 시 오류 알림을 업데이트하는 방법을 찾고 계십니까? 우리는 당신을 덮었습니다. 이 가이드에서는 WooCommerce 결제 오류 메시지를 변경하는 다양한 방법을 보여줍니다.

온라인 상점을 운영하다 보면 어느 시점에서 충돌과 오류에 직면하게 됩니다. 이전에 결제 시 일반적인 문제를 해결하는 방법, 장바구니에 추가 버튼이 작동하지 않을 때 수행할 작업 및 쇼핑 페이지가 비어 있을 때 몇 가지 솔루션을 살펴보았습니다. 이 튜토리얼에서는 WooCommerce 체크아웃 오류 메시지를 변경하고 사용자 지정 오류 메시지 를 만드는 다양한 방법을 보여줍니다.

그렇게 하는 다양한 방법을 살펴보기 전에 체크아웃 페이지에서 오류 메시지를 사용자 정의할 때의 이점을 더 잘 이해하겠습니다.

체크아웃 오류 메시지를 변경하는 이유는 무엇입니까?

기본적으로 WooCommerce는 기본적이고 매우 일반적인 체크아웃 오류 메시지와 함께 제공됩니다. 대부분의 상점 주인은 그대로 두므로 이러한 메시지를 변경하면 군중에서 쉽게 눈에 띄게 될 수 있습니다.

결제 알림을 변경하지 않고 그대로 두는 것은 좋은 기회를 놓치는 것입니다. 결제는 판매 마감 여부를 결정하므로 가장 중요한 순간입니다. 체크아웃 중에 오류가 발생하면 쇼핑객이 뒤로 물러날 수 있고 결국 판매를 잃을 수 있습니다. 체크아웃 시 이러한 오류 메시지를 사용자 지정하면 오류 메시지를 최대한 활용하고 고객에게 보안을 제공하기 위해 발생한 일을 설명할 수 있습니다.

기본적으로 WooCommerce는 필수 필드가 누락되었거나 고객이 소개한 결제 수단이 유효하지 않은 경우 오류 메시지를 표시합니다. 다음은 결제 시 표시되는 일반적인 오류 메시지입니다.

woocommerce 결제 오류 메시지 변경 - 결제 오류 메시지

보시다시피 명확하지만 더 많은 작업을 수행할 수 있습니다. 예를 들어 브랜드를 반영하는 요소를 추가하고 텍스트를 추가하는 등의 작업을 수행할 수 있습니다.

WooCommerce에서 결제 오류 메시지를 변경해야 하는 이유를 알았으므로 이제 작업을 완료하는 방법을 살펴보겠습니다.

WooCommerce Checkout 오류 메시지를 변경하는 방법

WooCommerce 결제 오류 메시지를 편집하는 방법에는 두 가지가 있습니다.

플러그인 사용
프로그래밍 방식으로

두 가지 방법을 모두 살펴보고 자신의 기술과 필요에 따라 올바른 방법을 선택할 수 있습니다.

1) 플러그인으로 체크아웃 오류 메시지 사용자 정의

코딩 기술이 없거나 플러그인을 사용하여 WooCommerce 오류 메시지를 편집하려는 경우 Say What 플러그인을 사용할 수 있습니다. 이 도구를 사용하면 한 줄의 코드를 작성하거나 템플릿 파일을 편집하지 않고도 웹사이트 문자열을 수정할 수 있습니다.

무료 버전은 기본 기능과 함께 제공되며 프리미엄 버전은 연간 39달러부터 시작하며 고급 사용자 정의 기회를 제공합니다.

플러그인을 설치하고 활성화하면 왼쪽에 구성 옵션이 표시됩니다. 거기에서 대체할 문자열을 선택하고 대상 콘텐츠를 입력할 수 있습니다. 완료했으면 저장 을 누르십시오.

플러그인에 대한 도움이 필요한 경우 지원 티켓을 제출하거나 문의 양식을 사용하여 지원 팀에 이메일을 보낼 수 있습니다.

2) 프로그래밍 방식으로 체크아웃 오류 메시지 편집

플러그인을 사용하고 싶지 않고 프로그래밍 기술이 있는 경우 약간의 코드로 오류 메시지를 편집할 수 있습니다. 이 섹션에서는 PHP를 사용하여 WooCommerce에서 오류 메시지를 변경하는 방법을 보여줍니다.

여기에서 할 수 있는 일이 많습니다. 이 데모에서는 체크아웃 페이지에 기본 여러 경고 대신 하나의 오류 메시지를 표시하는 데 중점을 둘 것입니다.

이를 위해 테마의 functions.php 파일을 수정할 것이므로 시작하기 전에 사이트를 백업하고 아직 없는 경우 하위 테마를 만드는 것이 좋습니다.

그런 다음 하위 테마의 funtions.php 파일에 아래 코드를 추가할 수 있습니다. 앞서 언급했듯이 결제 페이지에 여러 알림 대신 단일 오류 메시지가 표시됩니다.

 add_action( 'woocommerce_after_checkout_validation', 'quadlayers', 9999, 2);
 기능 쿼드레이어( $fields, $errors ){
 // 유효성 검사 오류가 있는 경우
 if( !empty( $errors->get_error_codes() ) ) {

 // 기존의 모든 오류 메시지 생략
 foreach( $errors->get_error_codes() as $code ) {
 $errors->제거( $code );
 }
 // 사용자 정의 단일 오류 메시지 표시
 $errors->add( 'validation', '맞춤 메시지가 여기에 옵니다!!!' );
 }
 }

코드를 자세히 살펴보면 쿼드레이어 가 함수로 설정되어 있고 사용자 정의 메시지가 여기에 표시됩니다!!! 하나의 메시지로. 이 스니펫을 기본으로 사용하고 요구 사항에 따라 조정하십시오.

이 데모에서는 사이트별 플러그인을 사용하여 아래와 같이 코드를 붙여넣습니다.

우커머스 오류 메시지

이제 프런트 엔드를 확인하고 장바구니에 제품을 추가하고 결제 페이지로 이동합니다. 필수 필드를 채우지 않고 구매를 완료하려고 하면 다음과 같은 오류가 표시됩니다.

woocommerce 결제 오류 메시지 변경 - 사용자 정의 결제 오류 메시지

이런 식으로 약간의 코드로 WooCommerce 체크아웃 오류 메시지를 변경할 수 있습니다.

보시다시피 이것은 간단한 예입니다. 이 접근 방식을 조건부와 결합하여 고객의 쇼핑 경험을 개선하는 것이 좋습니다. 이에 대한 자세한 내용은 WooCommerce 체크아웃에 조건부 필드를 추가하는 방법에 대한 가이드를 참조하십시오.

지금까지 결제 시 오류 메시지를 사용자 지정하는 몇 가지 방법을 살펴보았습니다. 하지만 온라인 상점을 개선하기 위해 할 수 있는 일이 더 있습니다. 사용자 지정 메시지를 추가하는 방법을 살펴보겠습니다.

사용자 정의 체크아웃 메시지를 추가하는 방법

이 섹션에서는 결제 페이지에 사용자 지정 메시지를 표시하는 방법을 배웁니다. 먼저 대시보드에서 페이지 > 결제 로 이동합니다.

결제 페이지

여기에서 페이지 콘텐츠를 수정하고 사용자 정의 메시지를 표시하고 미디어를 추가하는 등의 작업을 수행할 수 있습니다. 기본적으로 체크아웃 페이지에는 WooCommerce 체크아웃 단축 코드가 포함되어 있습니다.

결제 단축 코드

체크아웃 필드 전후에 사용자 정의 메시지를 표시하려면 단락 블록을 사용할 수 있습니다. 이 데모에서는 체크아웃 단축 코드 앞에 단락 블록 하나를 추가하고 뒤에 단락 블록을 추가합니다. 간단히 "컨텐츠 전" 및 "컨텐츠 후"라고 부를 것입니다.

콘텐츠 전 및 콘텐츠 단축 코드 후

페이지를 업데이트한 후 프런트 엔드에서 체크아웃 페이지를 보면 방금 추가한 사용자 지정 메시지를 볼 수 있습니다.

내용 전에

필드 메시지 후

마찬가지로 이미지, 사용자 정의 메시지, 쿠폰 코드 등과 같은 모든 유형의 콘텐츠를 결제 페이지에 추가할 수 있습니다.

오류 메시지 위치를 변경하는 방법

기본적으로 WooCommerce는 왼쪽에 오류 메시지를 표시합니다. 좋은 소식은 약간의 CSS로 이를 변경할 수 있다는 것입니다. 이 섹션에서는 CSS 스니펫으로 오류 메시지 위치를 변경하는 방법을 보여줍니다.

먼저 WordPress 관리 대시보드 에 로그인하고 모양 > 사용자 정의 로 이동합니다.

워드프레스 커스터마이저

사용자 지정 프로그램을 열고 추가 CSS 섹션으로 이동합니다.

추가 CSS 옵션

여기에서 CSS 스니펫을 추가할 수 있습니다. WordPress 사용자 정의 프로그램은 실시간 미리보기 섹션에 변경 사항을 표시하므로 모든 업데이트를 실시간으로 볼 수 있습니다.

이 스니펫을 복사하여 마법사에 붙여넣기만 하면 됩니다.

 form.checkout {
 -ms-flex-wrap: 랩;
 플렉스 랩: 랩;
 }

 .woocommerce-NoticeGroup-checkout {
 -webkit-box-flex: 1;
 -ms-플렉스: 1 1 100%;
 플렉스: 1 1 100%;
 최대 너비: 100%;
 너비: 100%;
 여백-하단: 40px;
 여백 상단:20px;
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error {
 위치: 상대;
 상단:자동;
 하단: 자동;
 왼쪽:자동;
 오른쪽:자동;
 패딩 오른쪽: 30px;
 z-인덱스: 자동;
 커서: 기본값;
 -ms-변환: 없음;
 변환: 없음;
 -웹킷 변환: 없음;
 애니메이션: 없음;
 -웹킷 애니메이션: 없음;
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error:after {
 내용: 없음;
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error.hidden-notice {
 애니메이션: 없음;
 -웹킷 애니메이션: 없음;
 }

이 경우 메시지에 하단 40픽셀, 상단 20픽셀, 오른쪽 패딩 30픽셀, 너비 100%의 여백을 제공합니다. 기본 설정에 따라 이 값을 조정 하고 변경 사항을 저장하는 것을 잊지 마십시오.

CSS 변경 사항 게시

보너스: WooCommerce 오류를 숨기는 방법

이 가이드를 마치기 전에 다른 대안을 살펴보겠습니다. WooCommerce 체크아웃 오류 메시지를 변경하는 대신 오류 메시지를 숨기려면 어떻게 하시겠습니까? 당신의 경우라면 이 섹션은 당신을 위한 것입니다. 약간의 코드로 오류를 제거하는 방법을 보여 드리겠습니다.

일부 핵심 파일을 편집할 것이므로 사이트의 전체 백업을 만들고 아직 없는 경우 하위 테마를 사용하세요.

오류를 숨기기 위해 wp-config.php 파일을 사용자 정의합니다. 먼저, 필요한 경우 복원할 수 있는 백업을 갖도록 wp-config.php 파일의 복사본을 로컬 컴퓨터에 다운로드하는 것이 좋습니다.

WordPress 코어 파일에 액세스하는 방법에는 여러 가지가 있습니다. 이 데모에서는 파일 관리자라는 전용 플러그인을 사용합니다. 먼저 대시보드에서 플러그인 > 새로 추가 로 이동하여 파일 관리자를 검색합니다. 플러그인을 찾으면 설치하고 웹사이트에서 활성화하십시오.

WordPress 페이지 리디렉션 - wp 파일 관리자 설치

활성화 후 왼쪽에 플러그인 구성이 표시됩니다. wp-config.php 파일을 찾습니다.

woocommerce 체크아웃 오류 메시지 변경 - wp-config.php 편집

파일을 마우스 오른쪽 버튼으로 클릭하고 코드 편집기 옵션을 선택합니다.

woocommerce 체크아웃 오류 메시지 변경 - 코드 편집기

파일 중간에 다음 행 중 하나가 표시됩니다.

 정의('WP_DEBUG', 참);

또는

 정의('WP_DEBUG', 거짓);

woocommerce 체크아웃 오류 메시지 변경 - wp 디버그 라인

찾으면 해당 줄을 다음 코드로 바꾸고 파일을 저장합니다.

 ini_set('디스플레이 오류','끄기');
 ini_set('오류 보고', E_ALL );
 정의('WP_DEBUG', 거짓);
 정의('WP_DEBUG_DISPLAY', 거짓);

코드는 모든 오류 메시지를 끕니다.

woocommerce 체크아웃 오류 메시지 변경 - wp-config.php 파일 업데이트

그게 다야! 이제부터는 상점에 오류 메시지가 표시되지 않습니다.

결제를 맞춤설정하는 더 많은 방법

마지막으로 WooCommerce 결제를 추가로 사용자 정의하는 다른 방법을 살펴보겠습니다.

결제에 사용자 정의 필드 추가

이 섹션에서는 결제 페이지에 사용자 정의 필드를 추가하는 방법을 보여줍니다.

상상할 수 있듯이 다양한 유형의 필드를 추가할 수 있습니다. 이 데모에서는 쇼핑객이 뉴스레터를 구독하고 이메일 목록을 작성할 수 있는 옵션을 제공하기 위해 체크아웃 페이지 끝에 맞춤 확인란을 추가합니다.

하위 테마의 functions.php 파일에 다음 스크립트를 붙여넣기만 하면 됩니다.

 // 체크박스 필드
add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );

기능 quadlayers_subscribe_checkout( $checkout ) {
woocommerce_form_field( '구독자', 배열(
'유형' => '확인란',
// '필수' => 참,
'클래스' => array('사용자 정의 필드 양식 행 너비'),
'label' => ' 뉴스레터를 구독하세요.'
), $checkout->get_value( '구독자' ) );
}

보시다시피 확인란 옆에 "뉴스레터 구독" 레이블을 추가했습니다. 이것을 기본으로 삼아 상점에 적용할 수 있습니다.

필드를 선택 사항으로 만들기

또 다른 흥미로운 옵션은 필수 필드를 선택 사항으로 만드는 것입니다. 이런 식으로 쇼핑객이 거래에 필요한 필드만 채우도록 합니다. 이렇게 하면 결제 프로세스를 더 빠르게 만들고 고객 경험을 개선할 수 있습니다.

예를 들어 가상 제품을 판매하는 경우 다음 코드를 자식 테마의 functions.php 파일에 붙여넣어 결제 섹션의 주소 필드를 선택 사항으로 만들 수 있습니다.

 add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');
기능 wc_address_field_optional( $fields ) {
$fields['billing']['billing_address_1']['필수'] = 거짓; 
$ 필드 반환; 
}

이에 대한 자세한 내용은 WooCommerce 체크아웃 사용자 지정 가이드를 확인하세요.

결론

요약하면, 체크아웃 알림을 편집하여 체크아웃에 또 다른 사용자 정의 레이어를 추가하고 경쟁업체와 차별화할 수 있습니다.

이 가이드에서 WooCommerce 체크아웃 오류 메시지를 변경하는 두 가지 주요 방법을 보았습니다. 전용 플러그인을 사용하고 약간의 코드를 프로그래밍 방식으로 사용하는 것입니다. 플러그인을 사용하는 것은 코딩 기술이 없거나 몇 번의 클릭으로 상점을 사용자 정의하는 것을 선호하는 사람들에게 좋은 대안입니다.

반면에 프로그래밍 지식이 있고 더 많은 플러그인을 설치하고 싶지 않다면 자체 솔루션을 코딩할 수 있습니다. 이것은 당신에게 훨씬 더 많은 유연성을 제공하고 당신이 원하는 무엇이든 할 수 있게 해줍니다. 스니펫을 하위 테마에 붙여넣었는지 확인하여 상위 테마를 업데이트한 후 사용자 정의를 잃지 않도록 하십시오.

이 기사가 도움이 되었고 WooCommerce 체크아웃 오류 메시지를 변경하는 방법을 배웠기를 바랍니다. 그렇다면 이 게시물을 소셜 미디어에서 친구들과 공유하십시오.

더 흥미로운 기사를 보려면 다음 게시물을 참조하십시오.

Proceed to Checkout 텍스트를 변경하는 방법
최고의 WooCommerce 체크아웃 플러그인
WooCommerce에서 직접 결제 링크를 만드는 방법