프로그래밍 방식으로 WooCommerce 내 계정 페이지를 편집하는 방법
게시 됨: 2020-12-22스토어의 내 계정 페이지를 사용자 정의하시겠습니까? 당신은 바로 이곳에 왔습니다. 이 가이드에서는 고객 경험을 개선하는 데 도움이 되도록 프로그래밍 방식으로 WooCommerce 내 계정 페이지를 편집하는 방법을 보여줍니다.
내 계정 페이지는 무엇입니까?
기본적으로 WooCommerce 스토어에는 사용자가 주문을 볼 수 있고 고객의 개인 정보, 청구서 수신 및 배송 주소에 대한 정보를 저장할 수 있는 내 계정 페이지 가 있습니다. 기본 내 계정 페이지 는 WooCommerce 단축 코드가 포함된 WordPress 페이지입니다.
[ woocommerce_my_account ]
이 기본 페이지에는 사용자가 주문 및 설정을 관리하는 데 필요한 모든 기본 정보가 있지만 내 계정 페이지를 편집하면 경쟁업체와 차별화되고 더 나은 사용자 경험을 제공할 수 있습니다.
WooCommerce에서 내 계정 페이지를 사용자 정의하는 이유는 무엇입니까?
훌륭한 UX를 제공하는 것이 전자 상거래 상점의 성공을 위한 열쇠라는 것은 비밀이 아닙니다. 사용자는 빠르고 편안하기 때문에 온라인으로 구매하므로 매장에서 놀라운 경험을 하는 데 필요한 도구를 제공하는지 확인해야 합니다.
대부분의 상점 소유자는 제품 페이지와 결제를 사용자 정의하는 데 관심을 집중하지만 내 계정 페이지는 잊어버립니다. 이 페이지는 등록된 사용자를 위해 설계된 페이지이므로 사용자 정의하면 사이트 경험을 개선하는 데 도움이 될 수 있습니다. 또한 고객이 매장을 다시 방문하도록 하고 매출 을 높이는 데 도움이 될 수 있습니다. 예를 들어 개인화된 거래 및 프로모션을 표시하는 특별 섹션을 만들 수 있습니다.
내 계정 페이지를 사용자 정의할 수 있는 최고의 플러그인을 이미 분석했습니다. 그러나 타사 도구를 설치하고 싶지 않고 약간의 코딩 기술이 있는 경우에 대비할 수 있는 방법이 있습니다. 이 가이드에서는 프로그래밍 방식으로 WooCommerce 내 계정 페이지를 편집하는 방법을 보여줍니다.
프로그래밍 방식으로 WooCommerce 내 계정 페이지를 편집하는 방법
WooCommerce에서 내 계정 페이지를 편집하는 두 가지 기술이 있습니다.
- 기본 WooCommerce 템플릿 파일을 재정의할 수 있습니다.
- WooCommerce 후크 사용
어떤 방법이 더 낫습니까? 이러한 각 옵션은 다양한 경우에 더 적합합니다. 일반적으로 가능한 경우 템플릿 파일을 덮어쓰는 대신 후크를 사용해야 합니다. 이것은 WordPress가 사이트를 사용자 정의할 때 권장하는 모범 사례 중 하나입니다.
그러나 기능이나 개체가 포함된 보다 복잡한 작업을 수행하려면 템플릿 파일을 편집해야 할 수 있습니다. 이 가이드에서는 두 가지 방법을 모두 사용하여 프로그래밍 방식으로 WooCommerce 내 계정 페이지를 편집하는 방법을 배웁니다. 상상할 수 있듯이 템플릿 파일 편집은 후크를 사용하는 것보다 더 많은 위험이 있으므로 원하는 옵션을 선택하기 전에 이를 염두에 두십시오.
1) 템플릿 파일을 무시하는 내 계정 페이지 사용자 정의
참고 : 이 방법에는 템플릿 파일을 재정의하는 작업이 포함되므로 시작하기 전에 사이트의 전체 백업을 만드는 것이 좋습니다. 방법을 모르는 경우 이 가이드를 확인하십시오. WooCommerce 템플릿을 사용자 정의하는 방법에 대한 자세한 내용은 이 게시물을 확인하세요.
WooCommerce 템플릿 파일을 재정의하는 프로세스는 하위 테마의 다른 파일을 재정의하는 것과 유사합니다. 아시다시피 하위 테마를 사용하면 테마를 업데이트할 때 사용자 지정 내용을 잃지 않고 테마를 편집할 수 있습니다. WooCommerce 플러그인에도 동일하게 적용되므로 하위 테마가 없는 경우 하나를 만들거나 이러한 플러그인을 사용할 수 있습니다.
먼저 WordPress 관리 대시보드 에서 플러그인 > 편집기 로 이동합니다. 그런 다음 플러그인 폴더로 이동하여 WooCommerce를 열고 템플릿 파일을 찾으십시오. 이를 위해 WordPress 플러그인 파일 편집기 또는 원하는 코드 편집기를 사용할 수 있습니다. WooCommerce 디렉터리에서 템플릿 파일을 열고 myaccount 폴더를 찾습니다.
plugins/woocommerce/templates/myaccount
/myaccount 폴더를 열면 내 계정 페이지에서 사용하는 모든 템플릿 파일을 찾을 수 있습니다. 
이것은 현재 귀하의 웹사이트에서 작동하는 기본 파일입니다. 이 파일을 덮어쓰려면 자식 테마에서 같은 이름으로 새 파일을 만들어야 합니다 . 그러나 빈 파일을 생성하면 원본 파일의 모든 기능이 비활성화됩니다. 따라서 사이트에 문제가 발생하지 않도록 하려면 기본 파일을 복사하여 테마 폴더에 붙여넣어야 합니다.
예를 들어 WooCommerce 설치에서 dashboard.php 파일을 복사하려고 한다고 가정해 보겠습니다. 자식 테마에 붙여넣기 전에 두 개의 중첩된 하위 디렉터리를 만들고 이름을 /woocommerce 및 /myaccount 해야 합니다. 그런 다음, 대시보드 .php 파일을 다음과 같이 붙여넣습니다. child_theme/woocommerce/myaccount/dashboard.php 
이제 Dashboard.php 파일을 열고 제대로 작동하는지 확인하기 위해 약간의 변경을 가하십시오. 그게 다야! WooCommerce 템플릿 파일을 재정의하는 방법을 배웠습니다. 그것이 첫 번째 단계입니다. 이제 한 단계 더 나아가 내 계정 페이지를 사용자 지정하는 방법을 살펴보겠습니다.
내 계정 페이지 대시보드 사용자 지정
템플릿 파일을 재정의하는 방법을 알았으므로 프로그래밍 방식으로 WooCommerce 내 계정 페이지를 편집하는 방법을 살펴보겠습니다. 이 섹션에서는 내 계정 페이지의 기본 대시보드를 사용자 지정하는 방법을 보여줍니다. 이 프로세스가 끝나면 내 계정 페이지가 다음과 같이 표시됩니다.
제목 이미지와 그 아래에 일부 텍스트를 추가했습니다. 또한 고객이 쉽게 연락할 수 있도록 사용자가 더 자주 방문하는 섹션에 대한 링크, 바닥글 및 일부 이미지 링크가 포함된 목록을 만들었습니다.
전체 스크립트
위의 스크린샷을 생성하는 최종 dashboard.php 파일입니다.
if ( ! 정의된( 'ABSPATH' ) ) {
출구; // 직접 접근하면 종료합니다.
}
$allowed_html = 배열(
'a' => array('href' => array(),)
);
?>
<h2>
<?php
printf(
/* 번역기: 1: 사용자 표시 이름 2: 로그아웃 url */
wp_kses( __( '안녕하세요 %1$s, 돌아왔습니다! ', 'woocommerce' ), $allowed_html ),
'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
esc_url( wc_logout_url() )
);
?>
</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:AND9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* 번역자: 1: 주문 URL 2: 주소 URL 3: 계정 URL. */
$dashboard_desc = __( '계정의 메인 대시보드입니다: ', 'woocommerce' );
if ( wc_shipping_enabled() ) {
/* 번역자: 1: 주문 URL 2: 주소 URL 3: 계정 URL. */
$dashboard_desc = __( '계정의 메인 대시보드입니다:', 'woocommerce' );
}
printf(
wp_kses( $dashboard_desc,$allowed_html),
esc_url( wc_get_endpoint_url( '주문' ) ),
esc_url( wc_get_endpoint_url( '편집 주소' ) ),
esc_url( wc_get_endpoint_url( '편집 계정' ) )
);
$ul_list = __('<ul>
<li><a href="%1$s">최근 주문</a> 보기</li>
<li><a href="%2$s">배송 및 청구서 수신 주소</a> 관리</li>
<li><a href="%3$s">비밀번호 및 계정 세부정보 수정</a></li>
</ul>');
$div_contact = __('
<div class="acc_contact">
<span class="acc_images">
<a href="#link to send whatsapp message"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#link to Facebook 프로필"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#twitter 프로필 링크"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#link to send email"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div>
<h4><i>사랑으로 만들어졌습니다!</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>여기에서 프로필 및 개인 정보를 관리하세요. 귀하에 대해 알 수 있도록 모든 필드를 작성하십시오. 귀하의 계정에서 만들어진 모든 버전은 웹사이트에 즉시 반영되므로 다른 사용자가 귀하와 귀하의 현재 요구 사항에 대해 지체 없이 알 수 있습니다.</p>
<?php
echo $ul_list.$div_footer.$div_contact;
코드를 보면 기본 템플릿에서 복사한 원본 코드가 모두 그대로 있는 것을 볼 수 있습니다. 일부 문자열을 수정하고 링크를 목록으로 재정렬했습니다. 그 위에 추가 스크립트를 사용하여 탭에 더 많은 콘텐츠를 추가했습니다. 변경 사항을 더 잘 이해하기 위해 기본 dashboard.php 를 확인할 수 있습니다.
이미지 추가
내 계정 페이지에 이미지를 표시하려면 이미지의 URL을 교체해야 합니다. 소셜 아이콘 이미지 링크에도 동일하게 적용됩니다.
CSS 사용자 정의
내 계정 페이지 및 기타 페이지를 사용자 지정하는 또 다른 방법은 CSS 스크립트를 사용하는 것입니다. 다음은 사용자 정의 Dashboard.php 파일의 스타일을 지정하는 데 사용한 CSS 스크립트입니다.
.woocommerce-MyAccount-content > h2:nth-child(2),
.woocommerce-MyAccount-content > h3:nth-child(4){
텍스트 정렬:가운데;
}
.acc_contact{
패딩 상단:20px;
텍스트 정렬:가운데;
}
.acc_contact > h3{
왼쪽으로 뜨다;
}
.acc_images{
여백:자동;
너비: 50%;
디스플레이: 블록;
}
#환영하다{
여백:자동;
}
.acc_images img {
여백-왼쪽:4px;
여백 오른쪽:4px;
디스플레이: 인라인 블록;
너비: 55픽셀;
}
#acc_footer{
여백 상단:15px;
배경색: #202020;
텍스트 정렬: 가운데;
테두리 반경: 15px;
}
#acc_footer > h4{
패딩 상단:20px;
색상:rgb(235, 228, 228);
글꼴 두께:굵게;
}
#acc_footer > img{
여백:자동;
패딩 하단:20px;
} 이 코드를 기본으로 사용하여 자식 테마의 style.css 파일에 붙여넣고 사이트의 모양과 느낌에 맞게 사용자 지정할 수 있습니다.
2. 후크로 WooCommerce 내 계정 페이지 편집
프로그래밍 방식으로 내 계정 페이지를 편집하는 두 번째 방법은 WooCommerce 후크를 사용하는 것입니다. 이를 위해서는 WooCommerce에서 후크가 작동하는 방식에 대한 기본적인 이해가 필요합니다. 후크에 익숙하지 않은 경우 이 가이드를 확인하는 것이 좋습니다.
A) 탭 이름 바꾸기
이 스크립트는 주소 탭의 이름을 귀하의 주소 로 변경합니다.
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999 );
기능 QuadLayers_rename_acc_adress_tab( $items ) {
$items['edit-address'] = '당신의 주소';
$items 반환;
}
B) 탭 제거
탭을 완전히 제거하려면 다음과 같이 unset() 함수를 사용하십시오.
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_address', 9999 );
기능 QuadLayers_remove_acc_address( $items ) {
설정 해제( $items['다운로드'] );
$items 반환;
}위 스크립트에서 다운로드 탭을 제거했습니다. $items 배열에서 탭 슬러그의 전체 목록을 찾을 수 있으므로 원하는 것을 선택할 수 있습니다.
$items = 배열( '대시보드' => __( '대시보드', '우커머스' ), '주문' => __( '주문', '우커머스' ), '다운로드' => __( '다운로드', '우커머스' ), '편집 주소' => _n( '주소', '주소', (int) wc_shipping_enabled(), '우커머스' ), '결제 수단' => __( '결제 수단', '우커머스' ), 'edit-account' => __( '계정 정보', '우커머스' ), '고객 로그아웃' => __( '로그아웃', '우커머스' ), );
C) 탭 및 콘텐츠 병합
내 계정 페이지를 사용자 지정하는 또 다른 옵션은 탭을 병합 하는 것입니다. 예를 들어 주소 탭을 제거하고 해당 콘텐츠를 계정 탭으로 이동하는 방법을 살펴보겠습니다.
// ------------------------------
// 1. 주소 탭 제거
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
기능 QuadLayers_remove_acc_tab( $items ) {
unset($items['편집 주소']);
$items 반환;
}
// -------------------------------
// 2. Addresses 탭의 내용을 기존 탭에 삽입(이 경우에는 edit-account)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );
이제 계정 탭이 다음과 같이 표시됩니다. 
D) 사용자 정의 콘텐츠가 있는 새 탭 추가
이제 내 계정 페이지에 콘텐츠를 추가 하는 방법을 살펴보겠습니다. 이 예에서는 사용자가 지원 티켓을 쉽게 볼 수 있는 지원이라는 새 탭을 추가할 것입니다. 타사 플러그인에서 제공하는 두 개의 단축 코드를 사용하여 흥미로운 콘텐츠를 표시하지만 새 탭에서 원하는 단축 코드를 사용할 수 있어야 합니다.
그러나 WooCommerce와의 비호환성으로 인해 일부 단축 코드가 작동하지 않을 수 있습니다. WooCommerce 내 계정 페이지에 맞춤 콘텐츠가 포함된 지원 탭을 추가하려면 하위 테마의 functions.php 파일에 다음 코드를 붙여넣습니다.
// 1. 새 엔드포인트 등록
// 참고: 영구 링크를 다시 저장하지 않으면 404 오류가 발생합니다.
기능 QuadLayers_add_support_endpoint() {
add_rewrite_endpoint( '지원', EP_ROOT | EP_PAGES );
}
add_action( '초기화', 'QuadLayers_add_support_endpoint' );
// ------------------
// 2. 새 쿼리 추가
기능 QuadLayers_support_query_vars( $vars ) {
$vars[] = '지원';
반환 $vars;
}
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );
// ------------------
// 3. 새 끝점 삽입
기능 QuadLayers_add_support_link_my_account( $items ) {
$items['지원'] = '지원 ';
$items 반환;
}
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account' );
// ------------------
// 4. 새 엔드포인트에 콘텐츠 추가
기능 QuadLayers_support_content() {
echo '<h3>지원</h3><p>지원 영역에 오신 것을 환영합니다. 프리미엄 고객은 여기에서 지원 티켓을 관리하고 웹사이트에 문제가 있는 경우 티켓을 제출할 수 있습니다. 빠르고 효율적인 솔루션을 제공하기 위해 최선을 다할 것입니다.</p>';
echo do_shortcode( '[티켓-단축코드]' );
echo do_shortcode( '[wpforms]' );
}
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content' );
새 탭을 클릭할 때 404 페이지를 찾을 수 없음 오류가 발생하면 WordPress 대시보드 > 설정 > 영구 링크로 이동하여 영구 링크 페이지를 열고 하단의 저장 버튼을 클릭합니다.
스크립트는 4개의 섹션으로 나뉩니다. 그들 각각은 다른 작업을 수행하므로 상점에 추가하려는 섹션을 사용합니다. 또한 스크립트(4)의 마지막 섹션에서 do_shortcode() 함수의 단축 코드를 바꿀 수 있음을 명심하십시오. 이것이 새로운 지원 탭의 최종 결과입니다. 
결론
대체로 기본 내 계정 페이지에는 사용자가 필요로 하는 기본 정보가 있지만 매우 기본적입니다. 따라서 상점에서 사용자 경험을 개선하려면 내 계정 페이지를 사용자 정의해야 합니다. 이것은 상점의 매우 중요한 섹션을 향상시키는 데 도움이 될 뿐만 아니라 판매를 향상시키는 데 도움이 됩니다.
내 계정 페이지를 사용자 정의하는 몇 가지 플러그인이 있습니다. 그러나 더 이상 플러그인을 설치하고 싶지 않고 코딩 기술이 있는 경우 프로그래밍 방식으로 WooCommerce 내 계정 페이지를 편집할 수 있습니다. 이를 위해 두 가지 옵션이 있습니다.
- 템플릿 파일 재정의
- WooCommerce 후크 사용
두 가지 방법 모두 작업을 완료하지만 일반적으로 가능한 경우 후크를 사용하는 것이 좋습니다. 덜 위험하며 WordPress에서 권장하는 모범 사례 중 하나입니다. 이 가이드에서는 두 가지 방법을 모두 사용하여 수행할 수 있는 몇 가지 예를 보았습니다. 이 스크립트를 가이드로 사용하여 아이디어를 얻고 상점에서 내 계정 페이지를 최대한 활용하는 데 사용하는 것이 좋습니다.
마지막으로 내 계정 페이지를 최대한 활용하기 위한 추가 가이드는 다음 가이드를 참조하세요.
- 플러그인 유무에 관계없이 WooCommerce 내 계정을 사용자 정의하는 방법
- WooCommerce 내 계정 페이지를 사용자 정의하는 최고의 플러그인
내 계정 페이지에 어떤 변경 사항이 있습니까? 튜토리얼 이후에 문제가 있었나요? 아래 의견 섹션에서 알려주십시오!