WooCommerce 체크아웃 페이지를 사용자 정의하는 2가지 효과적인 방법

매년 전자 상거래 브랜드는 장바구니 포기로 인해 180억 달러의 판매 수익을 잃습니다. 근본 원인 중 하나는 복잡한 결제 프로세스에 있습니다.

체크아웃 페이지는 브라우저를 고객으로 만드는 최종 관문 역할을 합니다. 이상적인 결제 페이지는 처음부터 끝까지 사용자의 원활한 거래를 보장해야 합니다. 더 많은 전환을 유도하고 매장의 수익을 개선하려면 WooCommerce 체크아웃 페이지를 최적화하는 것이 필수입니다!

이 기사에서는 WooCommerce 결제 페이지를 사용자 정의해야 하는 이유를 설명합니다. 또한 체크아웃 페이지의 스타일을 지정하고 활용하는 2가지 효과적인 방법도 제공됩니다.

시작하자!

• WooCommerce 체크아웃 페이지 알아보기
• WooCommerce 결제 페이지를 사용자 정의해야 하는 이유
• 코드로 WooCommerce 체크아웃 페이지를 수동으로 사용자 정의하는 방법
• 플러그인을 사용하여 WooCommerce 체크아웃 페이지 편집

WooCommerce 체크아웃 페이지 알아보기

기본적으로 WooCommerce 체크아웃 페이지는 다소 둔하고 단순해 보입니다. 그 의무는 쇼핑객이 이름과 성, 주소, 전화 번호, 이메일 주소, 주문 메모 및 청구 세부 정보 등을 포함한 일부 기본 정보를 입력하도록 요구하는 것입니다.

이러한 세부 정보는 웹 사이트에서 결제 데이터를 처리하고 고객이 구매를 완료하는 데 필수적이지만 전환을 높이거나 장바구니 포기를 줄이는 데 도움이 되지는 않습니다.

게다가 기본 체크아웃 페이지는 주요 정보를 대상으로 하지 않으며 전략적인 순서를 제시하지 않습니다. 그렇기 때문에 디자인과 콘텐츠 모두에서 체크아웃 페이지에 약간의 수정을 가해야 합니다.

WooCommerce 체크아웃 페이지를 사용자 정의하는 효과적인 2가지 방법에 대해 알아보기 전에 체크아웃 페이지 사용자 정의의 이점에 대해 더 논의해 보겠습니다.

WooCommerce 결제 페이지를 사용자 정의해야 하는 이유

첫 번째이자 가장 중요한 이점은 빠르고 쉬운 구매를 제공하여 고객에게 원활한 온라인 쇼핑 경험을 제공하는 것입니다.

체크아웃 페이지를 사용자 지정하면 모든 보풀을 제거하고 필수 세부 사항에만 집중할 수 있습니다. 고객에게 여러 페이지에 많은 필드 입력이 있는 체크아웃 프로세스를 완료하도록 요청하면 고객의 힘이 바닥날 수 있습니다. 이것은 페이지 드롭오프의 높은 기회로 이어질 것입니다.

또한 WooCommerce 체크아웃 페이지를 사용자 정의하려고 하면 상점에 독특하고 전문적인 모양과 느낌을 줄 수 있습니다. 기본값을 유지하면 사이트가 수천 개의 WooCommerce 매장 사이에 돌처럼 가라앉게 됩니다. 디자인을 포함하여 체크아웃 페이지를 최적화하면 상점이 군중에서 눈에 띄고 고객에게 감동을 줄 것입니다.

대체로 이러한 아이디어는 카트 포기를 죽이는 동일한 목표를 위해 작동하고 있습니다.

오프라인 매장의 구매자는 장바구니를 거의 버리지 않지만 온라인 장바구니는 포기하는 경우가 많습니다. 여기서 체크아웃 페이지의 평균 장바구니 포기율은 87%에 달합니다.

그리고 Baymard 연구소의 조사에 따르면, 체크아웃 도중 포기하는 이유 중 너무 길거나 복잡한 체크아웃 프로세스가 27%를 차지합니다.

결과적으로 장바구니 이탈률을 줄이려면 "결제 전" 프로세스에서 사용자 경험에 주의를 기울여야 합니다.

다음과 같이 더 나은 사용자 경험을 제공하는 다양한 방법이 있습니다.

• 결제 템플릿 및 디자인 변경
• 필드 추가, 제거 및 재정렬
• 필수 필드를 선택 사항으로 만들기
• 자리 표시자 및 레이블 최적화
• 무료 배송 비용 유발
• 한 페이지 결제 만들기

이 튜토리얼에서는 체크아웃 필드 최적화에 집중할 것입니다. 코드가 있거나 없는 WooCommerce 체크아웃 페이지를 사용자 정의하는 방법을 알아보려면 다음 섹션을 계속 읽으십시오.

코드로 WooCommerce 체크아웃 페이지를 수동으로 사용자 정의하는 방법

WordPress 기술에 정통하고 PHP 파일과 Javascript를 만질 때 자신감이 있다면 사용자 정의 코드를 사용하여 결제 페이지를 자유롭게 편집할 수 있습니다.

자리 표시자 텍스트 변경, 필드 추가 및 제거, 필수 필드 선택 사항을 포함하여 결제 필드를 편집할 수 있는 몇 가지 코드 스니펫을 제공합니다. 걱정하지 마십시오. 당신의 두뇌를 이길 수 없습니다!

체크아웃 필드 편집

사이트의 functions.php 파일과 WooCommerce 필터를 사용하여 체크아웃 필드를 편집합니다. 모를 수도 있지만 WooCommerce는 체크아웃 필드를 원하는 대로 사용자 정의할 수 있는 작업 및 필터 목록을 제공합니다.

• woocommerce_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields
• woocommerce_checkout_before_order_review
• woocommerce_checkout_before_customer_details
• woocommerce_after_checkout_form

다음으로 woocommerce_checkout_fields 필터를 사용하면 모든 필드를 재정의할 수 있으므로 이 필터에 연결하고 표시된 텍스트를 변경하고 필드를 완전히 추가 및 제거하는 방법을 보여 드리겠습니다.

자리 표시자 텍스트 변경

order_comments 필드의 자리 표시자 텍스트를 변경한다고 가정합니다. 기본적으로 다음과 같이 표시됩니다.

 _x('주문에 대한 메모, 예: 배송을 위한 특별 메모.', 'placeholder', 'woocommerce')

이를 변경하려면 다음 코드 스니펫을 functions.php 파일에 추가하세요.

 // 후크

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// 후크 인 함수 - $fields는 필터를 통해 전달됩니다!

기능 custom_override_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = '내 새 자리 표시자';

반환 $ 필드;

WooCommerce 결제 페이지에 필드 추가

1. 다음 코드를 function.php 파일에 삽입하여 체크아웃 페이지 편집을 시작하십시오.

 <?php

/**

* 결제 페이지에 필드 추가

*/

add_action('woocommerce_after_order_notes', 'customise_checkout_field');

기능 customise_checkout_field($checkout)

{

에코 '<div><h2>' . __('제목') . '</h2>';

woocommerce_form_field('customised_field_name', 배열(

유형' => '텍스트',

'클래스' => 배열(

'내 필드 클래스 양식 행 전체'

),

'label' => __('추가 필드 사용자 정의') ,

'자리 표시자' => __('지침') ,

'필수' => 참,

) , $checkout->get_value('customised_field_name'));

에코 '</div>';

}

다음 코드를 추가하면 추가 필드가 결제 페이지에 표시됩니다.

2. 데이터 유효성 검사를 위해 아래 코드를 추가합니다.

 <?php

/**

* 결제 과정

*/

add_action('우커머스_체크아웃_프로세스', '맞춤설정_체크아웃_필드_프로세스');

기능 customise_checkout_field_process()

{

// 필드가 설정되어 있으면 오류 메시지를 표시합니다.

if (!$_POST['customised_field_name']) wc_add_notice(__('값을 입력하세요.') , '오류');

}

3. 체크아웃 페이지에 필드를 추가하고 유효성 검사를 완료했습니다. 이제 모든 고객 입력이 제대로 저장되었는지 확인해야 합니다.

다음 코드를 사용하여 수행할 수 있습니다.

 <?php

/**

* 필드 값 업데이트

*/

add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');

기능 customise_checkout_field_update_order_meta($order_id)

{

if (!empty($_POST['customised_field_name'])) {

update_post_meta($order_id, '일부 필드', Sanitize_text_field($_POST['customised_field_name']));

}

}

WooCommerce 결제 페이지에서 필드 제거

아래 주어진 코드를 사용하여:

 // 후크

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

 

// 후크 인 함수 - $fields는 필터를 통해 전달됩니다!

기능 custom_override_checkout_fields( $fields ) {

unset($fields['order']['order_comments']);

 

반환 $ 필드;

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

가상 제품을 판매하고 청구 섹션의 "주소" 필드를 선택 사항으로 만들고 싶다고 가정해 보겠습니다. 하위 테마의 functions.php 파일에 다음 코드를 추가하기만 하면 됩니다.

 add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');

기능 wc_address_field_optional( $fields ) {

$fields['billing']['billing_address_1']['필수'] = 거짓;

반환 $ 필드;

}

참고: function.php 파일에 남아 있는 실수로 인해 사이트가 비활성화될 수 있으므로 변경하기 전에 사이트를 백업해야 합니다. 자식 테마의 function.php 파일을 사용하는 위험 없는 방법을 권장합니다.

플러그인을 사용하여 WooCommerce 체크아웃 페이지 편집

전문가가 아닌 경우 강력한 플러그인의 도움을 받는 것이 항상 현명한 생각입니다.

수천 개의 WooCommerce 최적화 플러그인 중에서 WooCommerce Checkout Manager는 WooCommerce 체크아웃 페이지를 사용자 정의할 수 있는 핫샷입니다.

Quadlayers에서 개발한 이 무료이지만 강력한 플러그인은 확실히 테이블 위에 놓고 싶지 않은 플러그인입니다.

플러그인을 사용하면 필드를 포함/제외하고 필드를 필수/선택 사항으로 만들고 청구 데이터를 쉽게 확장하여 WooCommerce 체크아웃 페이지를 자유롭게 사용자 지정할 수 있습니다. 조건부 필드를 만들어 사용자 경험을 개선하고 매출을 높일 수 있습니다. 그 외에는 파일 업로드 유형의 수를 제한하지 않습니다. 고객이 수고 없이 다양한 유형의 파일을 업로드하도록 할 수 있습니다.

또한 메뉴에서 옵션을 활성화하기만 하면 모든 수정이 완료되므로 사용자 인터페이스도 엄지손가락을 치켜들어야 합니다.

그렇다면 WooCommerce Checkout Manager로 WooCommerce 결제 페이지를 최적화하는 방법은 무엇입니까?

#1 결제 페이지에 새 필드 추가

WooCommerce Checkout Manager를 사용하면 청구, 배송 및 추가 필드 섹션의 체크아웃 페이지에 대한 사용자 정의 필드를 생성할 수 있습니다.

플러그인을 설치하고 활성화한 후 관리 대시보드에서 WooCommerce > Checkout > Billing으로 이동합니다.

1. "새 필드 추가"를 선택합니다.
2. 필드 이름, 레이블 및 자리 표시자를 입력합니다.
3. 필드 유형을 선택합니다.
4. 모든 변경 사항을 업데이트하려면 "저장"을 누르십시오.
   

#2 결제 페이지에서 필드 삭제

"비활성화" 버튼을 토글하여 필드를 자유롭게 제거할 수 있습니다.

#3 체크아웃 필드 위치 재정렬

다음을 통해 결제 필드의 기본 순서를 변경합니다.

1. 이동하려는 필드에서 세로 3줄 버튼을 클릭합니다.
2. 해당 버튼을 누른 상태에서 필드를 원하는 위치로 끌어다 놓습니다.
3. 페이지 하단의 "변경 사항 저장"을 누르십시오.
   

지금 WooCommerce 체크아웃 페이지를 최적화하십시오!

WooCommerce 체크아웃 페이지를 수정하면 매장에 큰 변화를 줄 수 있으며 체크아웃 프로세스를 한 단계 끌어올릴 수 있습니다. 가장 작은 사용자 정의조차도 결제 프로세스의 속도를 높이고 쇼핑 경험을 향상하며 판매를 높일 수 있는 길을 열어줍니다.

이 게시물에서는 WooCommerce 결제 페이지를 사용자 지정하는 2가지 방법을 보여 주었습니다. 플러그인 솔루션을 선택하거나 function.php 파일에 코드 조각을 직접 삽입할 수 있습니다.

스토어에 최적화를 더 추가하려면 WooCommerce 제품 페이지에 사용자 정의 필드를 추가하는 방법에 대한 이 가이드에서 자세한 정보를 확인하세요.

WooCommerce 체크아웃 페이지 최적화에 대해 질문이 있는 경우 댓글을 남겨주시면 최대한 빨리 답변을 드리겠습니다.