woocommerce_checkout_fields- WooCommerce Checkout를 사용자 정의하기위한 20 개의 코드 예제

플러그인없이 WooCommerce 체크 아웃을 사용자 정의 하시겠습니까? 가능합니다 - 몇 줄의 PHP에 익숙하다면. 이 게시물에는 woocommerce_checkout_fields 필터를 사용하여 20 개의 즉시 사용 가능한 코드 스 니펫이 있습니다. 필드 제거, 레이블 이름 변경 또는 새로운 옵션 추가와 같은 실제 사례를 다룹니다.

코딩 중이 아닌 경우 걱정하지 마십시오. 또한 유연한 체크 아웃 필드 플러그인을 사용하여 동일한 결과를 시각적으로 달성하는 방법도 보여줍니다.

체크 아웃 사용자 정의 란 무엇이며 전환을 개선하는 데 어떻게 도움이됩니까?

결제는 방문자가 고객이되는 곳입니다. 그러나 불필요한 필드로 혼란스러워하거나 유연성이 부족하면 마찰을 일으킬 수 있습니다. 체크 아웃을 사용자 정의하면 포기를 줄이고 구매 속도를 높이며 더 나은 경험을 창출 할 수 있습니다.

WooCommerce에는 woocommerce_checkout_fields 유연한 필터가 제공됩니다. 청구, 배송 또는 추가 필드를 수정하는 데 사용할 수 있습니다. 현장 가시성, 주문 및 컨텐츠를 제어하려는 개발자에게 적합합니다.

Woocommerce_checkout_fields 필터를 사용한 20 개의 코드 예제

아래는 20 개의 예입니다. 이 스 니펫을 어린이 테마의 functions.php 또는 사용자 정의 플러그인에 추가하십시오.

1. 두 번째 주소 필드를 제거하십시오

 // This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2. 전화 필드를 숨기고 있습니다

 // This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3. 이메일 필드를 선택적으로 만듭니다

 // This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

4. 첫 번째 및 성 필드에 대한 자리 표시 자 변경

 // This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5.“성”이름을“성”으로 바꾸는

 // This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6. 사용자 정의 텍스트 필드를 추가하십시오

 // This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7. 배달 지침을 위해 TextRea를 추가하십시오

 // This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8. 사용자 정의 CSS 클래스를 설정하십시오

 // This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9. 이메일 필드 우선 순위를 변경하십시오

 /* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10. 우편 번호 필드를 제거하십시오

 // This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11. 성의 이름을 재정렬했습니다

 // This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12. 송장 요청에 대한 확인란을 추가하십시오

 // This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13. 배달 시간에 대한 선택 드롭 다운을 추가하십시오

 // This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14. 전임 주문 의견

 // This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15. 사용자 정의 번호 필드를 추가하십시오

 // This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16. 날짜 선택기를 추가하십시오

 // This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17. 전화 유효성 검사를 비활성화합니다

 // This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18. 배송 국가 필드가 마지막으로 나타납니다

 /* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19. 배송 우편 번호 필드를 제거하십시오

 // This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20. 주문 세부 정보 후 사용자 정의 필드를 추가하십시오

 // This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

유연한 체크 아웃 필드를 사용하여 코딩하지 않고 체크 아웃을 사용자 정의하는 방법

개발자가 아니야? 괜찮아요. Flexible Checkout Fields 플러그인을 사용하면 WordPress 대시 보드에서 시각적으로 위의 모든 작업을 수행 할 수 있습니다.

• 드래그 앤 드롭을 사용하여 필드를 추가, 제거 및 재 배열하십시오
  

  

• 레이블, 자리 표시 자 및 기본값을 편집합니다
• 필드를 필요에 따라, 선택 사항 또는 숨겨진 필드를 설정하십시오
  

  

• CSS 클래스 또는 검증 규칙을 적용하십시오
  

  

• 섹션을 선택하십시오 : 청구, 배송 또는 추가 정보
• 테스트 또는 UX 목적으로 기본값을 할당하십시오
• PHP를 편집하거나 사용자 정의 코드를 작성하지 않고는 모두

개발 오버 헤드없이 결과.

Flexible Checkout Fields Pro - 고급 기능

더 많은 힘과 유연성을 원하십니까? 프로 버전은 고급 기능을 추가합니다.

• 카트 내용 또는 사용자 데이터를 기반으로 필드를 표시/숨기기위한 조건부 논리
• 추가 필드 유형 지원 : 날짜 선택기, 시간 피커, 색상 또는 이미지가있는 라디오 등
• 사용자 역할에 대한 가시성 제어 - B2B 및 B2C 사용자에 다른 필드 표시
• 선택된 배송 또는 지불 방법을 기반으로 한 필드 디스플레이
• 필드 설정 당 추가 가격

제품 페이지에 플러그인 기능이 표시 될 수 있습니다.

요약 : 계산대에 가장 적합한 방법은 무엇입니까?

woocommerce_checkout_fields 사용하는 것은 WooCommerce Checkout를 사용자 정의하는 강력한 방법이지만 신중한 코딩 및 테스트가 필요합니다. 또한 코드 및 테마 업데이트를 처리해야합니다.

테마 편집에 확신이 있다면 위의 20 가지 예제는 가장 일반적인 시나리오를 처리하는 데 도움이됩니다.

그러나 다른 모든 사람들에게 WooCommerce 플러그인 용 유연한 체크 아웃 필드는 프로 버전의 더 많은 옵션을 갖춘 코드가없는 사용자 친화적 인 대안을 제공합니다.

핵심 요점

• woocommerce_checkout_fields 필터를 사용하면 PHP로 체크 아웃 양식을 사용자 정의 할 수 있습니다.
• 이를 사용하여 추가, 제거, 이름 바꾸기, 재주문 또는 스타일 필드를 사용할 수 있습니다.
• Flexible Checkout Fields 플러그인은 동일하지만 코드가 필요하지 않습니다.
• Pro 버전은 조건부 로직, 추가 필드 유형 및 필드 가격 규칙을 추가합니다.
• 워크 플로에 맞는 메소드 : 제어 용 코드, 속도 용 플러그인을 선택하십시오.