WooCommerce 체크아웃 필드를 사용자 정의하는 방법

게시 됨: 2020-01-09

체크아웃 프로세스는 구매자 여정에서 가장 중요한 단계 중 하나입니다. 쇼핑객이 구매를 하도록 설득해야 하는 마지막 기회입니다. 그러나 전자 상거래 장바구니의 무려 63.23%가 버려진다. 제품을 구매하기로 결정했지만 마지막 순간에 마음이 바뀌는 많은 온라인 쇼핑객들이 있습니다.

버려진 장바구니에 영향을 미치는 다양한 요인(예: 배송비 및 결제 옵션)이 있지만 결제 페이지 자체도 한 몫을 합니다. 너무 복잡하거나 너무 길거나 너무 개인적인 정보가 필요한 경우 고객이 떠나 비슷한 제품을 다른 곳에서 구매할 수 있습니다.

결제 페이지를 최적화하는 한 가지 방법은 무엇입니까? 비즈니스 요구 사항 및 대상 고객을 기반으로 한 맞춤형 체크아웃 필드. 예: 일반적으로 회사에 판매하지 않는 경우 회사 이름 필드를 제거하십시오. 고객에게 생일 서프라이즈를 보내는 경우 생년월일 필드를 포함하십시오. 애완 동물 제품을 판매하는 경우 애완 동물 유형 을 묻는 것이 합리적일 수 있습니다.

이 기사에서는 대상 고객과 비즈니스 모두의 요구 사항을 충족하도록 결제 페이지를 사용자 지정하는 방법을 안내합니다.

체크아웃 필드 수정

WooCommerce는 결제 페이지의 모든 필수 필드를 제공합니다. 기본적으로 고객에게 다음을 요구합니다.

  • 결제 세부 정보
  • 이름
  • 성
  • 회사 이름
  • 국가
  • 주소
  • 타운/시
  • 구역
  • 우편번호/우편번호
  • 핸드폰
  • 이메일 주소
  • 주문 메모

다음을 포함하여 페이지를 사용자 정의하는 방법에는 여러 가지가 있습니다.

  • 디자인 편집
  • "주문하기" 버튼의 텍스트 변경
  • 필드 제거
  • 필드를 필수(또는 필수가 아님)로 만들기
  • 입력 필드 레이블 및 자리 표시자 텍스트 변경
  • 고객의 계좌번호 수집
  • 배달 기본 설정 확인
  • 고객이 배송 날짜 또는 마감일을 요청할 수 있도록 허용
  • 선호하는 연락 방법 설정

이것들은 당신이 만들 수 있는 몇 가지 사용자 정의일 뿐입니다. WooCommerce는 모든 경험 수준에 거의 무한한 유연성을 제공합니다. 코드 편집에 익숙하다면 코드 조각으로 사용자 정의할 수 있습니다. 좀 더 많은 구조를 선호한다면 체크아웃 필드를 편집하기 위한 다양한 확장과 플러그인이 있습니다.

코드 조각을 사용하여 결제 필드 사용자 지정

참고: 코드에 익숙하지 않고 잠재적인 충돌을 해결하는 경우 WooExpert 또는 개발자를 선택하여 도움을 받으세요. 지원 정책에 따라 사용자 지정에 대한 지원을 제공할 수 없습니다.

코드 스니펫은 개발자와 상점 소유자가 WooCommerce 체크아웃 필드를 사용자 정의할 수 있는 유연한 방법입니다. 다음은 결제 페이지의 시각적 디자인을 사용자 지정하는 데 사용할 수 있는 클래스 및 ID를 포함한 기본 태그 목록입니다. 사용자 지정 CSS를 자식 테마 또는 WordPress Customizer에 추가합니다.

모든 클래스와 선택기를 보려면 웹사이트에서 브라우저의 검사기를 사용하여 사용자 정의하려는 정확한 영역을 찾으십시오.

 <body class="woocommerce-checkout"> <div class="woocommerce"> <form class="woocommerce-checkout"> <div class="col2-set"> <div class="woocommerce-billing-fields"> <p class="form-row"> <div class="woocommerce-shipping-fields"> <p class="form-row"> <div class="woocommerce-additional-fields"> <div class="woocommerce-checkout-review-order"> <table class="woocommerce-checkout-review-order-table"> <div> <ul class="wc_payment_methods payment_methods methods"> <div class="form-row place-order">

예를 들어 텍스트 입력 상자의 배경색을 변경하고 모서리를 둥글게 하려면 다음을 추가합니다.

 input[type="text"] { border-radius: 10px !important; background-color: #222 !important; }

결제 필드 제거:

이것은 매우 간단 하지만 이 변경으로 인해 다른 확장 및 플러그인과 충돌이 발생할 수 있으므로 주의 하십시오.

자식 테마의 functions.php 파일에 다음 코드를 추가하세요. 전체 코드를 붙여넣으면 모든 코드가 제거됩니다. 체크아웃 페이지에서 필드를 제거할 수 있으므로 제거하려는 필드만 포함해야 합니다.

 /** Remove all possible fields **/ function wc_remove_checkout_fields( $fields ) { // Billing fields unset( $fields['billing']['billing_company'] ); unset( $fields['billing']['billing_email'] ); unset( $fields['billing']['billing_phone'] ); unset( $fields['billing']['billing_state'] ); unset( $fields['billing']['billing_first_name'] ); unset( $fields['billing']['billing_last_name'] ); unset( $fields['billing']['billing_address_1'] ); unset( $fields['billing']['billing_address_2'] ); unset( $fields['billing']['billing_city'] ); unset( $fields['billing']['billing_postcode'] ); // Shipping fields unset( $fields['shipping']['shipping_company'] ); unset( $fields['shipping']['shipping_phone'] ); unset( $fields['shipping']['shipping_state'] ); unset( $fields['shipping']['shipping_first_name'] ); unset( $fields['shipping']['shipping_last_name'] ); unset( $fields['shipping']['shipping_address_1'] ); unset( $fields['shipping']['shipping_address_2'] ); unset( $fields['shipping']['shipping_city'] ); unset( $fields['shipping']['shipping_postcode'] ); // Order fields unset( $fields['order']['order_comments'] ); return $fields; } add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

참고: 국가 필드는 필수 입니다. 제거하면 주문을 완료할 수 없으며 체크아웃 양식에 "계속하려면 주소를 입력하십시오."라는 오류가 표시됩니다.

필수 필드를 필수가 아닌 것으로 설정:

아래 예에서는 Billing Phone 필드를 편집합니다. 이 코드를 자식 테마의 functions.php 파일에 추가하세요.

 add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field'); function wc_unrequire_wc_phone_field( $fields ) { $fields['billing_phone']['required'] = false; return $fields; }

또는 필드를 필수 필드로 만들려면 "false" 텍스트를 " true "로 변경합니다.

입력 필드 레이블 및 자리 표시자 변경:

하위 테마의 functions.php 파일에 다음 코드를 추가하고 필요에 맞게 사용자 정의하십시오.

 add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields'); function custom_override_checkout_fields($fields) { unset($fields['billing']['billing_address_2']); $fields['billing']['billing_company']['placeholder'] = 'Business Name'; $fields['billing']['billing_company']['label'] = 'Business Name'; $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name'; $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; $fields['billing']['billing_last_name']['placeholder'] = 'Last Name'; $fields['billing']['billing_email']['placeholder'] = 'Email Address '; $fields['billing']['billing_phone']['placeholder'] = 'Phone '; return $fields; }

플러그인으로 체크아웃 필드 사용자 정의

WooCommerce는 코드 한 줄을 건드리지 않고도 결제 필드를 편집할 수 있는 몇 가지 뛰어난 확장 기능을 제공합니다.

체크아웃 필드 편집기

체크아웃 필드 편집기 확장을 사용하면 몇 번의 클릭으로 체크아웃 필드를 추가 및 제거하거나 유형, 레이블 및 자리 표시자 값을 업데이트할 수 있습니다. 각 체크아웃 필드를 "필수" 또는 "필수 아님"으로 표시할 수도 있습니다.

Checkout 필드 편집기 옵션의 스크린샷

새 필드를 추가할 때 다음 유형 중에서 선택할 수 있습니다.

  • 텍스트 – 표준 텍스트 입력
  • 비밀번호 – 비밀번호 텍스트 입력
  • Textarea – 텍스트 영역 필드
  • 선택 – 드롭다운/선택 상자
  • 다중 선택 – 다중 선택 상자
  • 라디오 – 라디오 입력 세트
  • 체크박스 – 체크박스 필드
  • 날짜 선택기 – 날짜 선택기가 연결된 텍스트 필드
  • 표제 - 더 긴 페이지를 구성하기 위한 표제

제품이 일반적으로 선물로 제공되는 경우 여러 포장 옵션을 제공할 수 있습니다. 라디오 버튼을 사용하여 고객이 일반 포장, 생일 테마 포장 또는 기념일 테마 포장 중에서 선택할 수 있습니다. 이 필드를 필수로 만들고 레이블을 "패키지 유형 선택"으로 설정하고 자리 표시자를 "일반"으로 설정할 수 있습니다.

고급 사용자 정의를 지원하기 위해 Checkout Field Editor는 유용한 문서를 제공합니다.

WooCommerce Checkout 추가 기능

WooCommerce Checkout 추가 기능 확장을 사용하면 결제 시 러시 주문 처리, 선물 포장 또는 스티커나 보험과 같은 상향 판매와 같은 무료 또는 유료 추가 기능을 유연하게 제공할 수 있습니다. 체크아웃 페이지에 텍스트 필드, 텍스트 영역, 드롭다운, 다중 선택, 라디오 버튼, 확인란, 다중 확인란 및 파일 업로드를 포함하여 여러 필드 유형을 추가할 수 있습니다.

체크아웃 페이지에 표시된 체크아웃 추가 기능

대시보드에서 생성한 옵션에 따라 주문을 정렬하고 필터링할 수도 있습니다. 이는 배송 날짜별로 주문의 우선 순위를 지정하거나 신속 처리가 포함된 주문만 표시하려는 경우에 유용할 수 있습니다. 또는 선물 포장 주문을 동시에 포장하고 싶을 수도 있습니다.

WooCommerce 한 페이지 결제

결제 프로세스를 더욱 간소화하고 싶으십니까? WooCommerce One Page Checkout 확장 프로그램은 모든 페이지를 결제 페이지로 바꿉니다.

Baymard Institute의 연구에 따르면 쇼핑객 4명 중 1명은 지난 분기에 길고 복잡한 체크아웃 프로세스로 인해 장바구니를 포기했습니다. WooCommerce One Page Checkout은 고객이 장바구니에 제품을 추가하고 동일한 페이지에서 결제를 제출할 수 있도록 하여 이 문제를 해결합니다.

방문 페이지에 체크아웃 필드를 추가 할 수도 있습니다. 이는 서비스 기반 비즈니스인 경우 특히 유용합니다.

WooCommerce 소셜 로그인

고객이 귀하의 웹사이트에서 계정을 만들도록 강요하는 것은 구매에 대한 잠재적 장벽입니다. 기존 소셜 미디어 프로필을 사용하여 계정을 만들 수 있는 기능을 제공하면 이러한 장벽을 허무는 데 도움이 됩니다.

고객 로그인 페이지의 WooCommerce 소셜 로그인 프롬프트

WooCommerce 소셜 로그인 확장 프로그램을 사용하면 이 프로세스를 최대한 쉽고 안전하게 할 수 있습니다. 고객은 새 로그인 정보를 만드는 대신 Facebook, Twitter, Google, Amazon, LinkedIn, PayPal, Instagram, Disqus, Yahoo 또는 VK 계정을 사용하여 사이트에 로그인할 수 있습니다.

커스터마이징 시작

결제 프로세스는 전환율에 상당한 영향을 미칠 수 있으므로 특정 목표를 염두에 두고 신중하게 변경해야 합니다.

고맙게도 WooCommerce는 온라인 고객에게 최상의 서비스를 제공하기 위해 결제 프로세스를 맞춤화할 수 있는 유연성을 제공합니다. 시각적 변경을 수행해야 하거나 체크아웃 필드를 추가 및 제거해야 하는 경우 선택할 수 있는 솔루션이 많이 있습니다.