최종 수정일 : 2018.10.29 , 작성일 : 2018.10.24

워드프레스 우커머스 플러그인은 전 세계 여러 쇼핑몰에서 사용하는 워드프레스의 가장 유명한 플러그인입니다. 그런데 대한민국에서 사용하기에 몇 가지 아쉬운 점이 있습니다. 그중 하나가 바로 상품 배송주소를 따로 지정할 때 배송 수신자의 전화번호를 입력하는 칸이 없다는 것입니다. 저로서는 이해가 가지 않는 부분인데… 어쨌든 언젠가 우커머스 제작팀이 해결할 문제 중 하나이겠지만 당장 아쉬운 쪽은 우리들이니 급한 대로 아래의 방법을 사용해 봅니다.

배송 주소에 전화번호를 넣기 위해 적용해야하는 화면

상품을 결제하는 과정에서 구매자의 주소, 연락처 등의 정보와 배송지를 다르게 할때 배송 장소의 주소, 연락처를 입력해야 합니다. 그리고 이때 입력된 배송 전화번호는 관리자의 주문정보에 나타나야 하며 구매자의 구매내역에도 표시돼야 하며, 관리자와 구매자에게 전송되는 이메일에도 포함되어야 합니다.

배송지의 전화번호 입력칸이 없는 우커머스 기본 결제화면

플러그인을 이용해서 적용하는 방법

WooCommerce Checkout Field Editor (Manager) Pro 플러그인을 사용합니다.
플러그인을 설치하고 “우커머스-Checkout Form” 메뉴에 들어가서 “Shipping Fields” 탭을 선택한 후 “Add Field” 버튼을 누릅니다.

아래의 이미지와 같이 배송 전화번호 필드를 새로 만들어 추가합니다.

이후 배송 전화번호 입력 칸이 추가된 것을 확인할 수 있습니다.

결과1-1. 결제 화면에 배송 전화번호 입력필드 추가됨

결과1-2. 주문 완료시 화면에 배송 전화번호 추가됨
결과1-3. 관리자의 주문 내역 화면에 배송 전화번호 추가됨
결과1-4. 전송되는 이메일에 배송 전화번호 추가됨
결과1-5. 고객의 구매내역 화면에서 배송 전화번호 추가됨

아쉬운 대로 사용은 가능합니다만 주문서나 이메일에 표시되는 결과물이 정확한 위치에 적용되지는 않습니다. 전화번호가 표시되었으면 하는 자리에 우커머스가 제공하는 훅(Hooks)이 존재하지 않거나, 플러그인 자체가 배송 전화번호만을 위한 것이 아닌 범용으로 만들어졌기 때문에 그렇습니다.

functiosn.php 파일에 코드를 입력하는 방법

현재 사용중인 테마 차일드 테마의 functions.php파일 맨 아랫부분에 아래의 코드를 추가합니다.

// (1)주문 화면의 배송 주소에 추가 입력 필드 표시
add_filter( 'woocommerce_checkout_fields' , 'my_custom_override_checkout_fields' );
function my_custom_override_checkout_fields( $fields ) {
          $fields['shipping']['shipping_custom_tel_number'] = array(
          'label' => '배송 전화번호',
          'placeholder' => '전화번호를 입력 해 주세요',
          'required' => true,
          'class' => array('form-row-wide'),
          'clear' => true
          );
     return $fields;
}

// (2)관리자 화면의 주문 내용에 표시
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'my_shipping_tel_number_display_admin_order_meta', 10, 1 );
function my_shipping_tel_number_display_admin_order_meta($order){
     echo '<p>배송전화번호 : ' . get_post_meta( $order->id, '_shipping_custom_tel_number', true ) . '</p>';
}

// (3)주문 완료시 고객의 주문서에 표시
add_action('woocommerce_order_details_after_customer_details', 'my_shipping_tel_number_display_order_details', 20, 1);
function my_shipping_tel_number_display_order_details($order) {
     echo '<p><strong>배송전화번호 : </strong>' . get_post_meta( $order->id, '_shipping_custom_tel_number', true ) . '</p>';
}

// (4)주문 완료시 전송되는 이메일에 표시
add_action( 'woocommerce_email_customer_details', 'my_shipping_tel_number_display_emails', 11, 3 );
function my_shipping_tel_number_display_emails($order) {
     echo '<ul><li><strong>배송전화번호 : </strong>' . get_post_meta( $order->id, '_shipping_custom_tel_number', true ) . '</li></ul>';
}
결과2-1. 2016테마의 결제 화면에 배송 전화번호 필드 추가됨
결과2-2. 주문 완료 화면에 입력한 배송 전화번호 추가됨
결과2-3. 관리자의 주문 정보 확인 화면에 배송 전화번호 추가됨
결과2-4. 주문 완료 후 전송되는 이메일에 배송 전화번호 추가됨
결과2-5. 주문자의 계정 주문 내역에 배송 전화번호 추가됨

이 방법도 플러그인을 사용하는 방법과 같이 적용 방법이 간단합니다. 하지만 마찬가지로 위치가 깔끔하지 않습니다. 요구되는 정확한 위치에 해당하는 우커머스 훅(Hooks)이 존재하지 않기 때문입니다. 만약 정확한 위치에 넣고 싶다면 현재 사용 중인 테마에 따라 적용 방법이 각각 다릅니다.

아바다 테마에 배송 전화번호를 나름 깔끔하게 적용하는 방법

사용 중인 테마가 아바다 테마라면 차일드 테마에 아래와 같이 적용하여 배송 전화번호를 깔끔하게 적용할 수 있습니다.
동시에 우커머스 플러그인이나 테마가 업데이트되더라도 적용한 코드가 유지되도록 할 수 있습니다.

  1. 아바다 테마의 차일드 테마 functions.php파일에 먼저 아래의 코드를 입력합니다. 
    // (1)주문 화면의 배송주소에 추가 입력 필드 표시
add_filter( 'woocommerce_checkout_fields' , 'my_custom_override_checkout_fields' );
function my_custom_override_checkout_fields( $fields ) {
          $fields['shipping']['shipping_custom_tel_number'] = array(
          'label' => '배송 전화번호',
          'placeholder' => '전화번호를 입력 해 주세요',
          'required' => true,
          'class' => array('form-row-wide'),
          'clear' => true
          );
     return $fields;
}

// (2)관리자 화면의 주문 내용에 표시
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'my_shipping_tel_number_display_admin_order_meta', 10, 1 );
function my_shipping_tel_number_display_admin_order_meta($order){
     echo '<p>배송전화번호 : ' . get_post_meta( $order->id, '_shipping_custom_tel_number', true ) . '</p>';
}
  2. 주문 내용에 배송 전화번호 추가
    1. 아바다 부모 테마 폴더 안에 있는 Avada/templates/wc-view-order.php 파일의 내용을 전체 복사합니다.
    2. 차일드 테마안에 같은 경로, 같은 이름의 Avada-child/templates/wc-view-order.php 파일을 만들어 줍니다. 차일드 테마 안에 templates 폴더가 없다면 폴더를 직접 만들어 주면 되고, 그 안에 wc-view-order.php 라는 이름으로 빈 파일을 만든 후 본테마에서 복사한 내용을 그대로 붙여넣기 하면 됩니다.
    3. 1번에서 복사한 본테마의 코드를 새로 만든 파일에 붙여넣기 합니다.
    4. 복사한 파일의 내용에 아래와 같이 붉은색 코드 1줄을 추가 입력해 줍니다. (본 테마의 전체 코드 안에 딱 1줄만 추가하고 그것을 차일드 테마 안으로 옮겨주는 셈입니다.)
    5. 이후 주문 완료 확인 화면에 배송 전화번호가 나타나며, 고객의 개인 주문 내용에도 반영됩니다.
    <?php
/**
* WooCommere View Order template.
*
* @author ThemeFusion
* @copyright (c) Copyright by ThemeFusion
* @link http://theme-fusion.com
* @package Avada
* @subpackage Core
* @since 5.1
*/

// The $order_id is inherited from the Avada_Woocommerce::view_order() method.
if ( ! $order = wc_get_order( $order_id ) ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
return;
}

$order_items = $order->get_items( apply_filters( 'woocommerce_purchase_order_item_types', 'line_item' ) );
$show_purchase_note = $order->has_status( apply_filters( 'woocommerce_purchase_note_order_statuses', array( 'completed', 'processing' ) ) );
$show_customer_details = is_user_logged_in() && $order->get_user_id() === get_current_user_id();
$downloads = $order->get_downloadable_items();
$show_downloads = $order->has_downloadable_item() && $order->is_download_permitted();
?>
<section class="avada-order-details woocommerce-content-box full-width">
<h2 class="woocommerce-order-details__title"><?php esc_html_e( 'Order details', 'woocommerce' ); ?></h2>

<table class="woocommerce-table woocommerce-table--order-details shop_table order_details">
<thead>
<tr>
<th class="woocommerce-table__product-name product-name"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
<th class="woocommerce-table__product-table product-total"><?php esc_html_e( 'Total', 'woocommerce' ); ?></th>
</tr>
</thead>
<tbody>
<?php
do_action( 'woocommerce_order_details_before_order_table_items', $order );

foreach ( $order_items as $item_id => $item ) :
$product = apply_filters( 'woocommerce_order_item_product', $item->get_product(), $item );
$purchase_note = ( $product ) ? $product->get_purchase_note() : '';
$is_visible = $product && $product->is_visible();

$product_permalink = apply_filters( 'woocommerce_order_item_permalink', $is_visible ? $product->get_permalink( $item ) : '', $item, $order );

if ( ! apply_filters( 'woocommerce_order_item_visible', true, $item ) ) {
return;
}
?>
<tr class="<?php echo esc_attr( apply_filters( 'woocommerce_order_item_class', 'woocommerce-table__line-item order_item', $item, $order ) ); ?>">
<td class="woocommerce-table__product-name product-name">

<?php if ( $is_visible ) : ?>
<span class="product-thumbnail">
<?php $thumbnail = $product->get_image(); ?>
<?php if ( ! $product_permalink ) : ?>
<?php echo $thumbnail; // WPCS: XSS ok. ?>
<?php else : ?>
<a href="<?php echo esc_url( $product_permalink ); ?>"><?php echo $thumbnail; // WPCS: XSS ok. ?></a>
<?php endif; ?>
</span>
<?php endif; ?>

<div class="product-info">
<?php
echo apply_filters( 'woocommerce_order_item_name', $product_permalink ? sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), esc_html( $item->get_name() ) ) : esc_html( $item->get_name() ), $item, $is_visible ); // WPCS: XSS ok.
echo apply_filters( 'woocommerce_order_item_quantity_html', ' <strong class="product-quantity">' . sprintf( '&times; %s', esc_html( $item->get_quantity() ) ) . '</strong>', $item ); // WPCS: XSS ok.

// Meta data.
do_action( 'woocommerce_order_item_meta_start', $item_id, $item, $order, false );

wc_display_item_meta( $item );
wc_display_item_downloads( $item );

do_action( 'woocommerce_order_item_meta_end', $item_id, $item, $order, false );
?>
</div>
</td>

<td class="woocommerce-table__product-total product-total">
<?php echo $order->get_formatted_line_subtotal( $item ); // WPCS: XSS ok. ?>
</td>
</tr>

<?php if ( $show_purchase_note && $purchase_note ) : ?>
<tr class="woocommerce-table__product-purchase-note product-purchase-note">
<td colspan="3"><?php echo wpautop( do_shortcode( wp_kses_post( $purchase_note ) ) ); // WPCS: XSS ok. ?></td>
</tr>
<?php endif; ?>
<?php endforeach; ?>

<?php do_action( 'woocommerce_order_details_after_order_table_items', $order ); ?>
</tbody>
<tfoot>
<?php foreach ( $order->get_order_item_totals() as $key => $total ) : ?>
<tr>
<th scope="row"><?php echo $total['label']; // WPCS: XSS ok. ?></th>
<td class="product-total"><?php echo $total['value']; // WPCS: XSS ok. ?></td>
</tr>
<?php endforeach; ?>
</tfoot>
</table>
<?php do_action( 'woocommerce_order_details_after_order_table', $order ); ?>
</section>

<?php if ( $show_customer_details ) : ?>
<section class="avada-customer-details woocommerce-content-box full-width">
<header>
<h2><?php esc_attr_e( 'Customer details', 'woocommerce' ); ?></h2>
</header>
<dl class="customer_details">
<?php $billing_email = $order->get_billing_email(); ?>
<?php if ( $billing_email ) : ?>
<dt><?php esc_attr_e( 'Email:', 'Avada' ); ?></dt> <dd><?php echo esc_attr( $billing_email ); ?> </dd><br />
<?php endif; ?>

<?php $billing_phone = $order->get_billing_phone(); ?>
<?php if ( $billing_phone ) : ?>
<dt><?php esc_attr_e( 'Phone:', 'Avada' ); ?></dt> <dd><?php echo esc_html( $billing_phone ); ?></dd>
<?php endif; ?>

<?php $customer_note = $order->get_customer_note(); ?>
<?php if ( $customer_note ) : ?>
<dt><?php esc_html_e( 'Note:', 'Avada' ); ?></dt> <dd><?php echo wptexturize( $customer_note ); // WPCS: XSS ok. ?></dd>
<?php endif; ?>

<?php
// Additional customer details hook.
do_action( 'woocommerce_order_details_after_customer_details', $order );
?>
</dl>

<section class="woocommerce-columns woocommerce-columns--2 woocommerce-columns--addresses col2-set addresses">
<div class="woocommerce-column woocommerce-column--1 woocommerce-column--billing-address col-1">

<header class="title">
<h3><?php esc_attr_e( 'Billing address', 'woocommerce' ); ?></h3>
</header>

<address>
<p>
<?php $address = $order->get_formatted_billing_address(); ?>
<?php echo ( $address ) ? $address : esc_attr__( 'N/A', 'woocommerce' ); // WPCS: XSS ok. ?>
</p>
</address>
</div>

<?php if ( ! wc_ship_to_billing_address_only() && $order->needs_shipping_address() ) : ?>
<div class="woocommerce-column woocommerce-column--2 woocommerce-column--shipping-address col-2">
<header class="title">
<h3><?php esc_attr_e( 'Shipping address', 'woocommerce' ); ?></h3>
</header>
<address>
<p>
<?php $address = $order->get_formatted_shipping_address(); ?>
<?php echo ( $address ) ? $address : esc_attr__( 'N/A', 'woocommerce' ); // WPCS: XSS ok. ?>
</p>
<p>배송전화번호: <?php echo get_post_meta( $order->id, '_shipping_custom_tel_number', true ); ?></p>
</address>
</div>
<?php endif; ?>

</section>
<div class="clear"></div>

</section>
<?php endif; ?>
  3. 이메일에 배송 전화번호 추가
    1. 설치된 우커머스 플러그인 폴더 안에 woocommerce/templates/emails/email-addresses.php 파일 내용을 전체 복사합니다.
    2. 내 차일드 테마안에 Avada-child/woocommerce/emails/email-addresses.php 파일(경로가 바뀌는 것 주의)을 만들어 줍니다. 만약 차일드 테마안에 해당 폴더 구조가 존재하지 않는다면 직접 만들어 주면 됩니다. 아바다 차일드 테마안에 woocommerce 폴더를 만들고 그 안에 emails 폴더를 만듭니다. 다시 그 안에 email-addresses.php 파일을 만들어 넣어 줍니다.
    3. 차일드 테마에 만들어진 email-addresses.php 파일 안에 1번 woocommerce 플러그인에서 복사한 내용을 붙여 넣기 합니다.
    4. 차일드 테마에 붙여 넣기한 내용에 아래와 같이 빨간 코드 부분 1줄을 추가해 줍니다.(종합하면 본 플러그인의 코드를 1줄 추가하여 차일드 테마에 붙여 놓은 셈이 됩니다.)
    5. 이후 우커머스 상품 거래 과정에서 전송되는 이메일에 배송 전화번호가 추가됩니다.
    <?php
/**
* Email Addresses
*
* This template can be overridden by copying it to yourtheme/woocommerce/emails/email-addresses.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates/Emails
* @version 3.2.1
*/

if ( ! defined( 'ABSPATH' ) ) {
exit;
}

$text_align = is_rtl() ? 'right' : 'left';

?><table id="addresses" cellspacing="0" cellpadding="0" style="width: 100%; vertical-align: top; margin-bottom: 40px; padding:0;" border="0">
<tr>
<td style="text-align:<?php echo $text_align; ?>; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; border:0; padding:0;" valign="top" width="50%">
<h2><?php _e( 'Billing address', 'woocommerce' ); ?></h2>

<address class="address">
<?php echo ( $address = $order->get_formatted_billing_address() ) ? $address : __( 'N/A', 'woocommerce' ); ?>
<?php if ( $order->get_billing_phone() ) : ?>
<br/><?php echo esc_html( $order->get_billing_phone() ); ?>
<?php endif; ?>
<?php if ( $order->get_billing_email() ) : ?>
<p><?php echo esc_html( $order->get_billing_email() ); ?></p>
<?php endif; ?>
</address>
</td>
<?php if ( ! wc_ship_to_billing_address_only() && $order->needs_shipping_address() && ( $shipping = $order->get_formatted_shipping_address() ) ) : ?>
<td style="text-align:<?php echo $text_align; ?>; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; padding:0;" valign="top" width="50%">
<h2><?php _e( 'Shipping address', 'woocommerce' ); ?></h2>

<address class="address"><?php echo $shipping; ?>
<p>배송전화번호:<?php echo get_post_meta( $order->id, '_shipping_custom_tel_number', true ); ?></p>
</td>
<?php endif; ?>
</tr>
</table>
결과3-1. 아바다 테마의 결제 화면에 배송 전화번호 추가됨
결과3-2. 아바다 테마의 주문 완료 화면에 배송 전화번호 추가됨
결과3-3. 관리자의 주문 내역 확인 화면에 배송 전화번호 추가됨
결과3-4. 결제 완료 후 전송되는 이메일에 배송 전화번호 추가됨
결과3-5. 구매자의 구매 내역 확인 화면에 배송 전화번호 추가됨

주의할 점

아바다 테마에 배송 전화번호를 나름 깔끔하게 적용을 하는 방법으로 우커머스의 템플릿 파일과 테마의 템플릿 파일을 차일드 테마로 복사해 원하는 코드를 추가했습니다. 이렇게 적용하는 방법은 사용성이 가장 우수하면서도 이후에 테마나 우커머스가 업데이트되더라도 적용한 코드가 사라지지 않고 유지됩니다. 하지만 한가지 주의해야 할 점이 있습니다. 우커머스나 아바다 테마가 업데이트할 때 지금 여기서 복사해 수정한 파일이 업데이트되는 경우입니다. 만약 업데이트 항목 중에 여기서 복사한 파일 (아바다 테마의 Avada/templates/wc-view-order.php 파일과 우커머스 플러그인의 woocommerce/templates/emails/email-addresses.php 파일)이 수정된 내용이 있다면, 이 파일은 차일드 테마안의 파일이 사용되기 때문에 업데이트된 내용이 적용되지 않는다는 것입니다. (이유를 모르겠다면 이 문서를 읽고 꼭 이해 하시기 바랍니다.)

이 문제를 해결하기 위해 우커머스 플러그인과 아바다 테마가 업데이트될 때 해당 파일의 버전이 변경되었는지 비교해 보면 됩니다.
위에서 보여주는 파일의 버전은

wc-view-order.php 파일은 아바다 테마 5.1버전(현재 5.7버전) 부터 지금 까지 적용중이라고 표시되어 있습니다.(아래 이미지 부분 캡쳐)

파일이 최종 수정된 버전 표시

email-addresses.php 파일은 우커머스 3.2.1 버전(현재 3.5.0버전) 부터 지금까지 적용중이라고 표시되어 있습니다.(아래 이미지 부분 캡쳐)

파일이 최종 수정된 버전 표시

아바다 테마나 우커머스 플러그인이 업데이트 되었을 때 새로 설치된 본 파일의 버전이 변경되었는지 확인해 보면 수정된 사항이 있는지 확인 할 수 있습니다.

글쓴이 :
WPBOX.KR 운영자
AVADA.KR 운영자
EnnioLove.com 운영자
Facebook
everygofine@gmail.com
카테고리 우커머스태그 , , ,
인기글
구글맵 API 설정 후에도 “개발 목적”이라고 표시되는 경우
워드프레스 차일드테마 설치 Child theme
워드프레스 한국형 게시판_KBoard와 MangBoard
레볼루션 슬라이더 버전 4.X 사용법
Yoast seo 플러그 사용법 (1.General)
카페24 웹호스팅 보안서버 SSL 인증서 443 포트 사용
MAMP 사용기(내 컴퓨터에 로컬서버 구축하기)
사용자 정의 필드와 ACF (Advanced Custom Fields) 플러그인
워드프레스에서 글과 페이지의 차이
도메인 제한이 없는 유료 디비테마 소개(Divi Theme)

2개의 댓글이 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다