온라인 상점을 구축할 때, 고객의 결제 과정 경험은 매우 중요합니다. 표준적인 WooCommerce 결제 양식은 인보이스 발행처 정보, 생일 축하 메시지, 특별한 배송 선호 사항 등과 같은 모든 비즈니스 요구사항을 충족시키지 못할 수 있습니다. 이러한 경우, 사용자 정의 결제 필드가 강력한 확장 도구로 활용될 수 있습니다. 사용자 정의 결제 필드를 통해 고객 경험의 개인화 수준을 높일 수 있을 뿐만 아니라, 판매자가 중요한 비즈니스 데이터를 수집하여 서비스와 마케팅 전략을 최적화하는 데에도 도움을 받을 수 있습니다.
WordPress의 훅 시스템과 WooCommerce가 제공하는 풍부한 API를 활용하면, 개발자는 결제 페이지의 다양한 위치에(예: “청구 주소” 및 “배송 주소” 영역 뒤, 또는 새로운 블록을 생성하는 곳에도) 텍스트 입력 필드, 드롭다운 선택 목록, 라디오 버튼, 체크박스와 같은 다양한 유형의 필드를 상대적으로 쉽게 추가할 수 있습니다. 이 과정은 단순히 프론트엔드의 디자인을 구현하는 것에 그치지 않습니다; 더 중요한 것은 백엔드에서의 데이터 처리 과정입니다. 즉, 사용자가 입력한 데이터가 정확하고 안전하게 주문 정보에 저장되도록 보장하며, 이 데이터가 백오피스 관리 인터페이스, 사용자 계정 페이지, 그리고 주문 알림 이메일에 명확하게 표시되도록 하는 것이 필수적입니다.
커스텀 결제 필드의 구현 방법
WooCommerce는 결제 정보를 처리하기 위해 두 가지 주요 유형의 훅(hook)을 제공합니다:woocommerce_checkout_fields 그리고 woocommerce_checkout_update_order_meta전자는 필드를 정의하고 렌더링하는 데 사용되며, 후자는 필드 데이터를 저장하는 데 사용됩니다.
추천 읽기 WordPress 플러그인 개발: 초보자부터 전문가까지, 자신만의 독특한 기능을 만드는 방법을 단계별로 안내합니다.。
후크를 사용하여 필드를 추가합니다.
가장 핵심적인 단계는 다음과 같습니다: woocommerce_checkout_fields 필터 후크를 사용하여 사용자 정의 필드를 결제 정보 배열에 추가하세요. 이 배열은 구조가 명확하여 해당 필드들을 “청구서” 정보에 쉽게 포함시킬 수 있습니다.billing“배송(Delivery)”shipping“Order Remarks”order기존의 파티션들뿐만 아니라, 사용자 정의 파티션도 생성할 수 있습니다.custom）。
다음 코드 예제는 “청구서” 정보 영역의 하단에 “회사 세금 번호” 텍스트 필드와 “인보이스 필요 여부”를 선택할 수 있는 라디오 버튼을 추가하는 방법을 보여줍니다.
/**
* 在结账页面添加自定义字段
*/
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {
// 在“账单”字段组中添加一个“公司税号”文本字段
$fields['billing']['billing_vat_number'] = array(
'label' => __( '公司税号 / VAT Number', 'your-text-domain' ),
'placeholder' => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
'required' => false, // 非必填
'class' => array( 'form-row-wide' ), // 宽度样式
'clear' => true, // 清除浮动
'priority' => 25, // 显示顺序，数字越小越靠前
);
// 在“账单”字段组中添加一个“是否需要发票”单选框
$fields['billing']['billing_invoice_needed'] = array(
'type' => 'radio',
'label' => __( '是否需要纸质发票？', 'your-text-domain' ),
'required' => true,
'class' => array( 'form-row-wide' ),
'clear' => true,
'priority' => 30,
'options' => array(
'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
'no' => __( '否，不需要', 'your-text-domain' )
)
);
return $fields;
}필드 데이터의 유효성을 검증하고 저장합니다.
필드를 추가한 후에는 사용자가 입력한 데이터가 해당 주문 메타데이터에 저장되도록 반드시 확인해야 합니다. 이를 위해서는 다음과 같은 단계를 거쳐야 합니다: woocommerce_checkout_update_order_meta 이 기능은 액션 훅(Action Hook)을 사용하여 구현됩니다. 사용자가 주문을 제출하면 WooCommerce가 이 훅을 실행하며, 이 시점에 사용자 정의 필드의 값을 가져와 저장할 수 있습니다.
/**
* 保存自定义结账字段的值到订单元数据
*/
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {
if ( ! empty( $_POST['billing_vat_number'] ) ) {
// 使用 sanitize_text_field 进行清洁处理，防止恶意代码
update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
}
if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
}
}백엔드와 이메일에 필드 데이터를 표시합니다.
데이터를 단순히 저장하는 것만으로는 충분하지 않습니다. 판매자는 백엔드에서 주문을 관리할 때 이러한 정보를 확인해야 하며, 고객 역시 주문 확인 이메일과 “내 계정” 페이지에서 자신이 입력한 내용을 볼 수 있어야 합니다.
백엔드 주문 편집 페이지에 표시됩니다.
It is possible to do so. woocommerce_admin_order_data_after_billing_address 유사한 후크를 사용하여, 사용자 정의 필드의 값을 백엔드 주문 상세 페이지의 “청구 주소” 또는 “배송 주소” 필드 뒤에 출력합니다.
추천 읽기 WordPress 플러그인 개발 입문 가이드: 제0단계에서 첫 번째 기능 확장을 만들어보세요。
배경에서 주문 세부 정보에 사용자 정의 필드를 표시하려면
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
$invoice_needed = $order->get_meta( '_billing_invoice_needed' );
if ( $vat_number ) {
echo '<p><strong>'\n' . __( '회사 세금 번호:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number).`'</p>';
}
if ( $invoice_needed ) {
$display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
echo '<p><strong>'\n' . __( '종이재�가 필요합니다:', 'your-text-domain' ) . '</strong> '`. esc_html($display_text)`.'</p>';
}
}주문 확인 이메일과 감사 페이지에 표시합니다.
고객들도 이 정보를 확인할 수 있도록, 주문 확인 이메일과 주문 확인(감사) 페이지에 해당 내용을 추가해야 합니다. woocommerce_email_order_meta_keys 필터는 지정된 메타데이터 키를 모든 알림 이메일에 자동으로 추가할 수 있습니다. 동시에, woocommerce_order_details_after_order_table 액션 훅(Action Hook)은 프론트엔드 주문 상세 페이지에 표시될 수 있습니다.
주문 메일에 사용자 정의 필드 추가
*/
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
$keys[] = '_billing_vat_number';
$keys[] = '_billing_invoice_needed'; // 메일에서는 키 형태로 표시되며, 일반적으로 추가 처리가 필요합니다.
return $keys;
}
/**
* 프론트엔드 주문 세부 정보(감사 페이지, 내 계정 - 주문 세부 정보)에 사용자 정의 필드 표시
*/
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
if ( $vat_number ) {
echo '<h2>'\n' . __( '추가 정보', 'your-text-domain' ) . '</h2>'echo '<table class="shop_table shop_table_responsive additional_info">'echo '<tr><th>'\n' . __( '회사 세금 번호:', 'your-text-domain' ) . '</th><td>'`. esc_html($vat_number).`'</td></tr>'echo '</table>';
}
}고급 애플리케이션 및 필드 조건 논리 (Advanced Applications and Field Condition Logic)
기본 필드를 추가하는 것 외에도, 더 복잡한 상호작용 기능들은 사용자 경험을 크게 향상시킬 수 있습니다. 예를 들어, 필드의 조건부 표시나 기존 값에 기반한 검증 기능이 그에 해당합니다.
필드의 조건부 표시를 구현하는 방법입니다.
JavaScript/jQuery를 사용하면 특정 필드의 값(예: 국가, 주, 또는 라디오 버튼의 선택 내용)에 따라 다른 필드를 동적으로 표시하거나 숨길 수 있습니다. 예를 들어, 사용자가 “서면 인보이스 필요”를 선택했을 때만 “인보이스 발송에 관한 주의 사항”이라는 텍스트 영역을 표시하도록 할 수 있습니다.
이 기능을 구현하려면 테마의 JavaScript 파일에 로직을 추가하거나, 다른 방법을 통해 처리해야 합니다. wp_enqueue_script 스크립트를 대기열에 등록하고, 결제 페이지에서 필드의 변경 사항을 감지하여 대상 필드의 표시 상태를 제어합니다.
필드에 사용자 정의 검증 규칙을 추가합니다.
WooCommerce에는 “필수” 필드를 설정하는 기능이 내장되어 있지만, 일부 사용자들은 추가적인 설정이 필요하다고 생각합니다.required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process 액션 후크(Action Hook)를 사용하여 사용자 정의 검증 로직을 추가할 수 있습니다.
/**
* 在结账过程中验证自定义字段
*/
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
// 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
}
}성능 최적화 및 모범 사례
웹사이트에 너무 많은 사용자 정의 필드를 추가하거나 이를 적절하게 처리하지 않으면, 결제 페이지의 로딩 속도와 사용자 경험에 부정적인 영향을 미칠 수 있습니다.
추천 읽기 WooCommerce 사용자 정의 필드를 마스터하기: 생성부터 표시까지의 고급 개발 가이드。
필드 로딩 및 렌더링 최적화
- 선택적 스크립트 로딩: 결제 페이지에서는 조건에 따라 표시되는 필드에만 필요한 JavaScript 스크립트만을 로드합니다.
- 합리적인 우선순위 설정을 사용하세요.
priority파라미터를 적절히 배치하여 필드의 순서를 정리하고, 불필요한 레이아웃 재조정을 방지하세요. - 간소화된 버전:
class배열: 필요한 스타일 클래스만 추가하세요, 예를 들어…form-row-wide또는form-row-first。
데이터 보안 및 정리
- 항상 데이터를 정리하고 검증한 후에 저장하세요.
update_post_meta) 및 표시(echo사용자 데이터를 처리하기 전에 반드시 다음과 같은 절차를 따르십시오:sanitize_text_field(),esc_html(),wp_kses_post()이러한 함수들을 사용하여 데이터를 처리하는 것은 크로스사이트 스크립팅(XSS) 공격을 방지하는 데 매우 중요합니다. - 올바른 데이터 타입을 사용하세요: 숫자나 특정 형식의 데이터의 경우, 그에 맞는 데이터 타입을 선택하는 것이 중요합니다.
sanitize_key()또는 사용자 정의 정규 표현식을 사용하여 데이터를 검증하고 정리할 수 있습니다.
요약
WooCommerce의 사용자 정의 결제 정보 필드는 매우 강력한 기능으로, 판매자와 고객 간의 거래 핵심 단계에서의 정보 교환을 원활하게 해줍니다. woocommerce_checkout_fields 후크를 사용하여 프론트엔드 필드를 정의하고, 이를 활용합니다. woocommerce_checkout_update_order_meta 후크를 사용하여 데이터를 안전하게 저장한 후, 여러 관리 후크와 이메일 필터를 통해 데이터를 백엔드, 이메일, 그리고 사용자 인터페이스에 표시합니다. 이 전체 과정은 완전한 데이터 처리 라이프사이클을 형성합니다. 이러한 핵심 기술들을 숙달하고 조건부 표시나 사용자 정의 검증과 같은 고급 기법을 활용하면, 개발자는 매우 개인화되고 사용자 친화적이며 데이터 보안이 보장된 결제 프로세스를 구축할 수 있습니다. 이를 통해 다양한 전자상거래 요구사항을 충족시키고, 상점의 전문성과 고객 만족도를 향상시킬 수 있습니다.
자주 묻는 질문
커스텀 필드의 데이터는 어디에 저장되나요?
커스텀 필드의 데이터는 “주문 메타데이터”로 저장됩니다. 사용할 때는… update_post_meta( $order_id, ‘_field_key’, $value ); 저장할 때 데이터는 WordPress에 저장됩니다. wp_postmeta 데이터베이스 테이블에서, 주문(커스텀된 기사 유형 중 하나)과 관련된 정보는… post_id 관련성: 키 이름은 보통 밑줄(_으로 시작하며, 이는 해당 키가 숨겨진 메타데이터임을 나타냅니다.
어떻게 사용자 정의 필드를 사용자가 계정을 등록할 때 함께 저장하도록 할 수 있을까요?
만약 결제 시 계정 생성을 허용하고 “회사명”과 같은 필드를 사용자 정보에도 저장하고 싶다면, 주문 메타데이터를 저장하는 동시에 사용자 메타데이터도 업데이트해야 합니다. 이를 위해 다음과 같은 방법을 사용할 수 있습니다: update_user_meta( $customer_id, ‘billing_company’, $value );참고로, 이 정보를 얻기 위해서는 일반적으로 사용자가 등록하거나 로그인한 후에 올바른 사용자 ID를 확인해야 합니다.
왜 제가 정의한 사용자 정의 필드가 이메일에 제대로 표시되지 않나요?
만약 필드 값이 이메일에 표시되지 않는다면, 가장 흔한 이유는 해당 값을 이메일에 포함시키는 것을 잊었기 때문입니다. woocommerce_email_order_meta_keys 필터는 해당 키명을 이메일 변수에 추가합니다. 또한, 이메일 템플릿에는 사용자 정의 메타데이터를 표시하는 부분이 없을 수 있습니다. 사용하는 필드의 키명이 필터 배열에 올바르게 추가되었는지 확인하시고, 이메일 템플릿도 적절히 수정하시기 바랍니다. email-order-details.php일반적인 메타데이터를 표시하는 기능을 지원합니다.
결제 페이지의 다른 위치에 필드 블록을 추가할 수 있을까요?
물론입니다. 기본 설정 외에도 다른 옵션이 있습니다. billing、shipping、order 그룹화할 수 있습니다. woocommerce_checkout_fields 필터 내에 새로운 그룹을 생성하려면, 예를 들어… custom_section그런 다음, 사용하세요. woocommerce_checkout_after_customer_details 또는 woocommerce_before_order_notes 등의 액션 후크들을 결합하여 사용합니다. do_action(‘woocommerce_checkout_’ . $section); 이 새로 생성된 그룹의 필드들을 페이지의 원하는 위치에 렌더링하려면, WooCommerce의 결제 템플릿 구조에 대한 기본적인 이해가 필요합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어