WooCommerce 사용자 정의 내 계정 페이지를 만드는 방법
게시 됨: 2021-05-11
WooCommerce "내 계정" 페이지를 사용자 정의하는 방법을 찾고 있습니까? 계정 페이지 편집은 WooCommerce 스토어에서 가장 중요한 페이지 중 하나입니다. 이 페이지는 전체 온라인 상점을 원활하게 운영하는 데 필수적이기 때문에 멋진 디자인을 가져야 합니다.
사용자가 계정 관리를 최대한 활용하고 더 많은 판매를 전환하고 고객이 재구매를 유도할 수 있는 방식으로 설계되어야 합니다.
'내 계정' 페이지와 그 하위 페이지는 단축 코드를 사용하여 사이트의 어느 곳에서나 표시할 수 있습니다. 단축 코드를 사용하면 WordPress 게시물, 페이지 및 사이드바에 동적 콘텐츠를 쉽게 추가할 수 있습니다.
WooCommerce 사용자 정의 내 계정 페이지
이 간단한 튜토리얼에서는 사용자 정의 PHP 스크립트를 사용하여 '내 계정' 페이지의 모양, 느낌, 레이아웃, 콘텐츠 및 디자인을 사용자 정의하는 방법을 보여줍니다. 즉, 계속 진행하기 전에 약간의 코딩 지식이 필요합니다.
PHP 사용자 정의에 익숙하다면 WooCommerce에서 거의 모든 것을 달성할 수 있습니다. 즉, 사용자 지정 탭을 추가하거나, 탭의 이름을 바꾸거나, 탭을 제거하거나, 탭 내용을 병합할 수 있습니다.
이를 달성할 수 있는 방법을 살펴보겠습니다.
PHP 조각을 사용하여 내 계정 페이지를 편집하는 단계
이 섹션에서는 WooCommerce 후크를 사용합니다. 이것은 WordPress가 사이트를 사용자 정의할 때 권장하는 모범 사례 중 하나이기 때문입니다.
사용자 지정 탭을 추가하고, 탭의 이름을 바꾸고, 탭을 제거하고, 탭 내용을 병합합니다.
프로그래밍 방식으로 내 계정 페이지를 편집하기 위해 따라야 하는 단계는 다음과 같습니다.
- WordPress 사이트에 로그인하고 관리자로 대시보드 에 액세스합니다.
- 대시보드 메뉴에서 모양 메뉴 > 테마 편집기 메뉴 를 클릭합니다. 테마 편집기 페이지가 열리면 PHP 코드 조각을 추가할 테마 함수 파일을 찾으십시오.
- 주소 탭의 이름을 배달 주소로 변경하려면 php 파일 에 다음 코드를 추가 합니다. 동일한 코드를 사용하여 탭의 이름을 바꿀 수 있습니다.
add_filter( 'woocommerce_account_menu_items', 'njengah_rename_address_my_account', 9999 );
function njengah_rename_address_my_account( $items ) {
$items['edit-address'] = 'Delivery Address';
return $items;
}
- 결과는 다음과 같습니다.
- 주소 탭을 제거하려면 php 파일 에 다음 코드를 추가 하십시오.
add_filter( 'woocommerce_account_menu_items', 'njengah_remove_address_my_account', 9999 );
function njengah_remove_address_my_account( $items ) {
unset( $items['edit-address'] );
return $items;
}
- 다음은 제거하려는 탭을 선택할 수 있도록 $items 배열에 있는 탭 슬러그의 전체 목록입니다.
$items = array( 'dashboard' => __( 'Dashboard', 'woocommerce' ), 'orders' => __( 'Orders', 'woocommerce' ), 'downloads' => __( 'Downloads', 'woocommerce' ), 'edit-address'; => _n( 'Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce' ), 'payment-methods' => __( 'Payment methods', 'woocommerce' ), 'edit-account' => __( 'Account details', 'woocommerce' ), 'customer-logout' => __( 'Logout', 'woocommerce' ), );
- 탭과 콘텐츠를 병합하는 것도 가능합니다. 예를 들어 주소 탭을 제거하고 해당 콘텐츠를 계정 탭으로 이동할 수 있습니다. php 파일 에 다음 코드를 추가하면 됩니다.
// -----------------------------
// 1. Remove the Addresses tab
add_filter( 'woocommerce_account_menu_items', 'njengah_remove_acc_tab', 999 );
function njengah_remove_acc_tab( $items ) {
unset($items['edit-address']);
return $items;
}
// -------------------------------
// 2. Insert the content of the Addresses tab into an existing tab (edit-account in this case)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );
- 결과는 다음과 같습니다.
- 이 페이지에서 사용자 정의 탭을 만들 수도 있습니다. 예를 들어 사용자가 지원 티켓을 쉽게 볼 수 있는 지원이라는 새 탭을 추가할 수 있습니다. 이를 수행하려면 php 파일 에 다음 코드를 추가 하십시오.
/**
* Add New Tab on the My Account page
*/
// ------------------
// 1. Register new endpoint (URL) for My Account page
// Note: Re-save Permalinks or it will give 404 error
function njengah_add_premium_support_endpoint() {
add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'njengah_add_premium_support_endpoint' );
// ------------------
// 2. Add new query var
function njengah_premium_support_query_vars( $vars ) {
$vars[] = 'premium-support';
return $vars;
}
add_filter( 'query_vars', 'njengah_premium_support_query_vars', 0 );
// ------------------
// 3. Insert the new endpoint into the My Account menu
function njengah_add_premium_support_link_my_account( $items ) {
$items['premium-support'] = 'Premium Support';
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'njengah_add_premium_support_link_my_account' );
// ------------------
// 4. Add content to the new tab
function njengah_premium_support_content() {
echo 'Premium WooCommerce Support. Welcome to the WooCommerce support area. As a premium customer, you can submit a ticket should you have any WooCommerce issues with your website, snippets or customization. <i>Please contact your theme/plugin developer for theme/plugin-related support.</i></p>';
echo do_shortcode( ' /* your shortcode here */ ' );
}
add_action( 'woocommerce_account_premium-support_endpoint', 'njengah_premium_support_content' );
// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format
- WPForms와 같은 타사 플러그인을 사용하여 지원 페이지를 만들 수 있습니다. 그런 다음 마지막 줄에 단축 코드를 붙여넣을 수 있습니다. 결과는 다음과 같습니다.
결론
지금쯤이면 계정 페이지를 사용자 정의할 수 있을 것입니다. 이 페이지를 편집하기 전에 하위 테마를 만드는 것이 좋습니다. 이렇게 하면 업데이트 중에 변경 사항이 손실되지 않습니다. 이 튜토리얼이 최고의 솔루션을 제공했기를 바랍니다.
유사한 기사
- 100개 이상의 팁, 트릭 및 스니펫 Ultimate WooCommerce Hide Guide
- 체크아웃 후 WooCommerce 리디렉션: 맞춤 감사 페이지로 리디렉션
- WooCommerce 감사 페이지를 변경하는 방법
- 상점 테마 WooCommerce에서 태그를 숨기는 방법
- 특정 범주에 대한 결제 수단을 비활성화하는 방법
- WooCommerce 제품 페이지에서 수량 필드 숨기기 또는 제거
- WooCommerce 내 계정 페이지 리디렉션을 추가하는 방법
- 내 계정 페이지에서 대시보드를 숨기는 방법 WooCommerce
- WooCommerce에서 결제 수단을 얻는 방법 » 코드 예
- WooCommerce Buy One Get One 설정 방법
- WooCommerce에서 제품을 내보내는 방법
- WooCommerce에서 제품을 복제하는 방법
- CSS에서 마지막 자식을 제외하고 모두 선택하는 방법 » CSS가 마지막 자식이 아닌 예
- 다운로드 메뉴를 제거하는 방법 내 계정 페이지 WooCommerce
- WooCommerce 최대 또는 최소 주문 수량을 설정하는 방법
- 결제 시 WooCommerce 업로드 파일을 설정하는 방법
- 쇼핑 페이지에서 카테고리를 숨기는 방법 WooCommerce
- WooCommerce Checkout 필드 자리 표시자 텍스트를 변경하는 방법
- 내 계정에서 다운로드를 숨기는 방법 WooCommerce
- 쿠폰 코드 자리 표시자를 변경하는 방법 WooCommerce