우커머스 내 계정 페이지에 새 탭 추가 방법 (+내 포인트 및 이력 표시하기)

워드프레스 우커머스(WooCommerce), Tutor LMS, 코스모스팜 회원관리, 엠샵 내계정 플러그인 등의 플러그인을 사용하여 제작한 인터넷 강의 사이트의 내 계정 페이지에 '내 포인트'를 표시하는 작업을 수행했습니다. 우커머스 내 계정 페이지에 새로운 탭을 추가할 수 있습니다. 'My Point"라는 새 탭을 추가하고 포인트를 DB로부터 조회하여 표시하고, 동시에 사용 내역도 함께 표시하는 방식으로 진행했습니다.

우커머스 내 계정 페이지에 새 탭 추가 방법

워드프레스 우커머스 쇼핑몰 사이트를 한국형 쇼핑몰처럼 꾸미려는 경우 엠샵에서 출시한 엠샵 내계정 플러그인을 사용할 수 있습니다.

우커머스 한국형 워드프레스 쇼핑몰에 최적화된 엠샵 내계정 플러그인 - 워드프레스 정보꾸러미

회원 등급(회원 역할)을 기준으로 콘텐츠 접근 권한을 설정하는 등 회원제 사이트 구축을 쉽게 하고 싶은 경우 케이보드(Kboard) 게시판으로 유명한 코스모스팜에서 개발한 코스모스팜 회원관리 플러그인을 사용할 수 있습니다.

우커머스의 내 계정 페이지에 새 탭을 추가하고 싶은 경우가 있습니다.

다음과 같은 코드를 사용하여 위와 같이 새 탭을 추가할 수 있습니다.

/**
 * WooCommerce My Account에 새로운 탭 추가 (기본 예제)
 */

// 1. 엔드포인트 등록
add_action('init', function() {
    add_rewrite_endpoint('new-tab', EP_ROOT | EP_PAGES);
});

// 2. 쿼리 변수 등록
add_filter('query_vars', function($vars) {
    $vars[] = 'new-tab';
    return $vars;
});

// 3. 내 계정 메뉴에 탭 추가
add_filter('woocommerce_account_menu_items', function($items) {
    // dashboard 다음에 추가
    $new_items = array();
    foreach ($items as $key => $label) {
        $new_items[$key] = $label;
        
        if ($key === 'dashboard') {
            $new_items['new-tab'] = 'New Tab';
        }
    }
    return $new_items;
});

// 4. 탭 콘텐츠 출력
add_action('woocommerce_account_new-tab_endpoint', function() {
    ?>
    <h2>New Tab</h2>
    <p>여기에 콘텐츠를 추가하세요.</p>
    <?php
});

// 5. 플러그인/테마 활성화 시 리라이트 규칙 플러시
register_activation_hook(__FILE__, function() {
    flush_rewrite_rules();
});

FTP/SFTP에 접속하여 차일드 테마 내의 함수 파일에 위의 코드를 추가할 수 있습니다.

내 계정에 My Point 탭을 추가하여 내 포인트 및 사용 이력 표시하기

위에 제시된 기본 코드를 응용하여 원하는 탭을 추가할 수 있습니다.

클라이언트 의뢰로 My Point 탭을 추가하고 사용자가 클릭하면 잔여 포인트가 표시되고 아래에 포인트 내역이 표시되도록 작업했습니다.

관리자로 접속하면 모든 사용자의 포인트 사용 내역이 표시되도록 했습니다.

디자인은 CSS를 사용하여 적절히 조정할 수 있습니다. 

포인트를 조회하는 코드는 데이터베이스를 체크하여 어느 테이블에 포인트 정보가 표시되는지 확인하여 코드를 만들 수 있습니다.

엠샵 내계정 플러그인을 사용하는 경우 설정 페이지의 내 계정 메뉴 목록에서 새로 추가한 탭을 끌어다가 적절한 위치로 변경한 다음, 저장 버튼을 누르면 내 계정 페이지에 새 탭이 표시될 것입니다.

참고로 코스모스팜 회원관리 플러그인을 사용하는 경우 플러그인에서 제공하는 훅(액션/필터)을 사용하여 효율적으로 커스텀할 수 있습니다. 코스모스팜에서 전체 액션/필터에 대한 매뉴얼은 제공하지 않지만, 플러그인 소개 페이지의 변경 내역에서 액션/필터 이름을 확인할 수 있습니다. 다음 글에서 코스모스팜 회원관리 플러그인의 액션/필터 목록을 정리했으니 참고하세요.

코스모스팜 회원관리 '페이지 권한 없음 메시지' 커스텀하기 - 워드프레스 정보꾸러미

👉 커스터마이징을 비롯하여 워드프레스나 웹호스팅 관련 문제로 해결에 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

마치며

이상으로 우커머스 쇼핑몰의 내 계정 페이지에 새 탭을 추가하는 방법에 대하여 살펴보았습니다.

워드프레스 사이트에서 멤버십을 정기 결제 방식으로 판매하고 싶은 경우 단비스토어에서 출시한 콘텐츠·서비스 유료화 솔루션을 사용하면 편리합니다. 저렴하게 직접 구현하고 싶은 경우에는 YITH 멤버십 플러그인과 구독 플러그인을 사용할 수 있습니다.

워드프레스에서 멤버십을 정기 결제 방식으로 판매하려는 경우 - 워드프레스 정보꾸러미

참고

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)