코딩 없이 WooCommerce 장바구니 페이지를 사용자 정의하는 방법(무료)

WooCommerce 장바구니 페이지 사용자 정의는 장바구니 페이지 포기를 포함하여 여러 가지 이점을 제공하지만 원활하게 수행하는 것은 쉽지 않습니다.

장바구니 페이지에서는 장바구니를 결제할지 아니면 포기할지 최종 결정을 내리게 됩니다. 구매자가 장바구니를 포기하는 것을 원하지 않으시겠죠? 여기가 WooCommerce 장바구니 페이지를 맞춤설정해야 하는 곳입니다. 

이 블로그에서는 코딩 없이 WooCommerce 장바구니 페이지를 사용자 정의하는 방법에 대한 단계별 가이드를 찾을 수 있습니다.

시작하자…

기본 WooCommerce 장바구니 페이지는 어떻게 보입니까?

우커머스 장바구니 페이지의 매우 기본적인 레이아웃을 제공합니다. 다양한 테마가 페이지에 다양한 스타일을 추가하더라도 모양은 여전히 동일합니다.

다음은 WooCommerce 장바구니 페이지 디자인의 공통 요소입니다(포함되지만 이에 국한되지는 않음).

WooCommerce 장바구니 페이지를 편집하고 필요에 따라 요소를 사용자 정의할 수 있습니다. 그 전에 기본 WooCommerce 장바구니 페이지가 다양한 테마에서 어떻게 보이는지 살펴보겠습니다.

WooCommerce 장바구니 페이지 디자인은 다음과 같습니다. WordPress Twenty Twenty 테마:

장바구니 페이지가 다음과 같이 표시됩니다. WordPress의 Twenty Twenty One 테마:

다음과 같은 인기 있는 Elementor 테마도 안녕하세요 엘레멘터님 동일한 이전 레이아웃을 사용하여 매우 기본적으로 보이는 WooCommerce 장바구니 페이지 디자인을 제공합니다.

위의 모든 장바구니 페이지는 동일한 레이아웃을 가지며 화려하거나 특별한 것을 제공하지 않는다는 점에 동의하실 것입니다.

➡️➡️ 확인 WooCommerce 웹사이트에 통화 전환기를 추가하는 5단계 방법

WooCommerce 장바구니 페이지를 사용자 정의하는 이유

BuildWith의 2023년 11월 보고서에 따르면 660만 개 이상의 라이브 웹사이트에서 WoCommerce를 사용하고 있습니다.

WooCommerce를 사용하면 장바구니 페이지를 포함한 템플릿을 사용하여 바로 사용할 수 있는 모든 기능을 갖춘 전자상거래 웹사이트를 즉시 구축할 수 있습니다. 이러한 웹사이트 중 다수는 카트 및 기타 페이지에 WooCommerce의 기본 템플릿을 사용합니다.

그러나 귀하의 웹사이트 장바구니 페이지가 다른 페이지와 유사하게 보이는 것을 원하지 않을 것입니다. 이는 구매자의 관심을 끌 가능성이 높기 때문입니다. 군중 속에서 눈에 띄기 위해 WooCommerce 카트 페이지 편집 또는 WooCommerce 카트 사용자 정의가 도움이 될 수 있습니다.

주변에 있다는 것도 사실이에요  70%의 사람들이 포기함 장바구니에 담아두고 절대 결제를 진행하지 마세요. 이는 WooCommerce 장바구니 페이지를 사용자 정의하는 것이 얼마나 중요한지 보여줍니다.

그리고 사람들은 군중 속에서 독특하고 눈에 띄는 것에 매력을 느낀다는 것은 알려진 사실입니다.

따라서 장바구니 페이지가 군중 속에서 길을 잃지 않도록 하십시오. 오히려 눈에 띄고 더 많은 주문을 받는 데 도움이 되도록 맞춤 설정하십시오. 

이제 문제는 눈에 띄는 장바구니 페이지를 어떻게 얻을 수 있느냐는 것입니다. WooCommerce 장바구니 페이지 디자인을 만드는 방법에는 두 가지가 있습니다.

1. 1. WooCommerce 파일 편집(코딩 방법을 알아야 함)
2. 2. 드래그 앤 드롭 플러그인 사용

블로그에서도 확인하실 수 있습니다👉👉 WooCommerce에 통화 전환기를 추가하는 방법

사용자 정의 WooCommerce 장바구니 페이지를 얻기 위해 코드를 편집하는 것이 좋은 생각이 아닌 이유

원하는 장바구니 페이지를 얻기 위해 코드를 편집하는 것은 옵션이지만 비코더에게는 권장되지 않습니다. 웹사이트 구축을 위해 WooCommerce와 같은 즉시 사용 가능한 플랫폼을 선택하셨기 때문에 아무것도 직접 코딩할 생각은 없으실 것 같습니다.

초보자 프로그래머나 비코더가 WooCommerce 장바구니 페이지 디자인 목적으로 기본 코드 편집을 피해야 하는 몇 가지 이유는 다음과 같습니다.

• 이를 위해서는 전문 프로그래머가 되어야 하며 전문가처럼 HTML, CSS, Javascript 및 PHP를 알아야 합니다.
• 코드를 효율적으로 편집하고 최적화하지 않으면 웹사이트 속도가 느려질 수 있습니다.
• WooCommerce 테마를 변경할 때마다 코드를 변경해야 합니다.
• WooCommerce가 새로운 업데이트를 발표하면 코드가 WooCommerce의 새 버전과 호환되도록 새로 변경해야 합니다.
• 하위 테마를 만들지 않으면 WooCommerce가 업데이트될 때 모든 코드가 손실될 수도 있습니다.

게다가 WordPress 및 WooCommerce와 같은 플랫폼을 사용하는 경우 애초에 코딩을 피하고, 장바구니 페이지를 편집하기 위해 코딩을 배우는 이유는 무엇입니까?

걱정 마. 코딩할 필요 없이 장바구니 페이지를 원활하게 맞춤 디자인하는 데 사용할 수 있는 또 다른 프로세스가 있습니다. 단 한 줄도 아닙니다. 약속하다!

코딩 지식 없이도 WooCommerce 장바구니 페이지를 편집하는 방법을 알아보세요!

드래그 앤 드롭 플러그인을 사용하여 WooCommerce 장바구니 페이지를 사용자 정의하는 방법

이제 간편한 드래그 앤 드롭 기술로 장바구니 페이지를 디자인할 수 있습니다. WooCommerce PageBuilder 플러그인 덕분에 ShopEngine.

ShopEngine은 최고의 제품입니다 우커머스 건축업자 미리 만들어진 템플릿및 위젯을 사용하여 WooCommerce 페이지를 사용자 정의하고 유용한 전자상거래 기능을 갖춘 모듈. 이 플러그인을 사용하면 장바구니 페이지를 포함한 WooCommerce 페이지의 디자인을 완벽하게 제어할 수 있습니다.

ShopEngine은 사전 제작된 장바구니 템플릿, 처음부터 카트 페이지를 생성할 수 있을 뿐만 아니라 WooCommerce 카트 사용자 정의도 수행할 수 있습니다. 이 블로그에서는 WooCommerce 장바구니 페이지를 편집하여 처음부터 새로운 페이지를 만드는 과정을 안내해 드리겠습니다.

ShopEngine을 사용하도록 설득하는 데 더 많은 이유가 필요하십니까? 우리 블로그를 읽어보세요 이곳을 추천해드리는 이유 11가지

#1 단계: Elementor 및 ShopEngine 설치

WooCommerce에서 장바구니 페이지를 사용자 정의하는 방법을 시작하려면 두 가지 플러그인이 필요합니다.

1. 엘레멘터
2. ShopEngine 

ShopEngine은 Elementor를 위한 WooCommerce 페이지 빌더이기 때문에 Elementor가 필요합니다. 꼭 설치하세요 엘레멘터 첫 번째. 

#2단계: 장바구니 페이지 템플릿 생성

두 플러그인을 모두 설치한 후 장바구니 템플릿을 생성하세요. 장바구니 페이지 템플릿을 생성하려면:

• 이동: 대시보드 => ShopEngine => 빌더 템플릿
• 딸깍 하는 소리 ~에 새로운 걸 더하다 템플릿 설정 창을 열려면
• 줘 템플릿 이름 당신이 선호하는
• 선택하다 장바구니로 입력 드롭다운에서
• 켜다 기존 장바구니 페이지를 무시하는 기본값 설정 옵션
• 아래의 빈 옵션을 선택하세요. 샘플 디자인 
• 클릭 변경 사항을 저장하다 업데이트하다

메모: 얻으려면 즉시 사용 가능한 카트 템플릿, 템플릿을 생성하는 동안 "샘플 디자인 1" 옵션을 선택하세요. 미리 만들어진 템플릿의 모든 요소를 편집할 수도 있습니다. 처음부터 새로 만들 예정이므로 공백을 선택했습니다.

#3단계: 레이아웃/구조 선택

이제 레이아웃을 선택할 차례입니다. 시작하려면 

• 이동 ShopEngine => 빌더 모듈
• 장바구니 템플릿에 마우스를 올리세요. 목록에서
• 클릭 Elementor로 편집

• Elementor Editor가 열리면 딸깍 하는 소리 새 섹션 추가에서 (+) 상 
• 이제 다음을 선택하세요. 구조/레이아웃 너는 좋아한다

#4 단계: ShopEngine 위젯을 사용하여 장바구니 페이지 디자인

ShopEngine은 WooCommerce 디자인을 위한 5가지 위젯을 독점적으로 제공합니다. 장바구니 템플릿. 장바구니 템플릿 위젯과 함께 다음을 사용할 수도 있습니다. 쿠폰 양식 장바구니 페이지를 구축하기 위한 위젯과 5개 이상의 일반 위젯.

이 블로그에서는 다음 위젯을 사용하겠습니다.

• 카트 테이블: 장바구니 위젯은 장바구니에 있는 모든 제품을 가격, 수량, 소계가 포함된 테이블 형식으로 표시합니다. 고객은 한 번의 클릭으로 제품 수량을 업데이트하고 장바구니를 비울 수도 있습니다..
• 장바구니 합계: 이 위젯은 사용 가능한 모든 배송 방법과 총 주문 총액을 보여줍니다.
• 상점으로 돌아가기: 이 위젯은 상점 페이지로 돌아갈 수 있는 링크가 포함된 버튼을 제공합니다.
• 체크아웃 쿠폰 양식: 고객은 이 위젯을 통해 할인 쿠폰을 사용할 수 있습니다..
• 딜상품: 이 위젯을 사용하면 판매 일정 기간을 표시하는 카운트다운 타이머를 사용하여 장바구니 페이지에 판매 제품을 선보일 수 있습니다. ShopEngine의 일반 위젯입니다.
• 교차판매: Cross-sell은 모든 교차판매 제품을 장바구니 페이지에 보기 좋게 표시합니다.

먼저, 다음을 수행해야 합니다. 위젯 켜 줘 장바구니 페이지에서 사용하고 싶습니다. 켜려면  

• 이동 관리 대시보드 => ShopEngine => 위젯. 
• 사용하려는 위젯을 스크롤하여 검색하세요.
• 할 수 있게 하다 사용하고 싶은 위젯
• 클릭 변경 사항을 저장하다 페이지 상단에

이제 위젯을 레이아웃에 끌어다 놓을 차례입니다. 장바구니 페이지 편집기 모드로 돌아갑니다.

• 찾다 위젯용
• 끌어서 놓기 위젯(하나씩)

메모: 쇼핑 계속 버튼과 모두 숨기기 버튼을 숨길 수 있습니다.

ShopEngine은 Elementor와 완벽하게 호환되므로 동일한 페이지에서 여러 레이아웃을 사용할 수 있습니다. 다음 부분에서는 다른 레이아웃을 사용해 보겠습니다. 그러기 위해 구조가 다른 새 섹션을 추가하고 드래그 앤 드롭으로 크로스셀(cross-sell) 및 딜 제품 위젯.

메모: 당신은 교차판매 제품 추가 그리고 판매중인 세트상품 교차 판매 및 거래 제품에 대한 제품 설정 아래 관리 대시보드의 일정이 프런트 엔드에 표시됩니다.

Cross-Sell과 Deal 상품 모두 서로 다른 혜택을 제공합니다. 사용자 정의할 수 있는 설정. 따라서 위젯을 드래그 앤 드롭한 후 원하는 대로 설정을 맞춤설정하세요.

크로스셀(cross-sell) 위젯 사용, 슬라이더 활성화 켜기/끄기, 플래시 세일, 세일 가격, 장바구니 버튼 표시/숨기기 및 콘텐츠 설정에 표시할 제품 수와 같은 옵션이 제공됩니다. 슬라이더의 경우 보기당 슬라이드 수, 반복 및 자동 재생과 같은 옵션이 제공됩니다. 슬라이드 속도 등. 또한 고급 탭 아래에 주문 기준 및 주문 옵션도 제공됩니다.

딜 제품은 다음을 제공합니다. 콘텐츠 설정 주문, 정렬 기준, 날짜, 제품 표시, 열, 열 간격 및 행 간격과 같은 것입니다. 또한 판매 활성화, 배지, 판매 배지, 판매, 제목 단어 제한, 백분율 배지, 카운트다운 시계 및 일수를 포함한 다른 설정도 제공됩니다.

#5단계: WooCommerce 장바구니 페이지의 스타일 매개변수 사용자 정의

구조뿐만 아니라 ShopEngine을 사용하면 장바구니 페이지 스타일도 완벽하게 제어할 수 있습니다.

ShopEngine 위젯의 스타일 매개변수를 변경하려면 편집하려는 위젯 위로 마우스를 가져가 오른쪽 상단에서 편집 옵션을 찾으세요. 콘텐츠에 대한 모든 WooCommerce 장바구니 설정을 찾으려면 해당 옵션을 클릭하세요. 스타일 왼쪽에 위치한 Elementor 패널에서.

이 블로그에서 사용되는 각 위젯에 대해 사용자 정의할 수 있는 스타일 설정을 살펴보겠습니다.

카트 테이블: 

테이블 헤더, 테이블 본문, 제품 이미지, 수량의 스타일 설정을 변경할 수 있습니다. 테이블 바닥글 및 전역 글꼴. 자세한 내용은 당사를 확인하세요. Cart 테이블에 대한 문서입니다.

상점으로 돌아가기:

버튼 정렬, 타이포그래피, 테두리 색상, 테두리 반경 및 상자 그림자를 변경할 수 있습니다. 자세한 내용은 당사를 확인하세요. Return To Shop 위젯에 대한 문서

쿠폰 양식:

쿠폰 양식의 경우 정보, 설명, 쿠폰 양식, 적용 버튼 및 글로벌 글꼴에 대한 스타일 설정이 제공됩니다. 자세한 스타일 옵션은 당사 홈페이지에서 확인하실 수 있습니다. 쿠폰 양식에 대한 문서.

장바구니 합계:

장바구니 전체 위젯의 경우 테이블, 입력, 결제 업데이트 버튼 및 전역 글꼴의 스타일을 변경하는 다양한 스타일 옵션이 제공됩니다. WooCommerce 장바구니 스타일 설정에 대한 자세한 내용은 다음을 확인하세요. 장바구니 합계에 대한 문서.

교차 판매: 

교차 판매 위젯의 경우 항목 스타일, 반짝 세일, 이미지, 제목 경주, 가격, 장바구니에 추가, 슬라이더 스타일 및 전역 글꼴을 포함하는 다양한 스타일 옵션을 얻을 수 있습니다. Cross, Sale 스타일에 대한 자세한 내용은 문서를 확인해보세요.

거래 제품:

제품 래퍼, 제품 이미지, 제품 배지, 카운트다운 시계, 콘텐츠 스타일, 재고 및 진행률 표시줄, 전역 글꼴에 대한 다양한 스타일 옵션이 제공됩니다. 스타일 옵션에 대한 자세한 내용을 보려면 Deal Product 위젯에 대한 설명서를 확인하세요..

#6단계: 사용자 정의 WooCommerce 장바구니 페이지 업데이트 및 미리보기

스타일을 변경한 후 다음을 클릭하세요. 업데이트 변경 사항을 저장하고 다음을 클릭하세요. 시사 변경 사항을 확인하세요.

이 블로그에 언급된 레이아웃과 설정을 따랐다면 ShopEngine을 사용하여 아래와 같이 WooCommerce에서 사용자 정의 장바구니 페이지를 디자인해야 합니다.

보너스: ShopEngine 모듈을 사용하여 전자상거래 매장 판매를 촉진하는 팁

이제 wooCommerce에서 장바구니 페이지를 구축하고 사용자 정의하는 방법을 알았습니다. WooCommerce 장바구니 페이지 템플릿 빌더 외에도 ShopEngine은 온라인 상점 판매를 늘릴 수 있는 중요한 전자상거래 기능을 갖춘 유용한 모듈을 제공합니다. ShopEngine 모듈에는 다음이 포함됩니다.

• 퀵뷰
• 변형 견본
• 위시리스트
• 제품 비교

WooCommerce 매장 소유자라면 이러한 기능이 온라인 구매 경험을 좋게 만드는 데 얼마나 중요한지 알고 계실 것입니다. 카트 템플릿에 대해 이야기하면 퀵뷰 버튼과 위시리스트 교차 판매 버튼을 사용하면 고객에게 더 나은 쇼핑 경험을 제공할 수 있습니다. 그리고 이는 고객이 더 많은 제품을 구매할 가능성을 높입니다.

Quick View를 통해 고객은 단 한 번의 클릭으로 모든 제품의 전체 정보를 쉽게 확인할 수 있습니다. 마찬가지로 사용자는 한 번의 클릭만으로 위시리스트 모듈 버튼을 사용하여 나중에 결제할 제품을 위시리스트에 추가할 수 있습니다. 이 두 기능 모두 제품 판매 증가에 중요한 역할을 할 수 있습니다.

따라서 장바구니 페이지를 사용자 정의하는 데 그치지 말고 ShopEngine 모듈을 사용하여 고객에게 훌륭한 구매 경험을 제공하고 매장 판매를 늘리십시오.

보너스 블로그:
✅ 코딩 없이 WooCommerce 카테고리 페이지를 사용자 정의하는 방법
✅ ShopEngine을 사용하여 WooCommerce 내 계정 페이지를 사용자 정의하는 방법 
✅ ShopEngine을 사용하여 WooCommerce 쇼핑 페이지를 사용자 정의하는 방법 
✅ ShopEngine을 사용하여 WooCommerce 제품 페이지를 사용자 정의하는 방법
✅ ShopEngine을 사용하여 WooCommerce 결제 페이지를 사용자 정의하는 방법
✅ WordPress 및 WooCommerce를 위한 9개 이상의 유용하고 최고의 장바구니 플러그인

ShopEngine Pro로 업그레이드해야 하는 이유는 무엇입니까?

글쎄, 솔직히 ShopeEngine은 온라인 상점을 좋은 상점으로 만드는 데 충분한 기능을 제공합니다. 하지만 최고를 얻을 수 있는데 왜 좋은 것에 만족해야 할까요?

ShopEngine Pro는 전자상거래 상점에서의 온라인 쇼핑을 고객에게 최고의 구매 경험으로 만들어주는 다양한 기능을 제공합니다. wooCommerce 장바구니 페이지를 사용자 정의하는 것과 함께 액세스할 수 있습니다. 20개 이상의 모듈 포함하고있는 플래시 세일 카운트다운, 배지, 판매 통지, 빠른 결제, 정수리 지불, 통화 전환기, 그리고 더 많은.

고객 만족뿐만 아니라 ShopEngine 기능은 다음과 같은 모듈을 통해 온라인 상점 관리를 매우 쉽게 만들 수 있도록 설계되었습니다. 선주문, 이월 주문, 추가 결제 필드, 그리고 더 많은.

잊지 않도록 16+ 사전 제작 완전한 WooCommerce 사용자 정의 제어 기능을 갖춘 템플릿과 70개 이상의 고급 위젯 원한다면 처음부터 모든 WooCommerce 템플릿을 만들 수 있습니다.

장바구니 페이지의 경우 ShopEngine을 사용하면 온라인 상점을 위한 WooCommerce 맞춤형 장바구니 페이지도 구축할 수 있습니다.

아주 많은 기능, 사전 제작된 템플릿, 모듈을 갖춘 플러그인을 매우 합리적인 가격에 사용해 볼 수 있겠죠?

지금 ShopEngine 버전을 다운로드하고 WooCommerce를 사용자 정의하는 방법에 대해 다시는 걱정하지 마세요!

최종 단어

축하해요! WooCommerce 맞춤 장바구니 페이지를 성공적으로 다시 디자인했습니다. 쉽지 않았나요? 

그게 ShopEngine이 하는 일입니다. 이제 코딩 없이 WooCommerce 장바구니 페이지를 사용자 정의하는 방법을 알게 되었습니다.

따라서 온라인 상점을 기본 스타일로 제한하지 말고 전체 WooCommerce 웹사이트를 재설계하고 모듈을 사용하여 온라인 비즈니스를 그 어느 때보다 성공적으로 만드세요. 

그렇다면 다음에는 어떤 WooCommerce 페이지를 맞춤설정할 예정인가요? ShopEngine 사용 경험을 공유하는 것을 잊지 마십시오.