WooCommerce로 WordPress 장바구니를 설정하는 방법
게시 됨: 2022-10-28이제 새로운 WooCommerce 쇼핑 웹사이트 만들기가 거의 완료되었습니다. 기본 마켓플레이스 제품 레이아웃, 제품 카테고리 선택 메뉴 및 기능적 탐색 신호가 있는 머리글 바닥글 구성을 완료했습니다.
모든 전자 상거래 웹 사이트의 가장 중요한 측면은 주문 확인까지 결제 프로세스에 이르기까지 웹 사이트의 어느 곳에서나 고객이 장바구니에 제품을 추가하도록 리디렉션하고 지원하는 기능입니다.
이것은 WordPress 전자 상거래 웹 사이트에 통합하기 어려운 기능처럼 들릴 수 있지만 실제로는 그렇지 않습니다. WordPress에는 개발을 지원하는 대규모 커뮤니티가 있으며 모든 WordPress WooCommerce 테마 와 원활하게 작동 하는 WooCommerce 장바구니 플러그인 을 사용하여 웹사이트에 이 기능을 추가할 수 있습니다 .
목차
WooCommerce 장바구니는 어떻게 작동합니까?
WooCommerce에서 제품을 장바구니에 추가하면 고객이 선택한 변형 및 수량과 함께 별도의 목록에 추가됩니다. 이것은 사용자가 선택한 제품을 추적하는 데 도움이 되며 이 기능은 또한 계산 시 계산된 주문의 총 가격을 자동으로 볼 수 있도록 합니다. 또한 사용자에게 WooCommerce 장바구니 페이지를 편집할 수 있는 기능을 제공합니다.
WooCommerce에서 장바구니의 이점
WooCommerce 쇼핑 플랫폼에서 장바구니를 사용하면 몇 가지 큰 이점이 있습니다. WooCommerce 장바구니 페이지를 만드는 방법에 대한 단계별 가이드를 시작하기 전에 다음과 같은 내용이 있습니다.
- 고객이 구매할 하나 이상의 제품을 선택하고 다른 제품을 계속 탐색할 수 있도록 설계되었습니다.
- 장바구니에 계속 추가할 때 제품의 총 가치를 계산하는 데 도움이 됩니다.
- 선택한 제품의 수량 및 변형을 표시하고 그에 따라 총 값을 계산합니다.
- 버튼 클릭으로 고객을 결제 페이지로 리디렉션할 수 있습니다.
- 주문 내역, 장바구니 저장 등과 같은 추가 WooCommerce 장바구니 기능과 함께 제공될 수 있습니다.
- 사용자는 멋진 디자인 요소와 함께 제공되는 WooCommerce 장바구니 플러그인을 얻을 수 있습니다.
WooCommerce에 장바구니를 추가하는 방법
이제 WooCommerce에 장바구니를 추가하는 과정을 살펴보겠습니다. 이 기사가 끝나면 WordPress용 최고의 장바구니 플러그인을 제공하는 기능적인 전자 상거래 플랫폼으로 다양한 제품 판매를 시작할 수 있습니다.
1단계: 사전 요구 사항 설치
장바구니 생성 및 WooCommerce 장바구니 설정 프로세스를 시작하려면 WordPress 계정에 특정 플러그인 항목을 설치하고 활성화해야 합니다. 이를 위해서는 최신 버전의 WordPress , WooCommerce , Elementor 페이지 빌더 및 ShopReady WooCommerce Shop Builder 플러그인이 필요합니다.
플러그인을 설치하려면 WordPress 계정에 로그인하고 WordPress 대시보드 > 플러그인 > 새로 추가 로 이동하여 플러그인을 하나씩 검색한 다음 이제 설치 프로세스가 완료되면 활성화 를 클릭합니다. 필요한 모든 플러그인과 프로그램을 설치하려면 동일한 절차를 따르십시오.
2단계: WooCommerce 장바구니 테마 사용
이제 장바구니 기능 구축 프로세스를 진행하려면 일부 추가 기능에 대해 작동하는 WooCommerce 테마가 설치되어 있어야 합니다. 이 경우 WooCommerce WordPress 테마 를 사용하는 대신 WooCommerce 장바구니 템플릿을 사용할 수 있습니다.
이렇게 하면 사용자 지정 및 웹 사이트 게시에 걸리는 시간이 크게 줄어듭니다.
웹 사이트에 작동하는 전자 상거래 템플릿을 설치하려면 먼저 새 페이지를 만들고 WordPress 대시보드 > 페이지 > 새로 추가 에서 제목을 지정 Elementor Editor 화면 으로 리디렉션됩니다 . 여기에 ShopReady – Elementor 템플릿 라이브러리 아이콘이 있습니다. 아이콘을 클릭하면 템플릿 라이브러리에 액세스할 수 있습니다. 브랜드 아이덴티티에 맞는 템플릿을 선택하고 삽입 을 클릭 하여 템플릿을 적용합니다.
템플릿이 가져오기 프로세스를 마칠 때까지 기다리십시오.
다음과 같이 보여야 합니다.
WooCommerce에 제품을 추가하지 않은 경우 제품 섹션이 비어 있을 수 있습니다. WooCommerce 플랫폼에 선보이고자 하는 제품을 즉시 추가해야 합니다. 그렇게 하려면 – WooCommerce Store에 제품을 추가하는 방법 에 대한 이전 가이드를 따를 수 있습니다 .
각 WooCommerce 제품은 WooCommerce 제품 대시보드에서 제품 제목, 설명, 가격, 할인 가격, 이미지, 메타데이터, 변형 등으로 사용자 지정할 수 있습니다.
3단계: 제품 페이지 사용자 정의
제품 페이지를 개인화하는 프로세스를 시작하려면 ShopReady – WooCommerce Builder 대시보드로 이동하여 템플릿 옵션을 선택하십시오. 여기에서 기본 제품 페이지를 구성하여 사용자 정의의 시작점으로 사용할 수 있습니다. 제품 템플릿 범주를 켠 다음 해당 범주에서 단일 제품 설정을 찾습니다. 이제 도구 모음에서 편집 아이콘을 선택합니다.
그런 다음 Elementor Editor 를 표시하는 화면 이 로드됩니다. Elementor 인터페이스의 오른쪽 상단 모서리에 있는 더하기 기호를 클릭하기만 하면 페이지 사용자 지정 프로세스가 시작됩니다. 사용하려는 페이지와 위젯의 모양과 관련하여 삽입할 수 있는 Elementor 섹션과 관련하여 사용할 수 있는 다양한 옵션이 있습니다.
3단계: Elementor 위젯을 사용하여 WooCommerce Store의 제품 페이지 사용자 지정
제품 제목 추가
WooCommerce 제품 페이지에 대해 Elementor를 사용하여 이미 기본 섹션 구조를 설정했으므로 이제 제품 제목을 추가하는 프로세스를 시작할 수 있습니다. 이 목표를 달성하려면 끌어서 놓기 방식을 사용하여 제품 페이지에서 원하는 위치에 제품 제목 위젯을 배치해야 합니다.
Elementor 탐색 모음으로 이동하여 콘텐츠 탭을 선택한 다음, 그렇게 한 후 표시되는 하위 메뉴에서 Editor Refresh 선택 항목을 찾아 올바른 제품 제목을 표시합니다. 적절한 제품을 선택하려면 데모 제품 아래에 있는 드롭다운 메뉴에서 이름을 클릭하십시오.
이 데이터가 올바른 제품 제목을 표시하려면 WooCommerce 제품 대시보드로 이동하여 필수 제품 정보를 추가하거나 수정해야 합니다. 이것은 "추가" 또는 "편집" 버튼을 클릭하여 수행할 수 있습니다.
제품 페이지에 추천 이미지 추가
그런 다음 제품에 이미지 갤러리와 추천 이미지가 모두 있는지 확인해야 합니다. 이를 위해 Elementor와 함께 제공 되는 전자상거래용 올인원 플러그인에 포함된 다양한 이미지 위젯 중 하나를 사용할 수 있습니다.
이 데모를 위해 이름에서 알 수 있듯이 확대/축소 기능이 있는 ShopReady Thumbnail with Zoom 위젯을 사용할 것입니다. 이 위젯을 사용하면 고객이 제품 이미지 위로 마우스를 이동할 때마다 제품 이미지의 WooCommerce 제품 호버 줌 버전을 표시할 수 있습니다.
이전과 같은 방법으로 데모 제품 옵션의 콘텐츠 탭을 클릭하여 적절한 제품 이미지를 선택할 수 있습니다.
가격 위젯에 대한 블록 추가
제품 가격 블록은 전자 상거래 제품 페이지에 있어야 하는 또 다른 필수 구성 요소입니다. 이를 수행하려면 적절한 조정으로 WooCommerce 제품 속성을 변경하고 제품 제목 아래에 배치해야 하는 ShopReady Price 위젯을 사용해야 합니다.
올바른 가격이 표시되도록 하려면 콘텐츠 탭의 데모 제품 옵션에 있는 드롭다운 메뉴에서 제품 제목을 선택하십시오.
제품 설명 추가
이 WooCommerce 제품 추가 기능 제품 설명 위젯을 사용하면 제품 설명을 추가할 수 있을 뿐만 아니라 설명을 고도로 사용자 정의할 수 있는 기능도 있습니다. 스타일 탭을 사용하여 일반 대중에게 제품 설명이 표시되는 방식을 변경할 수 있습니다.
장바구니에 추가 기능 추가
고객이 체크아웃 페이지로 이동하기 전에 장바구니에 추가 항목을 추가할 수 있는 기능은 매우 중요한 또 다른 기능인 "장바구니에 추가" 옵션을 통해 촉진됩니다.
ShopReady 장바구니에 추가 위젯을 사용하면 전자 상거래 상점 페이지에 장바구니에 추가 기능 의 강력한 버전을 장착할 수 있습니다. 이 위젯을 사용하면 장바구니에 추가 블록에서 직접 장바구니에 있는 제품의 양을 조정할 수 있는 기능을 고객에게 제공할 수 있습니다.
WooCommerce 제품 스타일링 Elementor Style 탭을 통해 Elementor 장바구니에 추가 버튼의 모양을 수정할 수도 있습니다. 여기에서 글꼴, 색상, 배경, 여백, 패딩 및 기타 속성을 변경할 수 있습니다.
제품 페이지에 메타데이터 추가
제품을 추가하는 동안 WooCommerce에 추가한 메타데이터 및 제품 속성을 사용하는 WooCommerce 제품 필터 를 구현하는 것은 소비자에게 보다 만족스러운 쇼핑 경험을 제공하려는 경우 수행해야 하는 작업입니다.
ShopReady 메타 위젯을 찾아 제품 전용 페이지의 "장바구니에 추가" 버튼 바로 아래에 배치합니다. 이렇게 하면 해당 정보를 표시할 수 있습니다.
콘텐츠 탭의 데모 제품 옵션에 있는 드롭다운 메뉴에서 적절한 제품 제목을 선택하면 제품 태그와 메타데이터가 정확하게 표시되어야 합니다.
제품 페이지에 소셜 미디어 공유 버튼 추가하기
간단한 소셜 미디어 공유 버튼 블록을 활용하면 소비자가 구매한 항목에 대한 WooCommerce 제품 페이지에서 직접 소셜 미디어에 제품 게시물을 공유할 수 있습니다. Elementor Social Share 위젯이 제공하는 끌어서 놓기 기능만 활용하여 제작할 수 있습니다.
콘텐츠 탭에서 직접 사용자가 선택한 소셜 미디어 아이콘, 텍스트 및 공유 가능한 링크로 블록을 개인화할 수 있습니다. 또한 Elementor 스타일 탭을 사용하면 원하는 경우 소셜 공유 블록의 시각적 표현을 변경할 수 있습니다.
이것으로 WooCommerce 제품 페이지를 사용자 정의하는 기본 사항을 마쳤습니다.
4단계: WooCommerce 관련 제품 추가
WooCommerce 제품 애드온에 포함된 관련 제품 위젯을 활용하면 관련 제품을 제품 페이지에 표시할 수 있어 온라인 판매를 늘리는 데 탁월한 전략입니다. ShopReady 관련 제품 위젯을 사용하면 섹션으로 분할된 멋진 제품 슬라이더 블록을 쉽게 구성할 수 있습니다.
위젯을 사용하려면 단일 제품 블록 아래에 드래그 앤 드롭한 다음 콘텐츠 탭 에서 단일 제품 페이지에 표시하려는 특정 제품을 선택하기만 하면 됩니다.
5단계: WooCommerce 사용자 정의 체크아웃 필드 추가
앞서 언급했듯이 이것은 작동하는 전자 상거래 플랫폼의 중요한 측면입니다. ShopReady와 같은 WooCommerce 샵 빌더를 사용하면 WooCommerce 장바구니 단축 코드를 쉽게 활용하고 그런 식으로 기능적인 전자 상거래 장바구니를 구현하거나 ShopReady 위젯을 사용하여 이 기능을 적용할 수 있습니다.
장바구니가 작동하도록 하려면 먼저 제품 페이지에 "장바구니에 추가" 위젯을 추가해야 합니다. 우리가 이미 한 것입니다. 이제 돌아가서 장바구니 페이지 자체를 만들어 보겠습니다. 장바구니에 추가되면 모든 제품이 표시됩니다.
ShopReady – WooCommerce Shop Builder를 사용하면 ShopReady 대시보드 에서 사용할 수 있는 두 가지 장바구니 템플릿 중에서 선택할 수 있습니다 . ShopReady 대시보드에서 템플릿 메뉴를 클릭하면 ShopReady에서 제공하는 WooCommerce 사전 설정 장바구니 템플릿을 활성화하고 편집할 수 있습니다.
새로운 WooCommerce 장바구니 템플릿을 만들거나 기존 템플릿을 편집하면 Elementor Editor 화면으로 리디렉션됩니다.
여기에서 ShopReady 장바구니 위젯을 추가하기만 하면 장바구니 페이지가 자동으로 구성되며 플러그인 없이 WordPress 장바구니를 만드는 것은 ShopReady를 사용하는 프로세스만큼 간단합니다. 추가 플러그인이나 도구가 필요하지 않습니다.
장바구니에 이미 추가된 제품이 있는 경우 다음과 같이 표시됩니다.
기능적인 장바구니 버튼이 있는 기능적인 WooCommerce 장바구니 페이지가 있습니다. Elementor를 사용하여 장바구니 페이지를 추가로 사용자 지정할 수도 있습니다. Elementor를 사용하면 배경색에서 Elementor 타이포그래피 설정에 이르기까지 장바구니 페이지의 모든 측면을 자유롭게 변경할 수 있습니다.
WooCommerce 장바구니 단축 코드를 사용할 수도 있습니다. 이 경우 Elementor ShortCode 위젯을 사용해야 합니다.
상점 페이지 사용자 정의가 완료되면 게시/업데이트 를 눌러 방문자와 고객에게 변경 사항을 적용해야 합니다.
결론
WooCommerce 사용자 정의 장바구니에 추가 버튼을 만드는 전체 프로세스는 어려운 작업처럼 보일 수 있지만 이 가이드를 진행하면서 올바른 도구 세트를 사용하면 이 기술 기능을 만드는 프로세스가 전혀 어렵지 않다는 것을 알게 될 것입니다. ShopReady WooCommerce Shop Builder는 처음부터 강력한 전자 상거래 플랫폼을 만드는 데 필요한 모든 도구를 제공하는 완전한 패키지입니다.
ShopReady 또는 장바구니 생성 프로세스에 문제가 발생하면 언제든지 WooCommerce 장바구니 설명서 를 찾아볼 수 있습니다 .
WooCommerce 장바구니에 대해 자주 묻는 질문
WordPress에 장바구니가 있습니까?
WordPress CMS는 베어본 웹사이트 호스팅 플랫폼입니다. 장바구니 또는 전자 상거래 관련 기능은 포함되지 않습니다. 그러나 오픈 소스 플랫폼이기 때문에 커뮤니티에서 만든 전자 상거래 도구, 플러그인 또는 모듈을 자유롭게 활용하여 WordPress 웹 사이트에 장바구니를 추가할 수 있습니다.
WooCommerce에 장바구니가 있습니까?
예, WooCommerce 기본 플러그인에는 기능적인 장바구니 버튼과 장바구니 페이지가 함께 제공됩니다. 그러나 그것은 본질적으로 매우 미니멀합니다. 장바구니 페이지를 멋지게 꾸미기 위해 WooCommerce 확장 을 원하는 만큼 사용할 수 있습니다. 또는 전자 상거래 장바구니 페이지에 대한 Elementor 및 ShopReady WooCommerce 페이지 빌더 사용자 정의 옵션을 최대한 활용할 수 있습니다. WooCommerce 장바구니 아이콘에서 심층 페이지 레이아웃에 이르기까지 ShopReady로 모든 것을 사용자 정의할 수 있습니다.
WooCommerce에서 사용자 정의 결제 페이지를 어떻게 만듭니 까?
ShopReady – WooCommerce Shop Builder를 다운로드하여 설치합니다. 이제 ShopReady 대시보드에서 새로운 WooCommerce 체크아웃 페이지 템플릿을 생성합니다. Elementor Editor로 리디렉션됩니다. 여기에서 ShopReady Checkout 위젯을 활용하여 WooCommerce에서 기능적인 사용자 정의 체크아웃 페이지를 만들 수 있습니다.