쇼핑몰을 구축하다보면 내 계정을 섬세하게 조정할 필요가 있는데요. 쇼핑몰은 일반 블러그 사이트와 달리 회원 관리가 매우 중요하기 때문에 회원의 기본 정보를 보여주는 내 계정(My account) 화면은 사용자 경험 관점에서 매우 중요한 요소라고 할 수 있습니다.
여기에서는 우커머스 내 계정(My account) 내 계정 상세(account detail) 화면에 나오는 각 필드들을 없애는 방법에 대해서 알아 봅니다.
Custom CSS 코드 활용
다른 요소들은 그대로 두고 단지 보이지 않게만 만드는 방법입니다. 흔히 사용하는 css code 중 display :none;을 사용합니다.
이러한 css 코드 사용은 데이타는 그대로 두고 보이지 읺게만 합니다.
아래 css 코드는 과격하게 비밀번호와 관련된 필드만 남겨좋고 모든 필드를 보이지 않게 만듭니다.
이 경우 쇼핑몰 회원은 오직 비밀번호만 변경할 수 있고, 다른 정보를 보거나, 변경할 수 없습니다.
.woocommerce-account form.edit-account > p.woocommerce-form-row {
display: none;
}Code language: PHP (php)위는 너무 과격하기 때문에 일부 항목만 보이지 않게 css 코드를 세팅하는 방법입니다.
우리나라와 같은 동양권은 이름과 성이 구분되어 많이 거슬려하죠. 이럴 경우는 성에 해당하는 last_name 필드를 숨기거나 없애고 싶을 것입니다.
이럴 경우 아래와 같은 css 코드를 사용합니다.
.woocommerce-EditAccountForm .woocommerce-form-row--last {
display: none;
}Code language: PHP (php)우커머스 내 계정(My account)에서 사용되는 여러 필드들을 제어하기 위한 css 코드 이름은 아래와 같으니 참고하시기 바랍니다. 이 코드들을 응용해 제 필드들을 보이지 않게 만들 수 있습니다.
- First Name: account_first_name, .woocommerce-form-row–last
- Last Name: account_last_name, .woocommerce-form-row–first
- Email Address: account_email, .woocommerce-form-row–wide
- Current Password: password_current, .woocommerce-form-row–wide
- New Password: password_1, .woocommerce-form-row–wide
- Confirm New Password: password_2, .woocommerce-form-row–wide
PHP code spineet 이용
이번에는 PHP 코드를 이용하는 방법에 대해서 알아봅니다.
물론 여기 내 계정(Mt account)에는 워드프레스가 자랑하는 Hooks은 없습니다. 따라서 한가지 php 명령으로 없애거나, 지우거나, 보이지 않게 할 수는 없습니다.
따라서 php 명령을 사용하드라도 다른 작업을 해주어야 합니다.
functions.php에 코드 추가
우선 functions.php에 아래 코드를 추가합니다. 사용자에 따라서 child theme에 추가해도 좋고, MU-Plugin에 추가해도 됩니다.
add_filter('woocommerce_save_account_details_required_fields', 'remove_required_fields');
function remove_required_fields( $required_fields ) {
unset($required_fields['account_first_name']);
unset($required_fields['account_last_name']);
return $required_fields;
}Code language: PHP (php)내 계정(My account) 폼에서 필드 제거
다음으로는 내 계정(my account) 폼에서 필드를 직접 제거하는 것입니다. 이는 우커머스의 myaccount 템플릿을 변경하는 것입니다.
먼저 우커머스의 템플릿 폴더 아래 ” /wp-content/plugins/woocommerce/templates/myaccount/includes/ “폴더로 이동합니다.
여기서 ” form-edit-account.php “파일을 다운받습니다.
이 파일 ” form-edit-account.php “을 편집기로 열어서 아래 내용을 지웁니다.
<p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
<label for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_first_name" id="account_first_name" autocomplete="given-name" value="<?php echo esc_attr( $user->first_name ); ?>" />
</p>
<p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
<label for="account_last_name"><?php esc_html_e( 'Last name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_last_name" id="account_last_name" autocomplete="family-name" value="<?php echo esc_attr( $user->last_name ); ?>" />
</p>Code language: PHP (php)이 수정된 파일을 child theme의 아래 폴더에 올립니다. 그러면 끝납니다.
/wp-content/themes/YOUR CHILD THEME FOLDER/woocommerce/myaccount/
