WooCommerce 대시보드 맞춤 설정 방법: 쉬운 가이드

웹사이트의 밋밋하고 재미없는 WooCommerce 내 계정 페이지에 질리셨나요? WooCommerce 대시보드를 손쉽게 맞춤 설정하고 고객 경험을 향상시킬 방법을 찾고 계신가요? 바로 여기 있습니다!

WooCommerce의 '내 계정' 페이지는 단순한 대시보드 그 이상입니다. 고객 만족도와 참여도를 높이는 데 매우 중요한 접점이죠 WooCommerce 개발 에 익숙하지 않은 사람이라면 이 페이지를 맞춤 설정하는 것이 부담스럽고 ​​불편하게 느껴질 수 있습니다 .

그래서 저희는 여러분이 WooCommerce 대시보드를 손쉽게 맞춤 설정하는 방법을 안내해 드리고자 합니다. 미리 디자인된 템플릿과 내장 기능을 갖춘 강력한 WooCommerce 플러그인을 사용하면 큰 비용을 들이거나 소중한 시간을 낭비하지 않고도 시각적으로 매력적이고 기능적인 대시보드를 만들 수 있습니다.

그럼 WooCommerce 대시보드를 쉽게 맞춤 설정하는 방법을 알아보겠습니다.

WooCommerce 대시보드를 맞춤 설정해야 하는 이유는 무엇일까요?

WooCommerce 대시보드를 맞춤 설정하는 것은 단순히 보기 좋게 만드는 것만이 아니라, 여러분과 고객 모두의 전반적인 경험을 개선하는 것입니다. 다음은 그만한 노력을 기울일 가치가 있는 이유입니다.

사용자 경험 향상

내 계정 페이지는 고객에게 가장 중요한 영역 중 하나입니다. 고객은 이곳에서 주문을 관리하고, 배송을 추적하고, 개인 정보를 업데이트합니다. 하지만 기본 WooCommerce 레이아웃이 모든 사용자의 요구를 충족하는 것은 아닙니다.

이 페이지를 맞춤 설정하면 고객이 결제 방법, 배송 주소 등과 같은 추가 정보를 한 곳에서 관리할 수 있습니다. 고객이 자신에게 가장 중요한 정보를 쉽게 찾고 업데이트할 수 있다면, 더 오래 머무르고 더 자주 방문할 가능성이 높아집니다.

브랜드 정체성에 맞춰 정렬하세요

모든 비즈니스는 고유한 분위기를 가지고 있으며, 내 계정 페이지도 이를 반영해야 합니다. 대시 보드 레이아웃, 색상 및 텍스트 스타일을 웹사이트 디자인 .

세련되고 미니멀한 디자인을 원하든, 대담하고 시선을 사로잡는 디자인을 원하든, 맞춤형 대시보드는 모든 고객 접점에서 브랜드 정체성을 확실하게 드러낼 수 있도록 보장합니다.

관리자와 고객을 위한 기능 개선

의 기본 ' 내 계정' 페이지는 스토어 소유자와 고객 모두에게 다소 제한적일 수 있습니다. 스토어 관리자라면 주문 관리나 고객 데이터에 대한 빠른 접근과 같은 중요한 도구에 대한 바로가기가 필요할 것입니다.

고객에게는 맞춤형 대시보드를 통해 주문 내역이나 특별 할인 혜택과 같은 주요 정보를 강조 표시할 수 있습니다. 이를 통해 탐색이 더욱 원활하고 직관적이 되어 모든 사용자의 경험이 향상됩니다

알아두세요: 스토어 운영자를 위한 최고의 WooCommerce 마케팅 팁으로 매출을 늘리세요

WooCommerce 대시보드를 사용자 지정하는 방법

WooCommerce 대시보드를 맞춤 설정하는 두 가지 간편한 방법을 살펴보겠습니다

방법 1: 플러그인을 사용하여 WooCommerce 대시보드 사용자 지정

코드를 작성하지 않고 WooCommerce 대시보드를 꾸미고 싶다면 플러그인이 아주 간단한 방법입니다. Custom My Account for WooCommerce 및 WPMet Tools .

1단계: 플러그인 설치

• WordPress 관리자 페이지로 이동하여 플러그인 ⟶ 새 플러그인 추가를 .

• 검색창에 설치하려는 플러그인 이름(예: "Custom My Account for WooCommerce" 또는 "WPMet Tools")을 입력하세요

• 찾으셨으면 ' 지금 설치'를 다음 '활성화'를 .

2단계: 대시보드 구성 시작하기

플러그인이 활성화되면 플러그인 대시보드 메뉴에 새로운 설정 옵션이 표시됩니다. 다음 단계를 따라 진행하세요

3단계: WooCommerce용 내 계정 사용자 지정:

내 계정 의 항목 순서를 쉽게 재배열할 수 있습니다 . 예를 들어 다음과 같이 할 수 있습니다.

• 메뉴 항목 재배치 : 메뉴 항목을 드래그 앤 드롭하여 원하는 대로 정렬하세요.

• 색상 변경 : 탭이나 사이드바를 브랜드 색상에 맞추고 싶으신가요? 이 부분도 맞춤 설정할 수 있습니다.

• 섹션 표시 또는 숨기기 : 상점에 적용되지 않는 청구 또는 배송 주소와 같은 섹션을 숨길 수 있습니다.

WPMet 도구:

더욱 개인화된 설정을 원하신다면 WPMet에서 다음과 같은 기능을 이용하실 수 있습니다

• 사용자 지정 필드 추가 : 고객이 입력할 수 있는 추가 필드(예: 전화번호 또는 특별 메시지)를 추가할 수 있습니다.

• 사용자 지정 탭 만들기 : "주문 추적", "고객 지원" 또는 특별 행사와 같은 새 섹션을 추가하세요.

• 사용자 역할 맞춤 설정 : 사용자 역할에 따라 대시보드의 특정 부분을 볼 수 있는 사용자를 선택하세요.

새로운 기능 추가

고객에게 계정 관리 기능을 더 많이 제공하고 싶으신가요? 대시보드에 맞춤 탭이나 추가 정보를 추가할 수 있습니다.

예를 들어, WPMet을 다음과 같이 추가할 수 있습니다.

• 맞춤 URL : FAQ 페이지, 블로그 또는 제품 가이드 링크를 내 계정 페이지에 직접 추가하세요.

• 프로필 사진 업로드 : 사용자가 프로필 사진을 업로드할 수 있도록 하려면 두 플러그인 모두 훌륭한 옵션입니다!

자세히 알아보기: Figma를 활용한 제품 페이지 개선: WordPress 기반 전자상거래 웹사이트

4단계: 변경 사항 미리 보기

모든 내용을 저장하기 전에 미리 보기를 해보는 것이 좋습니다. 대부분의 플러그인은 미리 보기 모드를 , 새 기능을 적용했을 때 대시보드가 ​​어떻게 보이는지 공개하기 전에 확인할 수 있습니다.

5단계: 저장 및 게시

모든 것이 제대로 표시되고 작동하는지 확인이 완료되면 '변경 사항 저장'을 . 이제 새롭게 개선된 WooCommerce 대시보드를 이용하실 수 있습니다!

WooCommerce 상품이 상점 페이지에 표시되지 않는 문제를 해결하는 방법을 알아보세요.

방법 2: 코드를 사용하여 WooCommerce 대시보드 사용자 지정

코딩에 어느 정도 익숙하다면 WooCommerce 대시보드를 스토어의 '내 계정' 페이지의 모양과 기능을 완벽하게 제어할 수 있습니다.

WooCommerce 템플릿을 수정하고 , 훅을 추가 또는 제거하고, 사용자 지정 CSS를 계정 페이지를 완전히 독창적으로 만들 수 있습니다.

WooCommerce 템플릿 수정하기

WooCommerce는 기본 템플릿을 테마 디렉터리에 복사하여 재정의할 수 있도록 지원합니다. 이를 통해 내 계정 페이지의 HTML

• 수정하려는 템플릿을 찾으세요. WooCommerce는 대부분의 템플릿을 wp-content/plugins/woocommerce/templates 디렉토리에 저장합니다.

• 수정하려는 템플릿 파일(예: myaccount/my-account.php)을 테마 폴더(wp-content/themes/your-theme/woocommerce/myaccount/)에 복사하세요.

• 원하는 대로 변경하세요. 예를 들어 새 섹션을 추가하거나, 요소의 순서를 바꾸거나, 레이아웃을 완전히 재디자인할 수 있습니다.  

이러한 템플릿을 맞춤 설정하면 콘텐츠 구조를 제어하고 페이지가 매장의 특정 요구 사항에 맞도록 할 수 있습니다

다음 자료를 확인해 보세요: 최고의 전자상거래 UI 디자인 테마 및 예시 사이트

고리 추가 또는 제거

WooCommerce는 훅(hook)을 사용하여 템플릿 내 특정 위치에 콘텐츠를 배치합니다. 이러한 훅은 일종의 자리 표시자 역할을 하며, 훅을 추가하거나 제거하여 계정 페이지의 레이아웃을 제어할 수 있습니다.

1단계: 훅을 제거하려면 remove_action() 함수를 사용합니다. 예를 들어 기본 "주문" 섹션을 제거하려면 테마의 functions.php 파일에 다음 코드를 추가하면 됩니다.

remove_action( 'woocommerce_account_orders', 'woocommerce_account_orders', 10 );

2단계: 새 후크를 추가하려면 add_action()을 사용하여 사용자 지정 콘텐츠를 삽입합니다. 예를 들어, 내 계정 페이지 상단에 사용자 지정 메시지를 표시하려면 다음과 같이 할 수 있습니다.

add_action( 'woocommerce_account_dashboard', 'custom_dashboard_message', 5 );function custom_dashboard_message() {echo '<p> 개인 맞춤형 대시보드에 오신 것을 환영합니다!</p> ';}

이러한 유연성 덕분에 핵심 템플릿 파일을 변경하지 않고도 페이지 콘텐츠를 완전히 재구성할 수 있습니다.

읽어보세요: WooCommerce에 배송 기능을 추가하는 방법

스타일링을 위해 사용자 지정 CSS 사용

때로는 기본 스타일만으로는 충분하지 않을 수 있습니다. 사용자 지정 CSS를 사용하면 WooCommerce 대시보드를 원하는 모습으로 꾸밀 수 있는 간단한 방법입니다.

1단계: 테마의 사용자 정의 CSS 섹션으로 이동합니다(일반적으로 외관 ⟶ 사용자 정의 ⟶ 추가 CSS에서 찾을 수 있습니다).

2단계: 레이아웃, 글꼴 스타일, 색상 및 간격을 조정하기 위해 사용자 지정 CSS를 작성합니다. 예를 들어 대시보드의 배경색을 변경하려면 다음과 같이 추가할 수 있습니다.

CSS.woocommerce-MyAccount-page {background-color: #f9f9f9; }

3단계: 변경 사항을 저장하고 페이지를 새로고침하여 효과를 확인하세요.

사용자 지정 CSS를 사용하면 HTML 구조를 건드리지 않고도 WooCommerce 대시보드의 모양을 세밀하게 조정할 수 있습니다.

수동 사용자 지정 기능을 사용하면 필요에 맞게 WooCommerce 대시보드를 맞춤 설정할 수 있습니다. CSS를 사용하여 간단한 수정을 하든, 템플릿과 훅을 사용하여 주요 변경 작업을 수행하든, WooCommerce의 유연성을 통해 고객을 위한 독창적이고 기능적인 내 계정 페이지를 디자인할 수 있습니다.

추가 정보: WooCommerce 결제 페이지 맞춤 설정 방법

WooCommerce 대시보드 맞춤 설정을 위한 모범 사례

WooCommerce 내 계정 맞춤 설정할 때는 모든 것이 원활하게 작동하고, 보기 좋으며, 고객에게 유용하게 작동하도록 몇 가지 핵심 사항을 염두에 두어야 합니다.

다음은 성공적인 결과를 얻는 데 도움이 될 몇 가지 모범 사례입니다

사용자 경험을 최우선으로 생각하세요

사용자 경험 (UX)은 특히 고객이 주문 내역, 개인 정보 등을 확인하는 '내 계정' 페이지에서 매우 중요합니다. 훌륭한 UX란 고객이 페이지를 쉽고 직관적으로 사용할 수 있도록 만드는 것을 의미합니다.

• 탐색을 간소화하세요 : 주문, 결제 정보, 배송 주소 등 유사한 섹션을 함께 그룹화하세요. 모든 정보를 쉽게 찾을 수 있도록 하고, 너무 많은 정보로 사용자를 압도하지 않도록 하세요.

• 개인화 : 고객이 결제 수단이나 주소 업데이트 등 자신의 정보를 직접 관리할 수 있도록 하되, 너무 복잡하게 만들지 마세요.

• 브랜드 일관성을 유지하세요 : 내 계정 페이지의 디자인과 느낌은 웹사이트의 전반적인 스타일, 색상, 글꼴 과 일치해야 하며, 레이아웃은 사이트의 나머지 부분과 친숙하고 자연스럽게 어우러져야 합니다.

사용자 친화적이고 일관성 있는 디자인은 고객 만족도를 높이고 재방문을 유도하는 데 도움이 됩니다

알아보기: 브레드크럼이란 무엇일까요? 쉬운 탐색을 위한 팁과 모범 사례

모바일 반응형 디자인을 보장하세요

기기를 통해 쇼핑하는 사람들이 그 어느 때보다 많아짐에 따라, WooCommerce 대시보드는 모든 기기에서 보기 좋고 제대로 작동해야 합니다. 모바일 반응형 디자인이란 고객이 이동 중에도 계정을 관리할 수 있도록 '내 계정' 페이지가 작은 화면에 맞춰 적절하게 조정되어야 함을 의미합니다.

• 레이아웃 확인 : 페이지 레이아웃이 모바일 화면에 맞춰 자동으로 변경되는지 확인하세요. 사용자가 콘텐츠를 보기 위해 확대하거나 가로로 스크롤해야 하는 상황이 발생하지 않도록 해야 합니다.

• 탐색을 간소화하세요 : 모바일 환경에서는 탭이나 스와이프 한 번으로 모든 것을 쉽게 탐색할 수 있도록 해야 합니다. 작은 기기에서 대시보드 기능이 복잡하면 사용자가 불편함을 느낄 수 있습니다.

구글의 모바일 친화성 테스트와 같은 도구를 사용하여 모바일 기기에서 페이지가 어떻게 보이는지 확인할 수 있습니다. 모든 기기에서 원활한 사용자 경험을 보장하면 고객이 어떤 방식으로 쇼핑하든 만족도를 유지할 수 있습니다

기능 및 성능 테스트

모든 것이 제대로 작동하는지 테스트 해야 합니다 버튼, 링크 및 양식의 기능 페이지 (예: 로딩 속도) 테스트가 포함됩니다.

• 기능 점검 : 내 계정 페이지의 모든 기능이 제대로 작동하는지 확인하세요. 링크가 클릭되나요? 고객이 정보를 업데이트할 수 있나요? 모든 기능을 테스트하여 예상대로 작동하는지 확인하세요.

• 성능 확인 SEO에도 악영향을 미칠 수 있습니다 . Google PageSpeed ​​Insights 또는 GTMetrix 로딩 시간에 어떤 영향을 미치는지 확인하세요 .

항상 스테이징 사이트 (실제 운영 사이트의 복제본)에서 테스트하여 문제나 예상치 못한 상황을 방지하세요.

자세히 알아보기: WooCommerce 유지 관리 시 반드시 피해야 할 일반적인 실수

WooCommerce 업데이트와의 호환성을 유지하세요

WooCommerce는 플랫폼을 정기적으로 업데이트하므로, 업데이트 후에도 사용자 정의 기능이 원활하게 작동하는지 확인하는 것이 중요합니다.

• 플러그인을 최신 상태로 유지하세요 : 사용자 정의를 위해 플러그인을 사용하는 경우, WooCommerce 업데이트와의 호환성을 확인하세요. WooCommerce의 새 버전이 출시될 때 플러그인이 작동하지 않게 되는 것을 방지해야 합니다.

• 핵심 파일을 직접 수정하지 마세요 . WooCommerce의 핵심 파일을 직접 수정하는 것은 가급적 피하는 것이 좋습니다. 대신 자식 테마 나 훅을 사용하여 사용자 정의 기능을 추가하세요. 이렇게 하면 WooCommerce가 업데이트되더라도 변경 사항이 사라지지 않습니다.

• 업데이트 후 테스트 : WooCommerce가 업데이트될 때마다 사용자 지정 내 계정 페이지를 다시 테스트하여 모든 기능이 예상대로 작동하는지 확인하십시오.

이 단계를 따르면 사용자 지정 설정이 계속 작동하며 향후 업데이트로 인해 중단되지 않습니다

알아두면 유용한 WooCommerce 제품 추가 기능

결론

WooCommerce 대시보드를 맞춤 설정하는 것은 고객과 사용자 모두에게 더욱 개인화되고 효율적인 경험을 제공하는 좋은 방법입니다. 간편한 솔루션을 위해 플러그인을 사용하든, 더 세밀한 제어를 위해 코드를 사용하여 직접 맞춤 설정하든, 가능성은 무궁무진합니다.

사용자 경험을 항상 염두에 두고, 변경 사항을 철저히 테스트하며, 사용자 정의 내용이 향후 WooCommerce 업데이트와 호환되는지 확인하는 것을 잊지 마세요.

이러한 간단한 단계와 모범 사례를 따르면 스토어의 기능을 향상시킬 뿐만 아니라 고객에게 더욱 원활하고 즐거운 경험을 제공할 수 있습니다. 즐거운 맞춤 설정 되세요!