WooCommerce에서 결제에 날짜 필드를 추가하는 방법

게시 됨: 2020-12-20

WooCommerce 체크아웃에 날짜 필드 추가 많은 온라인 상점의 체크아웃 페이지에 사용자 정의 필드가 필요합니다. 예를 들어 케이크 가게의 체크아웃 페이지에 배달 날짜 필드가 필요할 수 있습니다.

WooCommerce의 장점은 결제 및 배송 필드 뒤 또는 주문 버튼 앞에와 같이 체크아웃 페이지에 사용자 정의 필드를 추가할 수 있다는 것입니다.

WooCommerce 체크아웃에 날짜 필드 추가

이 게시물에서는 WooCommerce 결제 페이지에서 배송 날짜 필드를 추가하는 방법을 배웁니다. 결제 필드 뒤에 추가하겠습니다. 이 필드를 통해 고객은 주문에 대한 배송 날짜를 선택할 수 있습니다. 또한 이메일 알림 및 주문 수신 페이지에서 사용자 정의 필드를 표시하는 방법을 공유합니다.

1. WooCommerce 결제 페이지에 사용자 정의 날짜 필드 추가

WooCommerce를 사용하면 사용할 후크에 따라 다양한 위치에 사용자 정의 필드를 추가할 수 있습니다. 체크아웃 페이지에는 WooCommerce가 정의한 많은 작업이 있습니다. 이 자습서에서는 청구 또는 배송 주소 필드 뒤에 필드를 추가합니다.

여기에 사용자 정의 필드를 추가하려면 woocommerce_after_checkout_billing_form 작업을 사용합니다. functions.php 파일에 다음 코드를 추가합니다.

 add_action( 'woocommerce_after_checkout_billing_form', 'njengah_extra_fields_after_billing_address' , 10, 1 );

기능 njengah_extra_fields_after_billing_address() {

            _e( "배송 날짜: ", "add_extra_fields");

            ?>

            <br>

            <input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="배송 날짜">

  <?php

}

결과는 다음과 같습니다. 배송 날짜 필드

고객은 주문에 대한 배송 날짜를 선택해야 합니다. 즉, 이 필드에 달력을 추가해야 합니다. 또는 간단한 텍스트 필드로 이것을 시도하여 간단하게 유지할 수 있습니다.

jQuery 날짜 선택기를 사용합니다. 즉, WordPress wp_enqueue_scripts 작업을 사용하여 필요한 JavaScript 및 CSS 파일을 포함해야 합니다.

 add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );

기능 display_extra_fields_after_billing_address() {

_e( "배송 날짜: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="배송 날짜">

<스크립트>

jQuery(문서).ready(함수( $) {

$( ".add_delivery_date").datepicker( {

최소 날짜: 0,

} );

} );

</스크립트>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

함수 enqueue_datepicker() {

if ( is_checkout() ) {

// datepicker 스크립트를 로드합니다(WordPress에 사전 등록됨).

wp_enqueue_script( 'jquery-ui-datepicker' );

// 날짜 선택에 대한 스타일 지정이 필요합니다. 단순화를 위해 Google에서 호스팅하는 jQuery UI CSS에 연결했습니다.

wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');

wp_enqueue_style( 'jquery-ui' );

}

}

결과는 다음과 같습니다. 현장의 달력

코드 작동 방식

나는 WooCommerce 작업에 display_extra_fields_after_billing_address() 함수를 첨부했습니다. 먼저 "Delivery Date"라는 레이블을 인쇄하고 jquery datepicker( ) 함수를 사용할 수 있는 날짜 선택기에 대한 하나의 입력 텍스트 유형 필드를 추가합니다.

그런 다음 WordPress 작업과 함께 enqueue_datepicker() 함수를 첨부했습니다. 이 함수에서 wp_enqueue_script() 를 사용하여 jQuery datepicker 와 스타일을 추가했습니다.

위의 코드 조각을 추가하면 청구서 수신 주소 필드 아래에 사용자 정의 필드가 표시됩니다.

2. 이메일 알림에 사용자 정의 필드 표시

다음 단계는 고객 이메일에 표시할 사용자 정의 필드를 추가하는 것입니다. functions.php 파일에 다음 코드를 추가합니다.

 add_action( 'woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order' , 10, 1);

기능 add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', Sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

코드 작동 방식

나는 WooCommerce 액션에 add_order_delivery_date_to_order() 함수를 첨부했습니다. 포스트 메타 테이블에 배달 날짜를 추가합니다. 데이터베이스에 날짜를 추가하기 전에 고객이 날짜를 선택했는지 확인합니다.

고객이 날짜를 선택하면 WordPress 함수 add_post_meta() 를 사용하여 wp_postmeta 테이블에 저장됩니다. 이 함수에는 post_id , 메타 키 및 메타 값이 필요합니다. 우리의 경우 주문 ID를 post_id 로 사용했으며 메타 키는 _delivery_date 가 되고 메타 값은 고객이 선택한 배송 날짜가 됩니다.

$_POST 변수 데이터를 삭제하는 것이 좋습니다. 문자열에서 줄 바꿈, 탭 및 추가 공백을 제거합니다.

배송 날짜를 데이터베이스에 저장한 후 고객 이메일에 표시합니다. functions.php 파일에 다음 코드를 추가합니다.

 add_filter( 'woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails' , 10, 3 );

기능 add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} 또 다른 {

$order_id = $order->id;

}

$delivery_date = get_post_meta( $order_id, '_delivery_date', true );

if ( '' != $delivery_date ) {

$fields[ '배달일' ] = 배열(

'라벨' => __( '배송 날짜', 'add_extra_fields' ),

'값' => $delivery_date,

);

}

$ 필드 반환;

}

3. WooCommerce 감사 페이지에 사용자 정의 필드 표시

WooCommerce Order Received 페이지에 사용자 정의 필드를 표시하기 위해 WooCommerce 필터 woocommerce_order_details_after_order_table 을 사용합니다. functions.php 파일에 다음 코드를 추가합니다.

 add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

기능 add_delivery_date_to_order_received_page ( $ 주문 ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} 또 다른 {

$order_id = $order->id;

}

$delivery_date = get_post_meta( $order_id, '_delivery_date', true );

if ( '' != $delivery_date ) {

에코 '<p><strong>' . __( '배송 날짜', 'add_extra_fields' ) . ':</strong> ' . $delivery_date;

}

}

결과는 다음과 같습니다. 감사 페이지의 배달 날짜

코드 작동 방식

나는 우커머스 필터에 add_delivery_date_to_order_received_page() 를 첨부했습니다. 이 함수의 매개변수는 주문 ID를 가져오는 데 사용됩니다. wp_postmeta 테이블에서 선택한 배송 날짜를 가져오려면 주문 ID가 필요합니다.

결과는 다음과 같습니다.

전체 코드 스니펫

튜토리얼을 따라하는 데 문제가 있는 경우 전체 코드 스니펫이 여기에 있습니다. functions.php 파일에 붙여넣습니다.

 /*

플러그인 이름: WooCommerce 결제 페이지에 필드를 추가합니다.

설명: WooCommerce 체크아웃 페이지에 추가 필드를 추가하는 방법에 대한 간단한 데모 플러그인입니다.

*/

add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );

기능 display_extra_fields_after_billing_address() {

_e( "배송 날짜: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="배송 날짜">

<스크립트>

jQuery(문서).ready(함수($) {

$(".add_delivery_date").datepicker({

최소 날짜: 0,

});

});

</스크립트>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

함수 enqueue_datepicker() {

if ( is_checkout() ) {

// datepicker 스크립트를 로드합니다(WordPress에 사전 등록됨).

wp_enqueue_script( 'jquery-ui-datepicker' );

// 날짜 선택에 대한 스타일 지정이 필요합니다. 단순화를 위해 Google에서 호스팅하는 jQuery UI CSS에 연결했습니다.

wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');

wp_enqueue_style( 'jquery-ui' );

}

}

add_action( 'woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order' , 10, 1);

기능 add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', Sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

add_filter( 'woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails' , 10, 3 );

기능 add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} 또 다른 {

$order_id = $order->id;

}

$delivery_date = get_post_meta( $order_id, '_delivery_date', true );

if ( '' != $delivery_date ) {

$fields[ '배달일' ] = 배열(

'라벨' => __( '배송 날짜', 'add_extra_fields' ),

'값' => $delivery_date,

);

}

$ 필드 반환;

}

add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

기능 add_delivery_date_to_order_received_page ( $ 주문 ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} 또 다른 {

$order_id = $order->id;

}

$delivery_date = get_post_meta( $order_id, '_delivery_date', true );

if ( '' != $delivery_date ) {

에코 '<p><strong>' . __( '배송 날짜', 'add_extra_fields' ) . ':</strong> ' . $delivery_date;

}

}

그게 다야!

결론

요약하면, 사용자 정의 날짜 필드를 체크아웃에 추가하고, 이메일 알림에 표시하고, 감사 페이지에 표시하는 방법을 배웠습니다. 그러나 코드 편집에 익숙하지 않은 경우 체크아웃 커스터마이저 플러그인을 사용할 수 있습니다. 업데이트 중에 변경 사항이 손실되지 않도록 하위 테마를 사용하는 것이 좋습니다.

유사한 기사

WooCommerc를 체크아웃하기 위해 선택 필드를 추가하는 방법
WooCommerce Checkout 필드 자리 표시자를 설정하는 방법
WooCommerce에서 가격 없이 제품을 숨기는 방법
WooCommerce에서 이미지 없이 제품을 숨기는 방법
모든 탭을 숨기는 방법 내 계정 페이지 WooCommerce
장바구니 업데이트 버튼을 숨기는 방법 WooCommerce 장바구니 페이지
WooCommerce에서 재고 수량을 숨기는 방법
Checkout WooCommerce에서 계정을 만드는 방법
필수 WooCommerce 체크아웃 필드를 편집하는 방법
WooCommerce 조건부 결제 필드를 만드는 방법
WooCommerce 결제 페이지 템플릿을 편집하는 방법
WooCommerce VAT 번호 체크아웃 페이지를 추가하는 방법
WooCommerce 결제 페이지에 숨겨진 필드를 추가하는 방법
기본 메뉴 스토어프론트 WooCommerce를 이동하는 방법
무료 배송이 가능한 경우 배송비를 숨기는 방법 WooCommerce
WooCommerce 인보이스 결제 페이지를 추가하는 방법
WooCommerce 결제 양식에 추가 필드를 추가하는 방법
WooCommerce Checkout 기본 국가를 추가하는 방법
WooCommerce 제목을 숨기는 방법