[쇼핑몰 구축기] 우커머스 청구 및 배송 필드 최적화 방법

다시 우커머스 결제 단계로 돌아와 결제 단계 최적화 방법 중의 하나로 청구 및 배송 정보를 최소로 입력해 사용성을 높이는 방법을 살펴보죠.

계속 이야기하듯이 워드프레스 쇼핑몰을 구현해주는 우커머스는 미국적인 특성이 강하게 반영되어 있고 더우기 글로벌 비지니스를 염두에 두고 설계되었습니다.

따라서 미국식으로 성과 이름을 분리해 입려하게 되어 있으며, 주소도 국가 – 주 정보 등등 훨씬 더 많은 정보를 입력하도록 되어 있습니다.

그래서 한국에서만 쇼핑몰을 운영한다는 가정하헤 청구 및 배송 정보를 최소화하는 방법을 고민하는 것이죠.

[결제 단계 최적화] 우커머스 청구 및 배송 필드 변경법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[결제 단계 최적화] 우커머스 청구 및 배송 필드 변경법

여기에서는 우커머스 결제 단계(checkout)에서 청구 주소 및 배송 주소지를 최적화하는 방법에 대해서 알아봅니다.

우커머스가 미국적인 특성이 강하기 때문에 한국 특성에 맞추고, 쇼핑 경험을 최적화하기 위해서는 청구 및 배송 필드를 최적화하는 것이 필요합니다.

1. 기본 우커머스 청구 상세 필드

계속 이야기되지만 우커머스는 미국 환경에 최적화되었기 때문에 그 특성을 반영해 다소 복잡하게 많은 정보를 입력하도록 되어 있습니다.

• 미국 특성에 맞추어 이름과 성을 구분해 입력 받습니다.
• 비지니스 특성을 반영해 회사명이 기본 입력토록 되어 있습니다.
• 다국적 비지니스 플랫폼을 반영해 국가명 입력합니다.
• 수십개의 주가 존재하기 때문에 주이름을 입력하는 필드가 따로 있습니다.

2. 청구 및 배송 필드 최적화

먼저 청구 및 배송 필드를 조정해 불필요한 필드를 제거합니다. 필드 제거에는 unset 명령을 사용합니다.

add_filter( 'woocommerce_checkout_fields', 'puripia_remove_fields', 9999 );
 
function puripia_remove_fields( $fields ) {
 
  // unset( $fields['billing']['billing_first_name'] );
  unset( $fields['billing']['billing_last_name'] ); // 성 필드 제거
  // unset( $fields['billing']['billing_phone'] );
  // unset( $fields['billing']['billing_email'] );
  unset( $fields['billing']['billing_company'] ); // 회사 필드 제거
  unset( $fields['billing']['billing_country'] ); // 국가 필드 제거
  //unset( $fields['billing']['billing_address_1'] );
  //unset( $fields['billing']['billing_address_2'] );
  unset( $fields['billing']['billing_city'] ); // 도시 주소 필드 제거
  unset( $fields['billing']['billing_state'] ); // 주(state) 줏 필드 제거
  //unset( $fields['billing']['billing_postcode'] ); 
 
  // unset( $fields['shipping']['shipping_first_name'] );
  unset( $fields['shipping']['shipping_last_name'] ); // 성 필드 제거
  // unset( $fields['shipping']['shipping_email'] );
  // and to remove the shipping fields below
  unset( $fields['shipping']['shipping_company'] ); // 회사 필드 제거
  unset( $fields['shipping']['shipping_country'] ); // 국가 필드 제거
  //unset( $fields['shipping']['shipping_address_1'] );
  //unset( $fields['shipping']['shipping_address_2'] );
  unset( $fields['shipping']['shipping_city'] ); // 도시 주소 필드 제거
  unset( $fields['shipping']['shipping_state'] ); // 주(state) 줏 필드 제거
  //unset( $fields['shipping']['shipping_postcode'] ); 

  // unset( $fields['order']['order_comments'] ); 

  return $fields;
}Code language: PHP (php)

3. 배송처 전화번호 필드 추가

우커머스는 배송처 전화번호에 대한 필드가 없습니다. 그러나 일반적으로 배송 시 물건 수령하실 고객과 연락하려면 전화번호가 필수적입니다.

아래와 같은 코드를 사용해서 배송처 전화번호 필드를 추가합니다.

add_filter( 'woocommerce_checkout_fields' , 'puripia_shippping_phone', 9999 );

function puripia_shippping_phone( $fields ) {
     $fields['shipping']['shipping_phone'] = array(
        'label'     => __('배송지 전화번호', 'woocommerce'),
        'placeholder'   => _x('받는 분 전화번호', 'placeholder', 'woocommerce'),
        'required'  => true,
        'class'     => array('form-row-wide'),
        'clear'     => true
     );

     return $fields;
}
Code language: PHP (php)

4. 필드마다 플레이스 폴더 지정

플레이스 홀더(place holder)란 입력 박스를 간략하게 설명하거나 가이드를 주는 문구입니다.

이 플레이스 홀더(place holder)는 눈에는 보이지만 여기에 문구를 입력하면 사라집니다. 제대로 입력받기 위한 가이드로 활용합니다.

위에서 새롭게 만든 배송처 전화번호는 이미 플레이스 홀더(place holder)를 비롯한 모든 정보가 입력되었고, address_1과 address_2도 적정한 가이드가 입력되어 있으니 넘어가기로 합니다.

아래와 같은 코드를 사용했습니다.

add_filter( 'woocommerce_checkout_fields' , 'puripia_labels_placeholders', 9999 );
 
function puripia_labels_placeholders($fields) {
 
  //$fields['billing']['billing_first_name']['label'] = '이름';

    $fields['billing']['billing_first_name']['placeholder'] = '고객 이름';
    $fields['billing']['billing_email']['placeholder'] = '고객 이메일 주소'; 
    $fields['billing']['billing_phone']['placeholder'] = '고객 전화번호';  
    $fields['billing']['billing_postcode']['placeholder'] = '우편번호-주소검색 시 자동입력';
    $fields['billing']['billing_address_1']['placeholder'] = '도로명/번지-주소검색 시 자동입력';
    $fields['billing']['billing_address_2']['placeholder'] = '아파트 동호수 등';

    $fields['shipping']['shipping_first_name']['placeholder'] = '받는 분 이름';
    $fields['shipping']['shipping_phone']['placeholder'] = '받는 분 전화번호';    
    $fields['shipping']['shipping_postcode']['placeholder'] = '우편번호-주소검색 시 자동입력';
    $fields['shipping']['shipping_address_1']['placeholder'] = '도로명/번지-주소검색 시 자동입력';
    $fields['shipping']['shipping_address_2']['placeholder'] = '아파트 동호수 등'; 

  return $fields;
 
}Code language: PHP (php)

5. 청구 및 배송 필드 순서 지정

청구 내용 및 배송지 내용을 입력하기 쉽도록 필드 순서를 지정합니다. 이는 사용자 경험등을 고려해 적절하게 조정합니다.

아래와 같은 코드를 이용해서 필드 순서를 조정합니다.

add_filter("woocommerce_checkout_fields", "reorder_woocommerce_fields", 9999);
function reorder_woocommerce_fields($fields) {
    $fields['billing']['billing_first_name']['priority'] = 10;
    $fields['billing']['billing_email']['priority'] = 20; 
    $fields['billing']['billing_phone']['priority'] = 30;  
    $fields['billing']['billing_postcode']['priority'] = 40;
    $fields['billing']['billing_address_1']['priority'] = 50;
    $fields['billing']['billing_address_2']['priority'] = 60;

    $fields['shipping']['shipping_first_name']['priority'] = 10;
    $fields['shipping']['shipping_phone']['priority'] = 30;    
    $fields['shipping']['shipping_postcode']['priority'] = 40;
    $fields['shipping']['shipping_address_1']['priority'] = 50;
    $fields['shipping']['shipping_address_2']['priority'] = 60;

    return $fields;
}
Code language: PHP (php)