fbpx

개인통관고유번호 입력 필드 추가하기

안녕하세요. 오늘은 개인통관고유번호 입력 필드를 내 계정 페이지에서 입력/수정/관리하고 주문시에 자동으로

이 개인통관고유번호 값을 자동으로 불러오도록 하는 기능을 구현해보도록 하겠습니다.

최근 이런 기능이 필요한 사이트가 생겨서 개발을 직접 해봤습니다.

아시겠지만, 워드프레스는 후킹 구조로 되어 있습니다.

일단 구현해야 할 기능과 비슷한 플러그인을 찾아서 기능을 자세히 확인한 후에 없는 기능을 후킹하는 것입니다.

 

자, 기본 개념을 방향을 이해했으니, 진행해보도록 합시다.

1. 비슷한 기능을 갖는 플러그인 검색

필요한 기능을 갖는 그러니까 우커머스에 커스텀 필드를 추가할 수 있는 플러그인을 하나 찾았습니다.

찾은 플러그인은 아래의 우커머스 체크아웃 필드 에디터입니다.

이 플러그인은 우커머스에서 상품을 구매하고 결제시 추가적인 필드를 넣을 수 있는 기능을 합니다.

Checkout Field Editor for WooCommerce 

해당 플러그인을 이용하여 아래와 같이 개인통관고유부호 필드를 하나 생성했습니다.

생성된 코드는 clearance_code 입니다.

하지만, 이 새로 만든 필드를 우커머스 내 계정 페이지에 노출하는 기능을 제공하지는 못합니다.

clearance, 개인통관고유부호,빅스페이서,우커머스
clearance, 개인통관고유부호,빅스페이서,우커머스

 

2. 이제 찾은 플러그인에서 없는 기능 구현하기

이제 우커머스 내 계정 페이지에 개인통관고유부호 필드를 생성하고 저장하는 기능을 만들 차례입니다.

구현된 결과를 먼저 볼까요?

clearance, 개인통관고유부호,빅스페이서,우커머스
clearance, 개인통관고유부호,빅스페이서,우커머스

위와 같이 내 계정 페이지에 개인통관고유부호를 입력하도록 만들어 보겠습니다.

아래는 전형적인 워드프레스 후킹 방식 코드입니다.

대충 정리해보면, 1번에서 만든 새로운 필드를 내 계정 페이지에 입력 필드로 노출하고, 저장/수정할 수 있도록 했습니다.

// Add the custom field “clearance_code”
add_action( ‘woocommerce_edit_account_form’, ‘add_clearance_code_to_edit_account_form’ );
function add_clearance_code_to_edit_account_form() {
$user = wp_get_current_user();

// First Field
?>
<p class=”woocommerce-form-row woocommerce-form-row–first form-row form-row-first”>
<label for=”clearance_code”><?php _e( ‘개인통관고유부호 (13자리입니다)’, ‘woocommerce’ ); ?>
<input type=”text” class=”woocommerce-Input woocommerce-Input–text input-text” name=”clearance_code” id=”clearance_code” value=”<?php echo esc_attr( $user -> clearance_code ); ?>” />
</p>
<?php
// Second Field
?>
<div class=”clear”></div>
<?php
}

// Save the custom field ‘clearance_code’
add_action( ‘woocommerce_save_account_details’, ‘save_clearance_code_account_details’, 13, 1 );
function save_clearance_code_account_details( $user_id ) {
// For clearance_code
if( isset( $_POST[‘clearance_code’] ) )
update_user_meta( $user_id, ‘clearance_code’, sanitize_text_field( $_POST[‘clearance_code’] ) );
}

 

3. 내 계정 페이지의 개인통관고유코드를 구매 후 결제시 불러오기

이제 내 계정 페이지에서 입력한 개인통관고유코드를 구매시 불러오도록 해야겠습니다.

결과부터 보시죠.

구매시 주문 메모 다음에 개인통관고유부호를 입력할 수 있도록 만들고, 내 계정에서 입력한 값을 불러오도록 했습니다.

 

clearance, 개인통관고유부호,빅스페이서,우커머스
clearance, 개인통관고유부호,빅스페이서,우커머스

 

이제 이렇게 구현한 코드를 보시죠.

코드는 간단한데요. 워드프레스 후킹 방법이 또 쓰이죠.

상품을 구매할 때의 주문 정보를 가져오고, 이 때 내 계정내에 저장된 개인통관고유부호를 가져와서 1번에서 만든 필드에 다시 넣는 방법으로 구현되었습니다.

// Add products cutom fields as formated data in customer note
add_action(‘woocommerce_checkout_update_order_meta’, ‘after_checkout_create_order’, 20, 2);
function after_checkout_create_order( $order_id, $data ) {
$user = wp_get_current_user();
$clearance_value = $user->clearance_code;

// Get the WC_Order Object (instance)
$order = wc_get_order($order_id);
// Get customer note
$note = $order->get_customer_note();
$note = $clearance_value;
// Set the new customer note before saving
$order->set_customer_note( $note );
$order->save();
}

이상, 간단하지만 강력한 워드프레스 후킹의 진가를 살펴봤습니다.

워드프레스를 만든 창업자의 기본 미션을 잘 생각해보시면 쉽게 구현하실 수 있습니다.

 

오늘은 여기까지 입니다. 감사합니다.

 

 

댓글 남기기

실시간 문의!
실시간 문의!
궁금하신 사항에 대해서 문의하세요!
연결...
안녕하세요. 궁금하신 사항을 문의해주세요!
아! 죄송합니다. 너무 많은 문의로 바쁜 상태입니다! 잠시만 기다려주세요.
:
:
:
문의사항이 있으세요? 바로 문의하세요!
:
:
실시간 채팅방의 세션이 만료되었습니다.
이 대화가 유용했습니까? 이 채팅에 투표하세요.
좋음 나쁨