워드프레스 쇼핑몰 제작 시 필요한 우커머스 한글 수정 작업

워드프레스 쇼핑몰 제작 할때 가장 많이 사용되는 쇼핑몰 플러그인이 우커머스 ( Woocommerce ) 입니다. 워드프레스 쇼핑몰은 우커머스다라고 할정도로 가장 많이 사용되고 있고, 그만큼 강력한 기능을 제공해주고 있습니다. 기존에 이커머스 쇼핑몰 부분의 최강자는 마젠토였는데, 우커머스와 쇼피파이의 추격에 크게 흔들리는 모습이네요. 우커머스는 쇼핑몰에 필요한 기본적인 기능 뿐만 아니라 플러그인 형태로 다양한 기능을 확장할 수 있게 수많은 API 를 제공해주고 있습니다. 이를 이용해 대부분의 유명 유료테마 들은 우커머스와 호환성을 유지하고 있습니다.

국내에서도 쇼핑몰창업을 고려할 때 많은 분들이 카페24, 고도몰 등의 쇼핑몰 솔루션 뿐만 아니라 워드프레스 쇼핑몰 제작 을 최우선적으로 고려할 정도 인기를 모으고 있습니다. 코드엠샵, 보부상 BBS, 단비스토어 등 다양한 업체에서 워드프레스 쇼핑몰 개발 플랫폼과 플러그인을 제공해주고 있어서 큰 어려움 없이 개발을 할 수 있습니다. 그런데 막상 쇼핑몰을 제작을 했는데, 작은 부분이지만 눈에 거슬리는 부분이 있습니다. 그건 바로 영문으로 되어 있는 버튼, 안내문구, 경고 문구 들입니다. 그냥 보면 쉽게 고칠수 있어보이지만, 수정하려다보면 의외로 까다로워 의뢰를 주시는 경우가 많이 있습니다.

[wpsm_ads2]

한글화 작업이 어려운 이유는 뭘까요?

보통 우커머스 한글화 작업에 관한 글이나 블로그 포스트 들을 보면 로코 번역 플러그인 ( Loco Translate ), WPML 을 이용해서 문구들을 편집할수 있는 방법을 설명해주고 있습니다. 저도 많은 부분 위의 두 플러그인을 이용해서 처리하고 있습니다. 그런데 문제는 위의 플러그인에서 번역이 안되는 경우가 많이 있는 것입니다. 아무리 찾아봐도 로코 단어 리스트에는 없으니 답답한 거죠. 그렇다고 파일을 뒤진다고 해서 쉽게 나오지도 않습니다. 왜냐하면 테마들마다 우커머스의 기본 템플릿과 코어파일들을 각자의 디자인에 맞게 수정을 하게 되는데, 그 때 코드의 내용, 템플릿파일의 위치, 리소스 파일 (JS ) 의 위치가 달라지기때문입니다. 그리고 다국어 처리 방법도 다른 경우가 대다수입니다. 그렇다면 문구의 위치를 찾아야 하는데 찾다보면 시간이 무한정 지나가는 경우가 많이 있습니다. 저같은 경우는 리눅스에서 find 명령어로 빨리 찾아내는 편이지만, 대부분 그러지 못하다보니 어려움을 겪으시더라구요.

워드프레스 쇼핑몰 제작 시 우커머스 한글 수정 방법

우커머스 한글 수정 방법은 여러가지가 있습니다.
번역플러그인이용, po / mo 파일 생성, 우커머스 훅이용,  찾아서 직접 수정 하는 방법들이 있습니다.
어떤 문구를 바꾸고자하느냐에 따라 사용법은 달라지게 됩니다.

1) Loco Translate

이 플러그인을 이용하게 되면 각종 워드프레스 플러그인과 테마들의 번역본을 쉽게 만들수 있습니다.
기존에 만들어진 번역파일들을 불러와서 사용할수 있고, 우커머스나 유명한 테마들은 이미 상당부분 번역이 되어 있어서 이 플러그인만 설치를 해도 대부분의 문구들은 한글로 수정이 됩니다. 그리고  마음에 안드는 문구는 직접 수정해서 새로운 번역본을 만들 수 있습니다.

2) PO / MO 파일

워드프레스에서 다국어를 처리할 때 사용하는 것이 PO / MO 파일입니다.
플러그인이나 테마 마다 사용하고자하는 언어의 파일을 만들어서 특정 위치에 업로드하면 자동으로 다국어를 인식 하게 됩니다. 보통 한국어는  woocommerce-ko_KR.mo, woocommerce-ko_KR.po 이런식의 파일 이름을 가지게 됩니다. po 파일은 텍스트로 직접 수정이 가능한 파일이고, mo 파일은 po 파일을 바이너리 파일로 변환한 것인데, po 파일을 만든뒤 변환사이트에서 mo 로 변환을 하면됩니다. 업로드시에는 두가지 파일을 모두 업로드 해주어야합니다. 이 파일이 위치하는 곳은 테마나 플러그인마다 다른데, 아래 처럼 총 3곳이 있습니다.

/wp-content/languages

/wp-content/plugins/플러그인이름/languages

/wp-content/themes/테마이름/languages

한글 문구를 수정하고자 하면 위의 위치에서 해당 po 파일을 찾아 수정을 하면 됩니다. 그런데 po 파일을 수정을 한다고 해서 바로 반영이 되는 것이 아니라 수정한 po 파일을 아래 사이트에서 mo 파일로 변환한뒤, 두개의 파일을 다시 같은 위치에 업로드해주어야합니다.

https://po2mo.net/

http://tools.konstruktors.com/

워드프레스 쇼핑몰 제작 우커머스 한글 수정 작업

워드프레스 쇼핑몰 제작 우커머스 한글 수정 작업

3) 우커머스 훅이용

우커머스의 카트(장바구니)  페이지, 체크아웃 (결재) 페이지, 상세페이지  등 주요 쇼핑몰 기능들이 있는 페이지의 문구들은 위의 작업에서 수정이 잘안되는 경우가 많이 있습니다. 이런 경우 우커머스에서 훅(hook) 이라는 것을 이용해서 수정을 할수 있게 해주는데, 구글에서 검색을 해보거나 우커머스 페이지에 가면 많은 예제와 코드들을 찾을 수 있습니다. 아래에서 작업 사례 설명때 몇가지 코드를 말씀드리겠습니다. 이 코드들은 function.php 에 붙여 넣어주기만 하면 바로 적용이 됩니다. 가령 Checkout 버튼이나 Add to Cart  버튼, 상세페이지 리뷰 탭의 문구 등을 수정할 때 사용됩니다.

4) 직접 찾아서 수정

이래도 저래도 안될때는 직접 찾아서 고쳐줘야 합니다.
원래 직접찾아서 고치는 것은 별로 권장하는 방법이 아닙니다. 하지만 우커머스, 테마, 플러그인 개발자들이 신이 아니다 보니 완벽하게 다국어 처리를 못하는 경우도 있고, 건성으로 짜놓은 경우도 있어 이렇게 수정을 해야될때도 있습니다. 이때는 그 문구가 어떤 파일에 있는지 찾는데 시간이 많이 걸리는데, 리눅스를 다룰수 있으면 find 와 grep 명령어를 이용해서 좀더 빠르게 찾아낼수 있습니다. 종종 아작스 처리나 자바스크립트를 이용해 삽입되어진 문구들이 있는데, 이것은 js 파일에서 찾아야합니다. 그런데 js 는 대부분, 미니파이된 min.js 파일과 함께 있기 때문에, min.js 파일을 수정을 해주어야합니다.

[wpsm_ads1]

[wpsm_ads2]

우커머스 한글 수정 작업 사례

1) PROCEED TO CHECKOUT, ADD TO CART, VIEW CART 버튼 ( 훅이용, 필터 )

관리자에서 [외모]->[테마편집기]->function.php 파일에 복사해서 붙여넣으면 됩니다.

우커머스 영문버튼 한글 수정

우커머스 영문버튼 한글 수정

[wpsm_codebox style=”1″]

/*Proceed to Checkout*/

remove_action( ‘woocommerce_proceed_to_checkout’, ‘woocommerce_button_proceed_to_checkout’, 20 );
add_action(‘woocommerce_proceed_to_checkout’, ‘sm_woo_custom_checkout_button_text’,20);

function sm_woo_custom_checkout_button_text() {
$checkout_url = WC()->cart->get_checkout_url();
?>
<a href=”<?php echo $checkout_url; ?>” class=”checkout-button button alt wc-forward”><?php _e( ‘결재하기’, ‘woocommerce’ ); ?></a>
<?php
}

/*Add to cart*/
add_filter( ‘woocommerce_product_single_add_to_cart_text’, ‘sm_woo_custom_cart_button_text’ );
add_filter( ‘woocommerce_product_add_to_cart_text’, ‘sm_woo_custom_cart_button_text’ );

function sm_woo_custom_cart_button_text() {
return __( ‘장바구니담기’, ‘woocommerce’ );
}

/*View Cart*/
function sm_text_view_cart_strings( $translated_text, $text, $domain ) {
switch ( $translated_text ) {
case ‘View Cart’ :
$translated_text = __( ‘장바구니보기’, ‘woocommerce’ );
break;
}
return $translated_text;
}
add_filter( ‘gettext’, ‘sm_text_view_cart_strings’, 20, 3 );
[/wpsm_codebox]

2) 체크아웃페이지 필드 플레이스홀더 문구 변경 ( 훅이용, 필터 )

우커머스 체크아웃 페이지 필드 수정

우커머스 체크아웃 페이지 필드 수정

체크아웃페이지의 필드 레이블, 플레이스홀더, 버튼 들은 대부분 로코나 PO 파일로 처리가 가능하지만, 우커머스에서 제공해주는 코드로도 손쉽게 수정할 수 있습니다.  아래는 결재주소의 플레이스홀더 문구를 수정하는 코드인데, 관리자에서 [외모]->[테마편집기]->function.php 파일에 복사해서 붙여넣으면 됩니다.

[wpsm_codebox style=”1″]
function webendev_woocommerce_checkout_fields( $fields ) {
$fields[‘billing_address_2’][‘placeholder’] = ‘주소 기타, 건물 이름, 동, 호수 (필수)’;
return $fields;
}
add_filter( ‘woocommerce_billing_fields’, ‘webendev_woocommerce_checkout_fields’ );
[/wpsm_codebox]

더욱 자세한 내용은 아래 주소에 나와있고, 직접 코드를 구성하기가 어려운 분들은 문의나 작업의뢰를 주시면 답변을 드리겠습니다.

체크아웃 필드 수정 ( 액션과 필터 사용 ) 매뉴얼 ( Customizing checkout fields using actions and filters)

Write a comment