간단한 9단계로 WooCommerce 사이트를 모바일 지원으로 만드는 방법

WooCommerce 사이트를 모바일 화면에 맞추는 것은 쉽습니다. 그러나 대부분의 WooCommerce 소유자는 올바른 방법으로 작업을 수행하는 방법을 모릅니다. 또한 그것이 왜 그렇게 중요한지 이해하지 못하는 사람들이 많이 있습니다.

WooCommerce는 모든 온라인 상점의 28.19% 이상을 지원합니다. 상위 1백만 개의 전자 상거래 사이트 중 22%가 WooCommerce를 사용합니다.

호스팅 재판소

사람들의 쇼핑 성향은 지난 10년 동안 변화했습니다. 스마트폰을 통한 인터넷 사용은 그들의 행동을 재구성합니다. 따라서 WooCommerce 온라인 상점이 있는 경우 사이트 디자인과 기능을 모든 종류의 화면에 잘 맞게 전환해야 할 때입니다.

저희가 도와드리겠습니다. 이 블로그는 모바일에서 WooCommerce를 개발하기 위한 최고의 가이드가 될 것입니다. 시작하자.

WooCommerce 사이트를 모바일 지원으로 만드는 요소

스마트폰이나 태블릿에서 바로 볼 수 있는 사이트입니다. 전체 사이트가 화면에 맞고 오른쪽에서 왼쪽으로 스크롤할 필요가 없으며 텍스트와 그림이 동적으로 재배치되고 크기가 조정됩니다.

Brian Coale, 케이시 프린팅

데스크톱 또는 노트북 화면 외에도 스마트폰 또는 태블릿 화면에서 필요한 모든 기능을 갖춘 모바일 반응형 웹 사이트에 액세스할 수 있습니다. 그러나 이와 관련하여 몇 가지 유사한 용어를 찾을 수 있습니다. 모바일 우선, 모바일 친화적 또는 적응형 디자인이라는 단어를 들어보셨을 수도 있습니다.

이 모든 용어는 모바일에서 웹 사이트의 가시성을 높이는 동일한 목표를 위해 사용됩니다.

그러나 모바일 앱을 구축하고 모든 모바일 고객을 그곳으로 데려갈 수 있습니다. 또한 적응형 디자인은 모든 화면에 맞도록 다양한 버전의 웹 사이트를 개발하는 것을 의미합니다. 반면에 사이트에서 모바일 사용자 경험을 개발할 때 이 접근 방식을 모바일 친화적이라고 부를 수 있습니다.

mCommerce의 부상과 모바일에서 WooCommerce의 중요성

지난해 전 세계 스마트폰 사용자 수는 35억 명에 달할 것으로 전망됐다. 그리고 2021년에는 38억에 도달할 예정입니다. 수치를 비교하면 2017년에는 27억이었습니다.

높은 곡선은 계속해서 증가하고 있으며 둔화의 조짐은 없습니다. 수십억 명의 사람들이 스마트폰을 사용함에 따라 분명히 mCommerce의 부상은 결국 있었습니다. 사람들은 그 어느 때보다 데스크탑이나 노트북에 비해 모바일에서 쇼핑하는 것을 좋아합니다.

Business Insider는 2020년 말까지 모바일 상거래가 2,840억 달러에 이를 것이라고 예측했습니다. 이는 전체 미국 전자 상거래 시장의 거의 45%를 차지합니다. 따라서 포스트 팬데믹 시대는 사람들의 쇼핑 행동에 변화를 가져옵니다.

위 차트를 보면 소매 전자상거래 매출 비중이 지난해 14.5%에서 18.1%로 증가할 것이라는 점을 쉽게 이해할 수 있다. Insider Intelligence는 2024년까지 모바일 상거래 규모가 전체 전자 상거래 매출의 44%인 연평균 성장률(CAGR) 25.5%에 이를 것으로 예측합니다.

따라서 이러한 모든 통계와 데이터는 한 가지만 암시합니다.

WooCommerce 웹사이트가 있고 모든 모바일 방문자가 온라인 상점에서 쉽게 쇼핑할 수 있도록 하려면 가장 좋은 방법은 무엇입니까? 이들을 위해 모바일 지원 환경을 개발해야 합니다.

모바일 지원 WooCommerce 사이트를 개발하는 방법

1. Google 모바일 친화성 테스트에서 간단한 확인을 실행해 보겠습니다.
2. 이미지 최적화 시작
3. 리드 제네레이션 팝업에 대해 다시 생각하기
4. 모바일 친화적인 WordPress 테마 사용 시작
5. 간단한 메뉴 및 사이트 탐색 개발
6. 모바일 최적화 WordPress 플러그인으로 이동
7. 페이지 속도를 높이십시오
8. 사이트 디자인을 단순하게 유지
9. 가장 간단한 체크아웃 프로세스가 필요합니다

1. Google 모바일 친화성 테스트를 간단히 실행해 봅시다.

첫 번째는 현재 귀하의 WooCommerce 사이트가 얼마나 모바일에 적합한지 확인하는 것입니다. 따라서 가장 쉬운 방법은 무료 Google 모바일 친화성 테스트를 받는 것입니다. 이것은 매우 간단합니다.

Google 모바일 친화성 테스트 페이지로 이동하여 URL을 입력하면 됩니다. 귀하의 웹사이트가 모바일 지원 여부를 확인할 수 있습니다. 파란색은 당신이 갈 준비가 되었음을 나타냅니다. 빨간색이 보이면 반드시 올바른 조치를 취해야 합니다. 또한 모바일 화면에서 사이트가 어떻게 보이는지 미리보기로 보여줍니다.

따라서 Google은 개발자를 위한 특별한 모바일 친화적인 테스트 API를 출시합니다. 개발자라면 이 자동화 도구를 사용하여 두 가지 작업을 수행할 수 있습니다. 그들은 -

• 더 많은 페이지를 빠르게 테스트
• 사이트에서 가장 중요한 페이지를 모니터링하면 수동으로 브라우저 도구를 돌릴 필요가 없습니다.

2. 이미지 최적화 시작

제품 이미지는 비즈니스의 가장 큰 성장 요인이 될 수 있습니다. 온라인 쇼핑객의 75% 이상이 쇼핑 전 제품 사진에 매력을 느꼈습니다. 따라서 이 전략은 WooCommerce 상점과 분리할 수 없습니다.

그런데 여기서 아주 중요한 것이 하나 있습니다. 이미지는 고객에게 좋지만 공간을 계속 소비합니다. 결과적으로 너무 많은 이미지는 더 큰 서버와 더 긴 로드 시간이 필요합니다. 페이지 로딩 속도를 방해할 수 있습니다.

게다가 느린 사이트는 모바일에서 느려집니다. 또한 고해상도 이미지가 작은 화면에 최적화되어 있지 않으면 고객에게 이미지의 일부만 표시되거나 흐리게 표시됩니다.

이 문제를 해결하는 가장 좋은 방법은 이미지 최적화 도구를 사용하는 것입니다. 저희 웹사이트에서는 매우 간단하고 강력한 사진 최적화 프로그램인 Tiny PNG를 사용합니다.

그러나 모바일용 WooCommerce에 이미지 최적화를 적용하는 다른 많은 방법이 있습니다. 자동 이미지 최적화 WordPress 플러그인을 설치할 수 있습니다. 또한 Lazy Loading의 도움을 받을 수도 있습니다. 방문자가 웹사이트를 방문하면 이 기능은 사용자의 브라우저에 이미지가 필요할 때까지 이미지를 로드하지 않도록 지시합니다. 이를 통해 사용자는 더 빠른 랜딩 페이지를 경험하고 이미지를 로드할 적절한 시간을 얻을 수 있습니다.

WordPress 저장소에서 신뢰할 수 있는 지연 로딩 플러그인을 찾을 수 있습니다.

3. 리드 생성 팝업에 대해 다시 생각해 보세요.

팝업은 세대를 이끄는 입증된 방법입니다. 그리고 아마도 가입 및 뉴스레터 전환을 늘리기 위해 가장 많이 사용되는 채널 중 하나일 것입니다. 그러나 사이트 방문자를 대상으로 설문조사를 실시하면 좋아하든 싫어하든 대부분 이렇게 말할 것입니다. 팝업은 성가시다. 그럼에도 불구하고 상위 10%의 최고 성능 팝업은 평균 9.28%로 전환됩니다.

따라서 팝업을 사용해야 합니다. 그러나 계획이 있습니다. 그들은 또한 귀하의 사이트를 무겁게 만들기 때문입니다. 따라서 모바일 화면에서 팝업은 사용자 경험을 망칠 수 있으며 결국 높은 이탈률로 이어집니다.

휴대 전화를 사용하여 웹 사이트를 방문하는 동안 이미 경험했을 수 있습니다. 팝업이 콘텐츠를 완전히 볼 수 있는 방법을 차단할 때 때로는 완전히 혼란스럽기 때문에 이상하게 작동할 수도 있습니다. 예를 들어 제거하려고 해도 제거되지 않거나 제거 옵션을 찾을 수 없습니다.

그렇기 때문에 WooCommerce 사이트에 팝업 수가 적으면 좋은 것입니다. 또한 최소한의 것을 사용해야 합니다. 또한 사이트를 모바일에 보다 적합하게 만들기 위해 팝업을 제거하고 웹페이지 하단에 고정 형식으로 배치할 수 있습니다.

4. 모바일 친화적인 WordPress 테마 사용 시작

이것은 WordPress의 유리한 지점 중 하나입니다. 열려 있으며 웹 사이트를 유연하게 만들기 위해 거의 모든 것을 할 수 있습니다. 따라서 WordPress에 WooCommerce 스토어를 구축한 경우 모바일 지원을 위한 다양한 옵션이 있습니다.

가장 좋은 방법 중 하나는 모바일 친화적인 WordPress 테마를 선택하는 것입니다. 온라인 상점을 디자인하는 동안 모바일 전망이 다른 WordPress 테마보다 낫다는 WordPress 테마를 찾을 수 있습니다.

요즘 워드프레스에는 수많은 반응형 테마가 있습니다. 그렇지 않거나 디자인이 부족한 경우에도 정기적으로 업데이트를 게시합니다. 따라서 현재 WordPress 테마가 모바일에 반응하지 않는 경우 먼저 최신 업데이트를 확인하세요. 그래도 모바일에서 좋지 않게 보인다면 모바일 친화적인 경량 WordPress 테마를 선택해야 할 때입니다.

5. WooCommerce 사이트를 모바일에 사용할 수 있도록 간단한 메뉴 개발

휴대폰 화면에서는 복잡한 메뉴를 탐색하기가 다소 어렵거나 불편합니다. 예를 들어, 아래 웹사이트의 두 가지 모양을 확인하십시오.

첫 화면은 모바일을 지원합니다. 탐색 메뉴가 오른쪽 상단에 있는 것을 볼 수 있습니다. 방문자가 클릭할 때만 확장됩니다. 반면 세컨드 스크린은 브라우저가 우리에게 보여줄 수 있는 거의 모든 요소를 ​​유지합니다. 화면을 차지하는 모든 탭, 랜딩 페이지를 가득 채운 많은 콘텐츠 등

위의 이미지만 봐도 알 수 있습니다. 메뉴가 간소화되었습니다. 클릭하면 필요한 모든 페이지가 표시됩니다. 그러나 원하는 대로 WooCommerce 스토어를 디자인할 수 있습니다. 그러나 메뉴와 탐색을 단순하게 유지하면 사이트가 모바일 친화적인 사이트로 바뀝니다.

6. 모바일 최적화 WordPress 플러그인으로 이동

모바일 최적화 플러그인은 온라인 상점이 더욱 모바일에 대비할 수 있도록 도와줍니다. 아마도 이것은 모바일 사용자를 위해 사용자 경험을 개선하는 가장 쉬운 방법 중 하나일 것입니다. 게다가 앞서 언급한 방법으로 수행할 수 있는 모든 조치, 이러한 유형의 플러그인은 작업을 더 쉽게 만듭니다.

모바일 반응형 워드프레스 테마를 이미 사용하고 있다면 여전히 직면할 수 있는 몇 가지 문제가 있을 수 있습니다. 정렬 문제, 느린 로딩, 전반적인 반응성의 불일치가 있습니다. 업데이트는 복잡한 프로세스이기 때문에 발생합니다. 때로는 WordPress 테마용으로 설계된 대로 작동하지 않으며 이러한 문제를 해결하는 데 시간이 걸립니다.

따라서 WooCommerce 상점의 모바일 지원 외관을 백업하려면 모바일 최적화 플러그인을 설치하고 활성화할 수 있습니다. 또한 이러한 유형의 도구는 모바일에서 소셜 공유를 관리하고 모바일 사용자 상호 작용을 추적하는 등의 작업을 수행할 수 있습니다.

따라서 이와 관련하여 많은 플러그인을 찾을 수 있습니다. 인기 있는 이름 중 일부는 Jetpack, WordPress Mobile Pack, WP용 AMP, 반응형 모바일 메뉴 등입니다.

7. 모바일 사용자를 위한 페이지 속도 향상

속도는 확실히 순위 요소입니까? 예.

존 뮬러, 구글

WooCommerce 상점의 페이지 속도를 높이기 위한 조치를 직접 취해야 합니다. 평균적으로 모바일 방문자의 53%가 로드하는 데 3초 이상 걸리면 웹사이트를 떠납니다. 다른 의견으로는 2초 지연으로 이탈률이 최대 87%까지 증가할 수 있습니다.

그래서 분명히 사람들은 휴대폰을 사용하여 웹 사이트를 방문하는 동안 서두르고 있습니다. 그리고 페이지 속도가 이상적인 로딩 시간과 호환되지 않는 경우 가능한 한 빨리 필요한 조치를 취해야 합니다.

온라인 상점의 페이지 속도 측정을 시작하려면 적합하다고 생각되는 다음 도구를 사용할 수 있습니다.

Google PageSpeed ​​통계

도구가 페이지 속도를 분석한 후 종합 점수, 평균 로딩 시간, ml 초당 첫 번째 및 최대 콘텐츠 페인트 시간 등을 제공하는 자세한 보고서를 볼 수 있습니다. 또한 페이지를 만들기 위한 제안을 제공합니다. 더 빠르게.

여기서 두 가지를 기억해야 합니다. 첫째, 점수가 클수록 페이지 속도가 더 좋습니다. 그러나 가벼운 웹사이트만이 더 큰 점수를 얻습니다. 둘째, 사이트에서 사용하는 데이터베이스가 클수록 점수도 낮아집니다. WooCommere 매장의 규모에 따라 조치를 취해야 합니다.

지티메트릭스

이 도구는 WooCommerce 사이트를 분석할 때 더 광범위한 데이터 세트를 제공합니다. Google PageSpeed ​​Insights와 호환되는 대안이 될 수 있습니다.

8. 사이트 디자인을 단순하게 유지

위에서 제공한 모든 팁 외에도 가장 중요한 단계입니다. '가장 단순한 것이 가장 성취하기 어렵다'는 당신이 잘 기억하고 있는 흔한 구절입니다. 그러나 사이트 디자인을 탐색하기 쉽게 만들고, 불필요한 요소를 제거하고, 추가 요소를 제거하고, 목표에만 집중할수록 WooCommerce 사이트는 모바일에 더욱 적합해집니다.

이렇게 하려면 아래 팁을 따르세요.

• 전 세계의 모든 주요 WooCommerce 웹사이트를 방문하고 살펴보십시오.
• 가능한 가장 단순한 WordPress 테마를 선택하십시오.
• 레이아웃이 과포화되어서는 안 됩니다.
• 테마 색상을 선택하고 톤을 유지하십시오.
• 방문자를 고객으로 안내하는 사이트를 만드십시오. 프로모션을 만들지 마십시오.

따라서 Amazon이나 eBay의 디자인을 따르지 말아야 한다는 것이 우리의 조언입니다. 그들은 거인이고 과포화 사이트를 더 빠르게 로드할 수 있는 자체 네트워크와 리소스를 가지고 있기 때문입니다. 또한 그들은 이해하거나 수용하기 어려운 자신의 비즈니스 윤리와 시스템을 가지고 있습니다.

따라서 귀하는 귀하의 비즈니스와 잠재 고객을 누구보다 잘 이해하고 있습니다. 따라서 간단하고 목표를 달성하는 데 도움이 되는 자신만의 디자인 패턴을 개발할 가치가 있습니다.

당신은 또한 좋아할 수 있습니다: 전자 상거래를 위해 WooCommerce를 사용하는 최고의 웹사이트

9. 모바일 지원 WooCommerce를 위한 가장 간단한 체크아웃 프로세스가 필요합니다.

결제 프로세스는 종종 사용자에게 어려움을 줍니다. Baymard 보고서에 따르면 사용자의 18%가 긴 체크아웃 프로세스로 인해 장바구니를 포기했습니다. 사용자의 7%는 충분한 결제 방법을 찾지 못할 때 동일한 작업을 수행합니다. 그 외에도 17%는 주문 비용을 미리 계산하거나 볼 수 없다고 불평했습니다. 결제 프로세스의 복잡성으로 인해 사용자의 거의 50%가 장바구니를 떠났습니다.

따라서 사용자가 휴대폰에서 결제하기를 원할 때 프로세스가 더 쉬워야 합니다. 팁을 따라 모바일 지원 WooCommerce 사이트에 대한 간단한 체크아웃 프로세스를 만들 수 있습니다.

투명한 체크아웃 프로세스의 기본

• 눈에 잘 띄고 매력적인 CTA 버튼을 선택하세요. 이 부분에서는 반드시 아마존을 따라갈 수 있습니다.
• 고객이 진행하기 전에 모든 것을 이해할 수 있도록 충분한 제품 세부 정보와 정보를 제공하십시오.
• 거래 프로세스를 투명하게 유지하십시오. 즉, 배송비, 부가세, 세금 등 고객이 지불할 비용의 세부 내역을 보여줍니다.

모바일 친화적 전자상거래 결제 시스템 개발

Clique의 크리에이티브 디렉터이자 Smash Magazine의 기고자인 Derek Nelson은 모바일 사용자의 WooCommerce를 위한 더 나은 체크아웃 프로세스를 개발하는 데 도움이 되는 몇 가지 방법을 찾았습니다.

그는 결제 과정에서 최소한의 정보를 요청해야 한다고 제안했습니다. 필수 필드만 포함할 수 있습니다.

그런 다음 게스트 결제 옵션을 승인하면 더 나은 결과를 얻을 수 있습니다. 즉, 무작위 방문자는 등록하지 않고도 WooCommerce 사이트에서 직접 구매해야 합니다. 이것은 귀하의 비즈니스에 큰 성장을 가져올 수 있습니다. 등록 버튼은 종종 거래를 방해하고 UIE는 주요 전자 상거래 브랜드에 대한 사례를 테스트했으며 등록 버튼만 제거하면 해당 브랜드의 매출이 크게 증가했습니다.

또한 프로세스에 정보를 입력하고 체크아웃 페이지의 작은 메모나 광고와 같은 주의를 산만하게 하는 요소를 모두 제거해야 합니다. 그리고 고객에게 결제 진행 상황을 단계별로 보여주는 것이 더 신뢰할 수 있는 아이디어가 될 것입니다.

그러나 강력한 모바일 지원 체크아웃 프로세스를 만들기 위해 장바구니 포기를 줄이는 효과적인 방법에 대한 잘 조사된 블로그를 읽을 수 있습니다.

모바일 지원 WooCommerce 사이트 개발을 위한 마감

WooCommerce 벤처의 맨 처음부터 모바일 지원 웹사이트에 대한 아이디어를 유지해야 합니다. 그렇게 하면 시간과 비용을 모두 절약할 수 있습니다. 따라서 팁을 하나씩 따르고 이와 관련하여 정기적으로 조사할 수 있습니다.

그러나 이제 모바일 사용자가 쉽게 접근할 수 있는 WooCommerce 스토어를 구축하는 것의 중요성을 이해할 수 있을 것이라고 믿습니다. 모바일 지원 WooCommerce 사이트를 지원하기 위해 Dokan Multivendor는 가장 강력한 솔루션 중 하나입니다. Dokan으로 전자 상거래 상점을 성공적으로 운영하는 일부 브랜드를 확인할 수 있습니다.

팁을 적용하는 동안 문제가 발생하면 알려주는 것을 잊지 마십시오. 저희가 도와드리겠습니다. 언제나.