우커머스 내 계정(My ccount)의 필드 수정 하기

Updated on 2019-09-02 by

쇼핑몰을 구축하다보면 내 계정을 섬세하게 조정할 필요가 있는데요. 쇼핑몰은 일반 블러그 사이트와 달리 회원 관리가 매우 중요하기 때문에 회원의 기본 정보를 보여주는 내 계정(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/

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션입니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

우분투 20.04와 PHP 8 기반 워드프레스 설치 방법

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Subscribe
Notify of
guest
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments