WooCommerce 장바구니 페이지를 편집하는 방법

WooCommerce 장바구니 페이지를 편집하는 방법을 알고 싶으십니까?

WooCommerce는 전자상거래 웹사이트를 구축하기 위한 훌륭한 도구입니다. 설치가 쉽고 확장성이 뛰어나며 확장성이 뛰어납니다. WordPress 웹사이트에 설치하자마자 설정 프로세스를 안내하고 처음부터 새로 만들지 않고도 필수 전자상거래 페이지를 생성할 수도 있습니다.

많은 긍정적인 점에도 불구하고 개선의 여지가 많습니다. 예를 들어 장바구니 포기는 장바구니 페이지 디자인이 전환에 초점을 맞추지 않았기 때문에 대부분의 전자상거래 비즈니스에서 흔히 발생하는 문제입니다.

다행히 WooCommerce 매장에서는 전환율을 높이고 장바구니 포기를 줄이는 방법이 많이 있습니다.

이 글에서는 WooCommerce 장바구니 페이지의 디자인과 기능을 개선하기 위해 취해야 할 정확한 단계를 보여 드리겠습니다.

튜토리얼을 살펴보겠습니다.

WooCommerce 장바구니 페이지를 편집하는 방법

WooCommerce 장바구니 페이지를 편집하고 사용자 정의하는 방법에는 두 가지가 있습니다.

기본 WooCommerce 블록, WordPress 페이지 빌더 또는 타사 WooCommerce 플러그인을 사용하거나 CSS 코드를 수동으로 추가하여 페이지를 사용자 지정할 수 있습니다.

불행하게도 이러한 방법은 항상 효율적인 것은 아니며 문제를 해결하는 것보다 더 많은 문제를 야기할 수 있습니다.

예를 들어, 사용자 정의 CSS 코드는 사이트를 손상시킬 수 있고, 페이지 빌더 및 기타 플러그인은 사이트 속도를 저하시킬 수 있으며, 기본 WooCommerce 블록으로는 제한된 만큼만 할 수 있습니다.

그러나 Botiga Pro와 같이 잘 설계된 전자상거래 플러그인은 WooCommerce 매장에 강력한 기능을 추가하는 동시에 빠른 로딩 속도를 보장하도록 구축되었습니다.

이 튜토리얼에서는 Botiga Pro를 사용하여 장바구니 포기를 줄이고 판매를 늘리는 것으로 입증된 맞춤 설정을 만드는 방법을 보여 드리겠습니다. 우리는 다음 단계를 수행할 것입니다:

• 장바구니 페이지 레이아웃 개선
• 캔버스 외부 미니 카트 표시
• 고객이 미니 카트의 제품 수량을 늘릴 수 있도록 허용
• 플로팅 미니 카트 아이콘 표시
• 장바구니 페이지에 '쇼핑 계속' 버튼 표시

WordPress 사이트에 Botiga를 설치하는 것부터 시작해 보겠습니다.

1. Botiga 테마 설치

Botiga는 무료 WooCommerce 테마인 반면 Botiga Pro는 프리미엄 플러그인입니다. 플러그인을 사용하려면 웹사이트에 무료 테마를 설치해야 합니다.

이번 섹션에서는 무료 테마를 설치하는 방법을 다루고, 다음 섹션에서는 프리미엄 플러그인을 설치하고 활성화하는 방법을 보여드리겠습니다.

먼저 WordPress 테마 저장소나 당사 웹사이트에서 무료 Botiga 테마를 다운로드하세요.

그런 다음 WordPress 대시보드로 이동하여 모양 → 테마 → 테마 추가 로 이동한 후 테마를 업로드하고 활성화합니다.

또는 모양 → 테마 → 테마 추가 로 이동하여 검색 창에 Botiga를 입력하고 테마를 설치 및 활성화할 수 있습니다.

2. Botiga Pro 플러그인 설치

Botiga Pro는 WooCommerce 매장을 더 나은 방향으로 변화시킬 수 있는 기능을 갖춘 강력한 전자상거래 플러그인입니다.

플러그인을 구매한 후 로컬 컴퓨터에 다운로드하고 플러그인 → 새로 추가 로 이동하여 플러그인을 업로드하고 설치합니다.

다음으로 aThemes 계정에서 찾을 수 있는 라이선스 키를 활성화해야 합니다.

aThemes 계정으로 이동하여 라이센스 키를 복사하세요.

그런 다음 WordPress 대시보드를 열고 Botiga → 설정 → 일반 → Botiga Pro License 로 이동합니다.

라이센스 키를 삽입하고 활성화 버튼을 클릭하십시오:

그게 다야. 이제 WordPress 사이트에서 테마와 플러그인이 모두 활성화되었습니다.

그러나 WooCommerce 장바구니 페이지를 편집하는 방법을 보여주기 전에 Botiga 및 Botiga Pro에서 제공하는 시작 사이트와 이를 WooCommerce 스토어로 가져오고 싶은 이유를 간단히 살펴보겠습니다.

3. 시작 사이트 가져오기(선택 사항)

스타터 사이트는 기존 WordPress 사이트로 가져올 수 있는 미리 만들어진 웹사이트 디자인입니다.

시작 사이트 설치가 Botiga의 전제 조건은 아니라는 점은 주목할 가치가 있지만(내장된 테마 옵션을 사용하여 처음부터 웹 사이트 디자인을 만들 수도 있음) WooCommerce 스토어를 개선할 수 있으므로 사이트를 가져오는 것이 좋습니다. 상당히.

Botiga 스타터 사이트에는 귀하의 비즈니스에 필수적인 깔끔하고 전문적인 디자인과 사전 구축된 페이지가 갖춰져 있습니다. Botiga Pro를 사용하면 미용, 의류, 가구, 보석 등 다양한 전자상거래 틈새 시장을 겨냥한 여러 시작 사이트에 액세스할 수 있습니다.

Botiga → Starter Sites 로 이동한 후 각 사이트의 썸네일에 나타나는 미리보기 버튼을 클릭하면 디자인을 미리 볼 수 있습니다.

가장 마음에 드는 시작 사이트를 선택한 다음 가져오기 버튼을 클릭하세요.

가져오기 버튼을 클릭하자마자 전체 웹사이트(모든 이미지 포함)를 가져올지 아니면 콘텐츠 요소에 대한 자리 표시자가 있는 레이아웃만 가져올지 선택하라는 팝업이 나타납니다.

기본적으로 Botiga는 시작 사이트의 모든 위젯, Customizer 설정 및 이미지를 가져오지만, 가져오지 않으려면 이들 중 하나를 선택 취소할 수 있는 옵션이 있습니다.

완료되면 다음 버튼을 클릭하면 가져오기 프로세스가 시작됩니다.

Botiga가 시작 사이트를 가져오는 데 몇 초 정도 걸립니다.

4. WooCommerce 장바구니 페이지 편집

이제 Botiga에 내장된 장바구니 페이지 기능을 활용하여 장바구니 이탈을 줄이고 전환율을 높이는 방법을 살펴보겠습니다.

가장 먼저 해야 할 일은 외모 → 사용자 정의 → 장바구니 로 이동하는 것입니다.

장바구니 패널의 일부 옵션이 이미 활성화되어 있음을 알 수 있습니다. 그대로 유지하고 다음 기능을 활성화하거나 수정하십시오.

나. 장바구니 페이지 레이아웃 개선

장바구니 페이지의 기본 목표는 고객을 판매 퍼널의 다음 단계인 체크아웃 페이지로 이동시키는 것입니다.

방문자가 결제 페이지로 이동하도록 부드럽게 유도하는 가장 좋은 방법 중 하나는 장바구니 페이지의 눈에 띄는 위치에 결제 버튼을 표시하는 것입니다.

그러나 기본 WooCommerce 장바구니 페이지에는 제품 아래에 결제 버튼이 표시됩니다. 이는 고객이 해당 내용을 보려면 아래로 스크롤해야 함을 의미합니다.

Botiga를 사용하면 버튼 위치를 페이지 오른쪽으로 변경할 수 있어 가시성이 크게 향상됩니다.

당신이 해야 할 일은 모양 → 사용자 정의 → 장바구니 로 이동하여 레이아웃 제목 아래에서 두 번째 레이아웃을 선택하는 것입니다.

이는 무료 Botiga 테마의 기능이므로 Botiga Pro 없이도 사용할 수 있습니다.

ii. 오프 캔버스 사이드 미니 카트 표시

미니 카트는 고객이 메뉴에서 카트 아이콘을 클릭하면 화면에 나타나는 팝업 창입니다.

WooCommerce 상점에 미니 카트를 추가하면 고객이 결제 페이지로 바로 이동하도록 유도할 수 있습니다.

Customizer의 Cart 패널에서 Mini Cart Style 로 이동하여 아래 이미지와 같이 두 번째 레이아웃을 선택합니다.

그런 다음 'Ajax에서 열기 장바구니에 추가' 버튼이 켜져 있는지 확인하세요. 이를 통해 방문자는 전체 페이지를 다시 로드하지 않고도 쇼핑 경험을 방해하지 않고도 미니 장바구니에 제품을 추가할 수 있습니다.

그런 다음 게시 버튼을 클릭하고 사이트의 미니 카트 디자인을 확인하세요.

중요: Ajax 장바구니에 추가 옵션이 미니 장바구니에서 작동하려면 기본 WooCommerce Ajax 장바구니에 추가 옵션이 활성화되어 있어야 합니다.

이렇게 하려면 WooCommerce → 설정 → 제품 → 장바구니에 추가 동작으로 이동하여 '아카이브의 장바구니 버튼에 AJAX 추가 활성화' 옵션을 선택한 후 변경 사항을 저장하세요.

iii. 고객이 미니 카트의 제품 수량을 늘릴 수 있도록 허용

고객이 미니 카트의 제품 수량을 늘릴 수 있도록 하면 매장 매출을 높이는 데 도움이 됩니다.

사용자 지정 도구의 카트 패널에서 미니 카트 수량 옵션을 켜기만 하면 됩니다.

미니 카트 수량 옵션을 활성화하기 전의 데모 사이트에서 미니 카트의 모습은 다음과 같습니다.

옵션을 활성화하면 미니 카트는 다음과 같이 보입니다.

iv. 떠다니는 미니 카트 아이콘 표시

이름에서 알 수 있듯이 플로팅 미니 카트는 화면에 떠서 고객이 카트 페이지로 이동하도록 유도하는 카트 아이콘입니다.

WooCommerce 스토어에 플로팅 미니 카트 아이콘을 추가하려면 카트 패널을 열고 미니 카트 스타일에서 두 번째 스타일이 선택되어 있는지 확인하세요.

그런 다음 플로팅 미니 카트 아이콘 옵션을 켜고 플로팅 미니 카트 설정 버튼을 클릭하여 아이콘 구성을 진행합니다.

미니 카트 아이콘을 선택하고, 표시 규칙을 설정하고, 스타일(예: 색상, 배경색, 테두리 반경, 그림자 등), 크기, 위치, 페이지 모서리로부터의 거리를 수정합니다.

v. 장바구니 페이지에 '쇼핑 계속' 버튼 표시

앞서 언급했듯이 장바구니 페이지의 주요 목적은 고객을 결제 페이지로 이동시키는 것입니다.

장바구니 페이지에 '쇼핑 계속' 버튼을 추가하는 것은 모순된 조언처럼 보일 수 있습니다. 그러나 일부 WooCommerce 매장에서는 전환율을 크게 높이는 것으로 알려져 있습니다.

따라서 계속 쇼핑 버튼을 사용해 보시기를 적극 권장합니다. 매장에서 이를 활성화하고 전환율이 향상되는지 확인하세요.

장바구니 페이지에 쇼핑 계속 버튼을 추가하려면 커스터마이저의 장바구니 패널로 이동하여 쇼핑 계속 버튼 표시 옵션을 켜고 필요하다고 생각되면 버튼 텍스트를 수정하세요.

결론

WooCommerce 매장의 장바구니 페이지를 사용자 정의하는 것은 장바구니 포기를 줄이고 전환율을 높이는 좋은 방법입니다.

WooCommerce 장바구니 페이지를 사용자 정의하는 방법에는 여러 가지가 있지만 모든 기술이 수익에 영향을 미치는 것은 아닙니다.

이 기사에서는 전환율을 높이는 것으로 입증된 5가지 장바구니 페이지 사용자 정의를 다루었습니다.

1. 장바구니 페이지에 가로 레이아웃을 사용하면 결제 버튼을 더 쉽게 찾을 수 있습니다.
2. 결제 버튼이 포함된 오프 캔버스 측면 미니 카트를 표시합니다.
3. 고객이 미니 카트의 제품 수량을 늘릴 수 있도록 허용합니다.
4. 고객이 카트 또는 결제 페이지로 이동하도록 유도하는 플로팅 미니 카트 아이콘을 표시합니다.
5. '계속 쇼핑' 버튼을 실험하여 해당 버튼이 귀하의 매장에 적합한지 확인하세요.

Botiga Pro를 사용하면 코드를 작성하지 않고도 이러한 모든 기술을 쉽게 구현할 수 있습니다.

장바구니 이탈이 감소하고 전환율이 증가하는 데 몇 주가 소요됩니다.

그동안 WooCommerce 장바구니 페이지를 편집하는 방법에 대해 궁금한 점이 있으면 아래 댓글 섹션에 알려주시기 바랍니다.