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

WooCommerce는 기능적인 온라인 상점을 즉시 만들 수 있는 훌륭한 오픈 소스 WordPress 플러그인입니다. 플러그인을 설치하면 장바구니 페이지를 비롯한 많은 필수 전자 상거래 페이지가 자동으로 추가됩니다.

그러나 이 기본 장바구니 페이지에서는 더 높은 전환을 기대할 수 없습니다. 그다지 전문적으로 보이지 않고 SEO 최적화가 충분하지 않으며 더 나은 사용자 경험을 보장할 수 없기 때문입니다. 따라서 기본 장바구니 페이지를 사용자 정의해야 합니다.

이 기사에서는 코딩이나 기술 지식 없이 Elementor에서 WooCommerce 장바구니 페이지를 편집하는 방법을 설명합니다 . 또한 동일한 솔루션을 사용하여 웹사이트에 미니 카트를 추가하는 방법을 배우게 됩니다.

맞춤형 WooCommerce 장바구니 페이지가 비즈니스에 도움이 되는 방법

WooCommerce 장바구니 페이지는 고객의 온라인 구매 여정에서 중요한 역할을 합니다. 구매자는 주문 목록을 보고, 주문 수량을 변경하고, 위시 목록에 제품을 추가하고, 프로모션 코드를 적용하고, 마지막으로 결제할 수 있습니다.

현재 4백만 개 이상의 웹사이트에서 WooCommerce를 적극적으로 사용하여 전자 상거래 프로젝트를 실행하고 있습니다. 고객이 동일한 기본 페이지를 사용한다면 얼마나 지루할 지 상상이 가시나요?

게다가 장바구니 페이지의 레이아웃은 테마에 따라 크게 달라집니다. 다른 많은 웹 사이트에서도 사용하고 있는 테마를 선택하면 최적화될 때까지 대부분의 사용자가 비슷한 모양을 가질 수 있습니다. 이러한 카피캣 룩이 고객을 설득하기에 충분하다고 생각하십니까?

게다가 WooCommerce 플러그인만 사용하면 많은 흥미로운 전자 상거래 모듈과 기능을 최적화할 수 없습니다. 교차 판매, 프로모션 코드, 특별 제안 등. 이는 장바구니 포기율이 높은 주요 원인이기도 합니다.

Sleeknote 에 따르면 인기 있는 전자 상거래 브랜드는 장바구니 포기로 인해 연간 약 180억 달러의 수익을 잃습니다. 따라서 오늘날에는 WooCommerce 장바구니 페이지를 수정하여 고객에게 더 나은 경험을 제공할 수 있도록 웹사이트를 보다 쉽게 ​​구분할 수 있도록 해야 합니다.

맞춤형 WooCommerce 장바구니 페이지를 만드는 데 코딩이 좋은 생각이 아닌 이유

일반적으로 HTML과 CSS는 웹사이트 페이지를 편집하는 데 사용됩니다. 단, 전문적인 코딩 능력이 있는 사람에게만 유효합니다. 그러나 귀하는 오픈 소스 솔루션을 사용하고 있기 때문에 전문 코더가 아닌 것으로 간주할 수 있습니다.

이것이 사실이라면 장바구니 페이지를 편집하기 위해 코딩을 피해야 하는 여러 가지 이유가 있습니다. 예를 들어:

• 숙련되지 않은 경우 부적절한 코딩으로 인해 웹 사이트가 더 많이 손상될 수 있습니다.
• 코딩이 제대로 최적화되지 않으면 웹사이트가 다운되거나 속도가 느려질 수 있습니다.
• 장바구니 페이지를 코딩할 전문가를 고용하는 것은 비용이 많이 드는 프로젝트일 수 있습니다.
• 테마와 플러그인이 업데이트될 때마다 웹 코딩을 업데이트해야 합니다.

이제 이에 대한 대체 솔루션이 있는지 궁금할 수 있습니다. 예, 드래그 앤 드롭 페이지 빌더를 사용하면 코딩 지식에 관계없이 누구나 장바구니 페이지를 즉시 생성하거나 사용자 정의할 수 있습니다. 숙련된 개발자도 웹사이트 빌더 플러그인을 사용하여 클라이언트에게 빠른 서비스를 제공할 수 있습니다.

Elementor에서 제공하는 Happy Addons는 동적 페이지 빌더입니다. 다음 섹션에서는 이 플러그인을 사용하여 WooCommerce 장바구니 페이지를 편집하고 미니 장바구니를 추가하는 방법을 보여드리겠습니다. 계속 읽으세요.

관련 리소스: WordPress에서 온라인 스토어를 사용자 지정하기 위한 필수 WooCommerce 단축 코드.

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

200,000개 이상의 활성 설치가 있는 Happy Addons는 최고의 Elementor Addons 중 하나입니다. 98 개 이상의 강력한 위젯과 웹 페이지를 만들거나 사용자 정의할 수 있는 많은 흥미로운 기능이 있습니다.

'WooCommerce 장바구니' 위젯을 사용하여 장바구니 페이지에 독창적인 모양을 줄 수 있습니다. 여기에서 그 방법을 알려드리겠습니다.

WooCommerce 장바구니 페이지 편집을 위한 전제 조건

WooCommerce 장바구니 위젯을 활성화하려면 다음 요구 사항을 확인해야 합니다.

• 우커머스
• 엘리멘터
• 해피 애드온 무료
• 해피 애드온 프로

라이선스로 Happy Addons Pro를 설치하는 방법은 다음과 같습니다. 모든 플러그인을 설치하고 활성화한 직후 다음 단계를 따르세요.

• 01단계: Elementor 캔버스 페이지 열기
• 02단계: Elementor 위젯 갤러리에서 WC 카트 드래그 앤 드롭
• 03단계: 쿠폰 및 교차 판매 활성화
• 04단계: 스타일 섹션에서 테이블 콘텐츠 업데이트
• 05단계: 고급 섹션에서 반응형 테이블 만들기

01단계: Elementor 캔버스 페이지 열기

먼저 웹사이트의 관리자 대시보드 로 이동합니다. 그런 다음 아래 이미지에 따라 장바구니 페이지의 편집 옵션을 클릭합니다.

Elementor로 편집 버튼이 있는 흰색 페이지가 표시됩니다. 버튼을 클릭합니다.

새로운 Elementor 캔버스 페이지로 이동합니다. 왼쪽에 Elementor Widget Gallary 가 표시됩니다. 위젯을 선택한 영역 의 오른쪽으로 끌어다 놓습니다.

여기에서 WooCommerce 장바구니 위젯을 추가하고 장바구니 페이지를 디자인합니다.

02단계: Elementor 위젯 갤러리에서 WC 카트 드래그 앤 드롭

좌측 검색창에 '우커머스 장바구니' 를 입력하세요. WC 장바구니 아이콘이 표시됩니다. 선택 영역 위로 드래그 앤 드롭합니다.

참고: 디스플레이 상단에 웹 로고, 제품 카테고리 및 검색 양식이 표시되지 않아도 걱정하지 마십시오. 캔버스를 아름답게 하기 위해 위의 사진에 이러한 항목을 추가했습니다.

03단계: 쿠폰 및 교차 판매 활성화

이제 콘텐츠 > 일반 에서 장바구니 페이지의 쿠폰 필드 및 교차 판매 옵션을 숨기거나 표시할 수 있습니다.

04단계: 스타일 섹션에서 테이블 콘텐츠 업데이트

'스타일' 섹션으로 이동합니다. 여기에 장바구니를 디자인할 수 있는 7가지 옵션이 더 있습니다. 그들은:

• 카트 테이블
• 쿠폰
• 장바구니 버튼 업데이트
• 장바구니 합계: 제목
• 장바구니 합계: 테이블
• 결제 버튼
• 교차 판매

카트 테이블 업데이트

카트 테이블 을 클릭합니다. 장바구니 테이블 내용을 편집할 수 있는 다양한 옵션이 제공됩니다. Table, Table Head, Cart Image, Quality Input, Product Remove, Update Car Row 등이 있습니다.

테이블 헤드 옵션에서 텍스트 및 배경색을 변경합니다. 여기 사진에서 텍스트는 흰색, 배경은 검정색으로 설정했습니다.

쿠폰 코드 적용

쿠폰 옵션에서 입력 높이, 패딩, 테두리 유형, 테두리 반경, 상자 그림자, 텍스트 색상 및 배경 색상 을 편집할 수 있습니다.

조금 내려가면 쿠폰 적용 버튼을 편집할 수 있는 옵션이 있습니다. 여기서 다시 텍스트에 흰색을 설정하고 배경에 검정색을 설정했습니다.

장바구니 버튼 업데이트

'카트 업데이트 버튼' 을 사용하면 타이포그래피 , 너비, 여백, 테두리 유형, 테두리 반경, 패딩, 배경색, 텍스트 색상 및 상자 그림자 를 사용자 지정할 수 있습니다.

다시 한 번 Update Cart 버튼의 텍스트에 흰색을 설정하고 배경에 검정색을 설정했습니다.

장바구니 합계: 제목

이제 '장바구니 합계: 제목' 옵션으로 이동합니다. 여기에서 장바구니 상자의 색상, 타이포그래피 및 간격 을 사용자 지정할 수 있습니다.

장바구니 합계: 테이블

여기에서 표, 표 텍스트 및 표 머리글 을 사용자화할 수 있습니다. 또한 배경색, 테두리 유형, 테두리 반경, 상자 그림자, 타이포그래피 및 색상 을 변경할 수 있습니다. Cart Total 배경에 ash 색상을 설정했습니다.

결제 버튼

'결제 버튼' 에서 타이포그래피, 너비, 여백, 테두리 유형, 테두리 반경, 패딩, 배경색, 텍스트 색상 및 상자 그림자 에 스타일을 추가할 수 있습니다.

여기서는 Proceed to checkout 버튼의 배경색을 파란색으로 설정했습니다.

교차 판매

마지막으로 교차 판매 옵션을 통합한 경우 이 옵션에서 제목, 가격, 버튼 및 판매 배지 를 사용자 지정할 수 있습니다.

05단계: 고급 섹션에서 반응형 테이블 만들기

그러나 고급 옵션에서 장바구니 페이지를 추가로 사용자 지정할 수 있습니다. 거기에서 장바구니 페이지 배경을 사용자 정의하고, 행복한 효과를 추가하고, 사용자에게 더 반응적으로 만들 수 있습니다.

이제 새로 편집된 WooCommerce 장바구니 페이지의 최종 미리보기를 살펴보겠습니다.

따라서 전자 상거래 사이트에 대한 새 장바구니 페이지 만들기를 완료할 수 있습니다.

Elementor를 사용하여 WooCommerce 웹 사이트에 미니 카트를 추가하는 방법

미니 카트는 고객이 장바구니에 추가한 제품의 요약을 담고 있습니다. 일반적으로 전자 상거래 웹사이트에서 쇼핑 트롤리 아이콘으로 표시됩니다.

사용자가 아이콘 위에 커서를 놓을 때마다 제품에 대한 간략한 요약이 포함된 팝업이 열립니다. 고객이 장바구니 페이지를 열지 않고도 수량을 추가하거나 항목을 제거할 수 있습니다.

미니 장바구니 위젯을 사용하여 웹사이트에 미니 장바구니를 추가할 수 있습니다.

WooCommerce 웹 사이트에 미니 카트를 추가하기 위한 전제 조건

• 우커머스
• 엘리멘터
• 해피 애드온
• 해피 애드온 프로

방금 전에 장바구니 페이지를 편집했으므로 귀하의 웹사이트가 이미 위의 요건을 충족하고 있기를 바랍니다. 따라서 즉시 아래 단계를 따르십시오.

• 01단계: Elementor 캔버스에 새 섹션 추가
• 02단계: Elementor 위젯 갤러리에서 미니 카트 드래그 앤 드롭
• 03단계: 콘텐츠 섹션에서 미니 카트 아이콘 및 위치 업데이트
• 04단계: 팝업 스타일 변경
• 05단계: 스타일 섹션에서 미니 카트 본체 업데이트

01단계: Elementor 캔버스에 새 섹션 추가

장바구니 테이블 상단에서 섹션 추가 아이콘을 클릭합니다. 캔버스에 새 영역이 추가됩니다.

02단계: Elementor 위젯 갤러리에서 미니 카트 드래그 앤 드롭

왼쪽 검색창에 Mini Cart 를 입력하세요. 미니 카트 아이콘이 표시됩니다. 새로 추가된 영역에 끌어다 놓습니다.

03단계: 콘텐츠 섹션에서 미니 카트 아이콘 및 위치 업데이트

콘텐츠 > 미니 카트 에서 로고 변경, 정렬, 위치 변경이 가능합니다. 여기에서 올바른 정렬을 수행했습니다.

04단계: 팝업 스타일 변경

인기 있는 마켓플레이스에서 팝업은 특히 미니 카트와 통합됩니다. 누군가 커서를 가져가거나 장바구니 아이콘을 클릭하면 디스플레이에 팝업이 자동으로 나타납니다. '장바구니 팝업 표시' 옵션에서 클릭 또는 호버 중에서 선택할 수 있습니다. 여기에서는 Hover 옵션을 선택했습니다.

이제 미니 카트 아이콘에 커서를 가져가면 디스플레이에 팝업이 표시됩니다.

참고: 때때로 Elementor와의 충돌로 인해 미니 카트 팝업이 백엔드에 표시되지 않을 수 있습니다. 걱정하지 마시고 미리보기로 이동하여 확인하세요.

05단계: 스타일 섹션에서 미니 카트 본체 업데이트

스타일 섹션에는 미니 카트를 사용자 정의할 수 있는 6가지 옵션이 더 있습니다. 그들은

• 미니 카트
• 팝업:- 바디
• 팝업:- 헤더
• 팝업:- 항목
• 팝업:- 소계
• 팝업:- 버튼

스타일 > 미니 카트 에서 아이콘 크기, 텍스트 색상, 배경색, 테두리, 타이포그래피 등 을 사용자 지정할 수 있습니다. 예를 들어 여기에서 Mini Cart 아이콘에 빨간색을 설정했습니다.

따라서 다른 옵션을 확인하고 미니 카트 사용자 정의를 완료할 수 있습니다. 그러나 문제가 발생하면 이 문서에서 대부분의 답변을 찾을 수 있습니다. 게다가 당신은 우리에게 당신의 문제를 댓글로 알릴 수 있습니다.

이제 간단하면서도 효과적인 방법으로 WooCommerce 장바구니 페이지를 사용자 정의하는 모든 단계를 알게 되었습니다.

보너스 팁: WooCommerce 장바구니 포기율을 줄이는 방법

고객이 장바구니에 제품을 추가했지만 주문을 완료하지 않는 경우를 장바구니 포기라고 합니다. 현재까지 모든 전자상거래 산업의 평균 장바구니 포기율은 65.23%입니다.

이것은 오늘날 모든 전자 상거래 사이트 소유자에게 큰 골칫거리입니다. 몇 가지 시도되고 테스트된 접근 방식을 따르면 상당한 마진으로 장바구니 포기율을 크게 변경할 수 있습니다. 아래에서 다루겠습니다.

1. 숨겨진 비용을 방지하십시오

숨겨진 비용은 과도한 장바구니 포기율의 첫 번째 이유입니다. Baymard Institute는 연구에서 잠재 고객의 55%가 추가 비용을 발견하면 결제 페이지를 완료하지 않은 상태로 두는 것으로 밝혔습니다.

따라서 제품 설명에 쇼핑 비용, 포장 비용, 세금 및 기타 항목을 포함하여 각 제품의 총 비용을 명확히 하십시오.

2. 여러 지불 옵션 제공

여러 결제 수단을 통합하지 않으면 잠재 고객 수가 줄어들 수 있습니다. 오늘날 시장에는 수많은 지불 시스템이 있습니다. 따라서 고객들은 더 이상 체크카드와 신용카드 시스템에만 집착하지 않습니다.

따라서 가능하면 디지털 지갑, 은행 송금, 선불 카드, 착불 및 기타 결제 옵션을 허용해야 합니다.

3. 다양한 배송 옵션 제공

느린 배송은 전자 상거래 세계에서 19%의 장바구니 포기를 유발합니다. 고객은 항상 가장 저렴한 비용으로 가장 빠른 배송을 원합니다. 하지만 배송이 빠르면 배송비가 엄청나게 오르는 제품도 많다.

따라서 여러 배송 옵션을 허용해야 합니다. 이를 통해 고객은 시간과 경제성에 맞는 최상의 택배 옵션을 선택할 수 있습니다.

관련 리소스: 장바구니 포기를 줄이고 잃어버린 고객을 재타겟팅하는 10가지 이상의 효과적인 방법.

4. 명확한 클릭 유도문안(CTA) 버튼 사용

명확한 CTA 버튼은 긴급성과 확고한 약속을 만들고 고객을 정서적으로 자극할 수 있습니다. 그러나 많은 전자 상거래 웹 사이트는 이 가치를 평가하지 못합니다. 가장 많이 사용되는 CTA 버튼은 다음과 같습니다.

• 지금 구매
• 내 구매 완료
• 오늘 잡아
• 내 할인 받기
• 내 바우처 사용

따라서 CTA 버튼을 강력하게 만들고 어떤 상황에서 사용하는지 배워야 합니다.

5. 장바구니 내용에 대해 고객에게 알리기

장바구니에 제품을 담는 것을 좋아하지만 나중에 확인하는 것을 잊어버리는 고객이 많이 있습니다. 이 경우 정기적으로 제품에 대한 간략한 요약을 포함하는 후속 이메일을 고객에게 보낼 수 있습니다. 물건을 살까 말까 다시 생각하게 만든다.

6. 제품을 확보하기 위한 긴급 상황 생성

긴급성은 고객이 가능한 빨리 주문을 완료하도록 할 수 있습니다. 그러나 그러한 상황을 만들기 위해서는 그들에게 추가적인 가치를 제공해야 합니다. 할인, 무료 배송, 2일 배송, 무료 품목 등. 긴급성을 유발하는 전환율이 높은 광고 문구는 다음과 같습니다.

• 놓치지 마세요
• 재고 정리 판매
• 마지막 기회
• 단독 원데이 세일!
• 물량이 한정된 상품

이메일 마케팅은 또한 시장에서 긴급성을 확산시키는 좋은 방법입니다. 매력적인 이메일 제목과 설명을 작성하는 방법을 배우십시오.

7. 반품 및 환불 정책 확인

오늘날 고객은 쇼핑을 위해 온라인 플랫폼을 선택하는 데 더 신중합니다. 매년 11%의 온라인 사용자가 명확한 반품 및 환불 정책이 없는 전자상거래 웹사이트를 중단합니다.

그들 없이는 고객이 안심하고 쇼핑을 계속할 수 없기 때문입니다. 따라서 비즈니스의 브랜드 가치를 유지하려면 웹사이트에 반품 및 환불 정책을 포함해야 합니다.

8. 간편하고 간편한 결제 페이지 유지

고객이 결제 페이지로 들어가면 주문을 완료할 준비가 거의 완료되었음을 의미합니다. 따라서 너무 많은 양식 필드와 복잡성과 혼동하는 것이 현명할까요? Semrush에 따르면 장바구니 포기의 27%는 복잡한 결제 프로세스로 인해 발생합니다.

따라서 결제 페이지를 매우 단순하게 유지해야 합니다. 다음과 같은 가장 필수적인 정보만 요청하십시오.

• 이름
• 배송 주소
• 이메일 주소
• 지불 세부 사항

또한 여기에 개인 정보나 민감한 정보를 묻지 마십시오.

WooCommerce 장바구니 페이지 편집 준비

오늘날 2,200만 개 이상의 전자상거래 웹사이트가 웹에서 활발하게 활동하고 있습니다. WooCommerce 장바구니 페이지는 제품 세부 정보와 결제 페이지를 연결합니다. 페이지의 사소한 오류나 어려움으로 인해 고객이 다른 곳으로 이동할 수 있습니다.

WooCommerce 장바구니 페이지를 편집하는 것이 이렇게 쉬웠던 적이 없었습니다. 그러나 오늘날에는 코딩 지식이 없거나 전문가를 고용하지 않고도 이 작업을 수행할 수 있습니다. 드래그 앤 드롭 방식을 사용하면 직접 시도해 볼 수도 있습니다.

WooCommerce 장바구니 페이지를 편집하는 것 외에도 이 기사에서는 웹사이트에 미니 장바구니를 추가하는 방법도 다뤘습니다. 이 기사가 도움이 되었다면 구독하여 더 흥미로운 콘텐츠를 받아보세요.

맞춤형 WooCommerce 장바구니 페이지와 관련하여 추가 질문이 있습니까? 아래 의견 섹션에서 의견을 공유하십시오!