WooCommerce 결제 페이지에 사용자 정의 필드를 추가하는 방법
게시 됨: 2020-07-21결제를 사용자 정의 하시겠습니까? 이 가이드에서는 WooCommerce의 결제 페이지에 사용자 정의 필드를 추가하여 상점을 한 단계 업그레이드하는 방법을 보여줍니다.
WooCommerce 결제를 사용자 정의하는 이유는 무엇입니까?
QuadLayers에서 우리는 이전에 WooCommerce에서 상점 페이지를 사용자 정의하는 방법을 보았습니다. 오늘은 동일한 작업을 수행하고 결제에 사용자 정의 필드를 포함하는 방법을 살펴보겠습니다. 결제는 모든 온라인 상점에서 가장 중요한 페이지 중 하나입니다. 고객이 구매를 완료하고 판매를 종료하도록 고객을 데려가려는 곳입니다. 따라서 전환율과 수익을 개선하려면 사용자 정의 필드로 결제를 최적화하는 것이 필수입니다.
완벽한 결제 페이지는 어떻습니까? 이는 귀하의 비즈니스에 따라 크게 달라집니다. 예를 들어 실제 제품의 결제는 디지털 제품의 결제와 다릅니다. 한 페이지 또는 여러 페이지 체크아웃을 선택하고, 필드를 표시하거나 숨기고, 다른 색상을 사용하는 등의 작업을 수행합니다. 그러나 가장 중요한 것은 결제가 사용자에 대한 신뢰를 생성하고 방해 요소가 없으며 쇼핑객이 가능한 한 적은 시간을 소비하도록 최적화되어 있다는 것입니다.
WooCommerce 결제 페이지에 사용자 정의 필드를 추가하는 방법은 무엇입니까?
WooCommerce의 결제 페이지에서 사용자 정의 필드를 추가하거나 숨기는 두 가지 주요 방법이 있습니다.
- 플러그인 사용
- 프로그래밍 방식으로
코딩 기술이 없는 경우 다음 플러그인을 확인하는 것이 좋습니다.
- WooCommerce Direct Checkout : 결제 프로세스를 단순화하고 사용자를 제품 페이지에서 결제로 리디렉션하는 훌륭한 도구입니다. 19 USD부터 시작하는 무료 버전과 프리미엄 플랜이 있습니다.
- WooCommerce Checkout Manager : 90,000개 이상의 활성 설치가 있는 Checkout Manager는 전환율을 높이는 훌륭한 플러그인입니다. 체크아웃 페이지에서 필드를 추가, 사용자 정의 및 삭제할 수 있습니다. 무료 버전과 19달러의 프로 플랜이 포함된 프리미엄 도구입니다.
이러한 체크아웃 플러그인은 탁월한 선택이며 작업을 원활하게 완료합니다. 그러나 플러그인을 설치하지 않으려면 솔루션을 코딩할 수 있습니다. 이 가이드에서는 일부 코딩을 사용하여 WooCommerce 체크아웃 페이지에 사용자 정의 필드를 추가하는 방법 에 중점을 둘 것입니다. 
프로그래밍 방식으로 WooCommerce 체크아웃에 사용자 정의 필드 추가
이 섹션에서는 프로그래밍 방식으로 WooCommerce 체크아웃 페이지에 사용자 정의 필드를 추가하는 방법을 배웁니다. 다음을 포함하는 방법을 보여드리겠습니다.
- 텍스트
- 체크박스
- 라디오 입력 유형
추가할 수 있는 다른 사용자 정의 필드가 있지만 일부 유형의 유효성 검사가 필요할 수 있습니다. 따라서 이 자습서에서는 이러한 3가지 유형에 중점을 두고 입력된 값의 유효성 검사가 필요한 필드를 건너뜁니다. 또한 백엔드 주문 목록 및 이메일 템플릿에 사용자 정의 필드를 표시할 예정입니다.
참고 : 프로젝트에 다른 필드를 추가하려면 보안 유효성 검사를 구현해야 합니다.
따라서 WooCommerce 결제 페이지에 사용자 정의 필드를 추가하려면 두 가지 옵션이 있습니다.
- 자식 테마에서 스크립트를 코딩할 수 있습니다.
- 사용자 정의 플러그인 만들기
보다 확장 가능하고 잘 구성된 솔루션을 구축하기 위해 사용자 지정 플러그인을 만듭니다 . 또한 하위 테마 접근 방식과 달리 사용자 정의 플러그인도 추가 개발의 시작점이 될 수 있습니다. 그러나 하위 테마를 사용하고 싶다면 이 가이드를 확인하는 것이 좋습니다.
사용자 정의 플러그인을 사용하여 WooCommerce 결제에 사용자 정의 필드 추가
우리가 만들 사용자 정의 플러그인에는 세 개의 파일이 있습니다.
- 기본
- 프론트엔드
- 백엔드
기본 파일은 프런트 엔드 스크립트에 사용할 프런트 엔드 파일의 게이트웨이 입구 역할을 합니다. 또한 백엔드 스크립트가 있는 세 번째 파일을 포함합니다. 이 프론트 엔드 파일이 기본 기본 파일이 되며 더 많은 클래스를 추가하는 경우 하위 수준 계층 파일(백엔드 파일과 마찬가지로)로 이동해야 합니다. 이제 사용자 정의 플러그인을 사용하여 WooCommerce 결제 페이지에 사용자 정의 필드를 추가하는 방법을 살펴보겠습니다.
1. 즐겨 사용하는 IDE를 열고 세 개의 파일이 있는 폴더를 만듭니다.
QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php(프론트엔드 파일) /__/__class_qlccf_back.php(백엔드 파일) /__QuadLayers_checkout_fields.php(메인 파일)
2. 메인 파일
기본 파일은 QuadLayers_checkout_fields.php .
<?php
/**
* @링크 https://quadlayers.com/
* @1.0.0부터
* 플러그인 이름: QuadLayers Checkout 사용자 정의 필드
* 플러그인 URI: https://quadlayers.com/
* 설명: WooCommerce 체크아웃 페이지에서 사용자 정의 필드를 생성하고 백엔드 주문 및 이메일 템플릿에서 인쇄하는 플러그인
* 버전: 1.0.0
* 저자: Sebastopolys
* 저자 URI: https://quadlayers.com/
* 텍스트 도메인: qlccf
*/
if(!정의('ABSPATH')){다이('-1');}
elseif(!class_exists('run_init')){
최종 수업 run_init{
공개 정적 함수 실행(){
return include_once plugin_dir_path( __FILE__ ).'classes/class_qlccf_base.php';
}
}
run_init::run();
}
또 다른{
echo "<h3>오류 - QuadLayers_checkout_fields.php의 기존 run_init 클래스 !</h3>";
}
플러그인 정보, 기능, 파일명을 변경하여 직접 넣을 수 있습니다. 그러나 작동 방식을 더 잘 이해할 수 있도록 아무 것도 편집하지 않고 스크립트를 먼저 복사하여 붙여넣는 것이 좋습니다.
3. 프런트 엔드 클래스 파일
프런트 엔드 파일은 class_qlccf_base.php 입니다. 이것은 메인 클래스가 있는 곳이며 무제한의 클래스와 함수를 포함할 수 있습니다. 추상 클래스는 인스턴스화할 수 없으므로 다른 클래스에 상속되어야 합니다. 다음은 프론트 엔드 파일과 코드 뒤의 자세한 설명입니다.
<?php
if(!정의('ABSPATH')){다이('-1');}
elseif(!class_exists('base_class')){
추상 클래스 base_class{
public const VERS = '1.1.0';// <-- 플러그인 버전
public const PREFIX = 'qlccf';// <-- 플러그인 접두어
public const PLDIR = __DIR__ ;// <-- 플러그인 디렉토리 경로
public const PLPAT = __FILE__ ;// <-- 파일 경로
공개 함수 add_base_hooks(){
add_action( 'woocommerce_after_order_notes', array($this,'quadlayers_subscribe_checkout' ));
add_action('woocommerce_after_checkout_billing_form',array($this,'quadlayers_email_checkout'));
add_action('woocommerce_before_order_notes', array($this,'quadlayers_radio_checkout'));
add_action( 'woocommerce_checkout_update_order_meta',array($this, 'quadlayers_save_function' ));
}
//우커머스 체크아웃에 체크박스 삽입 - 후크: after_order_notes
공개 기능 quadlayers_subscribe_checkout( $checkout ) {
woocommerce_form_field( '첨자', 배열(
'유형' => '확인란',
// '필수' => 참,
'클래스' => array('사용자 정의 필드 양식 행 너비'),
'label' => ' 뉴스레터를 구독하세요.'
), $checkout->get_value( '첨자' ) );
}
// 결제 우커머스에 텍스트 삽입 - 후크: after_billing_form
공개 기능 quadlayers_email_checkout($checkout2){
woocommerce_form_field( 'altmail', 배열(
'유형' => '이메일',
// '필수' => 참,
'클래스' => array('사용자 정의 필드 양식 행 너비'),
'label' => ' 대체 이메일.'
), $checkout2->get_value( 'altmail' ) );
}
// 체크아웃 woocommerce에 라디오 사용자 정의 필드 삽입 - hook: before_order_notes
공개 기능 quadlayers_radio_checkout($checkout3){
woocommerce_form_field( '피드', 배열(
'유형' => '라디오',
// '필수' => 참,
'클래스' => array('사용자 정의 필드 양식 행 너비'),
'label' => ' 우리를 어떻게 찾았어요?.',
'옵션' => 배열(
'구글' => '구글',
'친구' => '친구',
'페이스북' => '페이스북',
'유튜브' => '유튜브',
'기타' => '기타'
)
));
}
// 모든 사용자 정의 필드 값을 저장합니다.
공개 기능 quadlayers_save_function( $order_id ){
if ( ! 빈( $_POST['첨자'] ) ) {
update_post_meta( $order_id, '수첨자', 위생 텍스트_필드( $_POST['수첨자'] ) );
}
if ( ! 빈( $_POST['altmail'] ) ) {
update_post_meta( $order_id, 'altmail',sanitize_text_field( $_POST['altmail'] ) );
}
if ( ! empty( $_POST['피드'] ) ) {
update_post_meta( $order_id, '피드',sanitize_text_field( $_POST['피드'] ) );
}
}
}// 백엔드 클래스 포함
include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
또 다른{
echo "<h3>초기화 오류 - 기존 base_class 클래스 !</h3>";
}
클래스를 선언한 후 나중에 사용할 수 있는 몇 가지 상수를 정의합니다. 그런 다음 add_base_hooks() 라고 하는 단일 메서드에 사용할 모든 WooCommerce 후크를 포함합니다.
추상 클래스는 인스턴스화할 수 없기 때문에 백엔드 파일에서 이 메서드를 실행하여 여기에 선언된 모든 후크를 실행합니다. 우리는 다른 작업을 위해 각각의 후크를 사용하고 각각에 다음 방법 중 하나를 할당합니다. 예를 들어 이 후크: add_base_hooks () 메서드의 woocommerce_after_order_notes 는 base_class 클래스 내에 정의된 quadlayers_subscribe_checkout() add_base_hooks() 메서드를 실행합니다.
WordPress 및 WooCommerce 기능 중 일부를 사용하는 방법에 유의하십시오. woocommerce_form_field() 체크아웃 양식에 사용자 정의 필드를 출력합니다. update_post_meta() 이 WordPress 기본 함수는 게시물, 제품 및 기타 사용자 정의 게시물 유형의 데이터베이스 메타데이터를 업데이트하는 데 널리 사용됩니다. 또한 사용 가능한 입력 필드 유형은 다음과 같습니다.
| 텍스트 | 선택하다 | 라디오 |
| 비밀번호 | 날짜 시간 | datetime-local |
| 데이트 | 월 | 시각 |
| 주 | 숫자 | 이메일 |
| URL | 전화 |
4. 백엔드 파일, class_qlccf_back.php
여기서 qlccf_back_class 클래스는 class_qlccf_base.php file 에 이전에 정의된 base_class 를 상속합니다.
<?php
if(!정의('ABSPATH')){다이('-1');}
if(!class_exists('qlccf_back_class')):
클래스 qlccf_back_class 확장 base_class{
공개 함수 __construct(){
부모::add_base_hooks();
if(is_admin()):
add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_checkbox'));
add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_email'));
add_action( 'manage_shop_order_posts_custom_column',array($this, 'qlccf_column_content'));
add_action( 'woocommerce_email_order_meta',array($this,'qlccf_email_template'));
엔디프;
}
# 백엔드 주문 목록에 사용자 정의 필드 값 표시
공개 함수 qlccf_column_content($column){
글로벌 $post;
if ( '첨자' === $column ) { # 체크박스
$order = wc_get_order( $post->ID );
$c_meta = $order->get_meta('첨자');
if($c_meta==1):$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png';
else:$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png';
엔디프;
echo '<img src="'.$img_url.'"/>';
}
elseif('altmail' === $column ){ # 대체 메일
$order = wc_get_order( $post->ID );
$e_meta = $order->get_meta('altmail');
에코 $e_meta;
}
또 다른{}
}
# 체크박스의 컬럼 설정
공개 함수 qlccf_checkbox($columns){
$columns['첨자'] = __( '첨자');
$ 열 반환;
}
# 대체 메일의 열 설정
공개 기능 qlccf_email($columns1){
$columns1['altmail'] = __( '대체 메일');
$columns1 반환;
}
# WC 이메일 탬플레이트에 Alt Mail 필드 포함
공개 기능 qlccf_email_template($order_obj){
$is_set = get_post_meta( $order_obj->get_order_number());
// 사용자 정의 필드가 설정되지 않은 경우 반환
if( 빈( $is_set ) )
반품;
// 좋아, 계속해서 사용자 정의 필드를 에코합니다.
$alt_email = get_post_meta( $order_obj->get_order_number(), 'altmail', true );
echo '<h2>내 사용자 정의 필드</h2><p>대체 이메일:'.$alt_email.'</p>';
}
}
$run=새로운 qlccf_back_class;
엔디프;
이 파일에서는 다른 파일에서 설명한 프런트 엔드 후크를 실행하기 위한 생성자를 정의합니다. 그런 다음 조건부 if() 및 WordPress 함수 is_admin() 을 사용하여 백엔드 주문 목록 및 WooCommerce 이메일 템플릿에 사용자 정의 필드를 표시하는 데 필요한 후크를 추가하여 사용자가 관리 백엔드 화면에 있는 경우에만 적용합니다. manage_shop_order_posts_custom_column() 후크는 주문 목록에 열을 삽입하므로 qlccf_column_content() 함수에서 필드를 표시할 수 있습니다.
WooCommerce 루프에 연결되면 필드 이름이 사용자 정의 필드 중 하나에 속하는지 확인하고, 그렇다면 인쇄합니다. 조건부 if()else를 사용하여 동일한 함수에서 모든 사용자 정의 필드를 확인할 수 있습니다.
그런 다음 백엔드 주문 목록에 확인란과 텍스트 사용자 정의 필드 열을 만듭니다. 고객이 결제 프로세스를 완료하고 주문이 생성되면 사용자 정의 WooCommerce 필드를 표시하도록 사용자 정의 열을 설정해야 합니다.
마지막으로, 마지막 방법에서 woocommerce_email_order_meta 후크를 사용하여 관리자 이메일 템플릿에 사용자 정의 텍스트 필드를 표시합니다. 사용된 WordPress 및 WooCommerce 기능:
wc_get_order() : 모든 데이터가 첨부된 현재 주문 객체를 가져옵니다.
get_meta() : 주문의 메타데이터를 가져오기 위해
get_post_meta() : 데이터베이스에 저장된 사용자 정의 필드 값을 가져옵니다.
get_order_number() : 현재 주문의 id 번호를 얻으려면 
마무리
대체로 모든 온라인 상점에서 체크아웃 페이지를 사용자 정의하는 것은 필수입니다. 이 가이드에서는 약간의 코딩으로 프로그래밍 방식으로 WooCommerce 체크아웃 페이지에 사용자 정의 필드를 추가하는 방법을 보여주었습니다. 결제를 최적화하기 위해 사용자 정의 플러그인을 단계별로 만드는 방법을 배웠습니다.
또한 결제 페이지를 사용자 지정하고 다음 단계로 이동하려면 이 단계별 가이드를 확인하는 것이 좋습니다.
이 방법을 시도해 보셨습니까? 개선할 수 있는 방법을 생각해 볼 수 있습니까? 아래 댓글 섹션에서 경험을 공유해 주세요!
WooCommerce에서 전환을 개선하려면 다음 가이드를 살펴보는 것이 좋습니다.
- WooCommerce를 위한 최고의 빠른 구매 버튼
- WooCommerce에서 결제를 최적화하는 방법
- 코딩을 통해 WooCommerce에서 쇼핑 페이지를 편집하는 방법은 무엇입니까?