Elementor와 WooCommerce로 전자상거래 웹사이트를 디자인하는 방법
게시 됨: 2021-12-23자신의 온라인 상점을 운영하고 온라인 비즈니스와 함께 기업가 경력을 시작할 계획이라면 잘 찾아오셨습니다.
이 기사에서는 Elementor와 WooCommerce를 사용하여 전자 상거래 웹 사이트를 디자인하는 방법을 보여줍니다. 비즈니스에 가장 적합한 플랫폼을 선택하는 것부터 전자상거래 웹사이트를 시작하는 것까지 모든 것을 다뤘습니다.
왜 전자 상거래를 선택합니까?
그러나 실제 매장을 시작하고 운영하는 것은 어려운 일이며 막대한 자본 투자가 필요합니다. 그러나 전자 상거래 웹 사이트를 구축 및 시작하고 온라인으로 제품을 판매하는 것은 매우 쉽습니다.
현대 사회에서 온라인 쇼핑은 더 이상 사치가 아니라 일상 생활에서 필수가 되었습니다. 현재 전 세계 인구의 25%가 PC나 모바일에서 쇼핑을 하고 있으며 그 수치는 빠르게 증가하고 있습니다.
온라인 비즈니스를 시작하려면 다양한 고객에게 제품을 홍보하는 데 도움이 되는 잘 설계된 완벽한 기능의 전자상거래 웹사이트만 있으면 됩니다.
제한된 물리적 상점을 통해 제품을 판매하는 경우 제한된 수의 사람들에게만 도달할 수 있으며 이는 사용 가능한 재고 및 영업 시간에 따라 다릅니다. 반면에 전자 상거래 웹 사이트를 통해 전 세계에 제품을 판매할 수 있습니다.
시작하겠습니다!
Elementor와 WooCommerce로 전자상거래 웹사이트를 디자인하는 방법
전자 상거래는 웹에서 수행되는 판매 및 거래를 포함하는 비즈니스 모델을 말합니다. 모든 온라인 쇼핑 웹사이트는 이 구조를 따릅니다. 전자상거래 웹사이트는 인터넷을 통해 판매할 품목을 선택하고 얻을 수 있는 모든 사이트를 말합니다.
WordPress, Elementor 및 WooCommrece를 사용하면 코딩이 필요 없는 완벽하게 기능하고 비용 효율적인 전자상거래 웹사이트를 디자인할 수 있습니다. Elementor의 기능, 템플릿 및 끌어서 놓기 편집기를 사용하면 자신의 전자상거래 웹사이트를 사용자 지정할 수 있습니다.
전자 상거래 상점을 디자인하기 전에 필요한 모든 요소를 설정해야 합니다. 이를 위해서는 전자 상거래 상점의 기본 설정 및 사용자 정의가 필요합니다.
온라인 상점을 만들려면 다음 전제 조건이 필요합니다.
- 워드프레스 사이트
- 우커머스
- 엘리멘터
- 요소 팩 프로
이제 일반적으로 'WordPress 온라인 상점에 WooCommerce와 Elementor를 사용하는 이유는 무엇입니까?'라는 질문이 머릿속에 떠오릅니다. 정답은 아래와 같습니다-
우커머스
WooCommerce는 눈 깜짝할 사이에 WordPress 사이트를 코딩이나 HTML 없이 전자상거래 비즈니스 플랫폼으로 바꾸는 데 도움이 됩니다. 몇 번의 클릭만으로 할 수 있습니다. 더 놀라운 점은 이 플러그인에는 온라인 상점의 모든 기본 기능이 무료로 제공된다는 것입니다. 이 플러그인의 여러 옵션을 사용하여 상점의 기능을 확장할 수 있습니다.
모든 유연성과 다양하고 흥미로운 기능(예: 재고, 보안 지불, 세금 관리 및 배송 통합)을 제공합니다. 이를 위해 전체 온라인 상점의 28% 이상을 운영합니다.
엘리멘터
이제 Elementor에 주목합시다. 이 드래그 앤 드롭 페이지 빌더를 사용하여 ABC와 같은 웹사이트를 쉽게 디자인할 수 있습니다. 몇 번의 클릭만으로 사이트를 활성화할 수 있습니다. 멋진 사이트를 구축하기 위해 전문가의 도움이 필요하지 않습니다. 5백만 명이 넘는 사람들이 WordPress 사이트에서 적극적으로 사용하는 이유.
WooCommerce와 Elementor의 조합은 무엇을 얼마만큼 판매하든 상관없이 전자 상거래 상점에서 판매할 수 있는 무한한 가능성을 만듭니다.
'Elementor와 WooCommerce를 사용하여 전자 상거래 웹 사이트를 디자인하는 방법은 무엇입니까?' 단계별로 답변드리겠습니다. 조금 기다려야 합니다.
전자상거래 웹사이트의 핵심 요소와 역할
사이트를 만들기 위한 가이드를 시작하기 전에 쉽게 액세스할 수 있는 모든 전자상거래 웹사이트에 필요한 페이지와 요소를 알아야 합니다.
- 홈페이지: 비즈니스의 성공으로 이어지는 방문자의 관심을 끄는 것은 비즈니스의 첫 화면입니다. 영웅 이미지는 매력적인 메시지와 명확하게 표시되는 검색 표시줄과 함께 상점 이름과 최신, 신제품 및 인기 제품을 묘사합니다.
- 카테고리 페이지: 이 페이지는 상점의 특정 카테고리에 대한 제품 목록 보기입니다. 여기에서 제품을 분류할 수 있습니다. 이는 업계 규범, 검색량 및 시장 조사에 따라 결정될 수 있습니다. 각 카테고리에는 사용 가능한 제품을 설명하는 자체 로비 페이지, 제품 사진 및 가격 정보가 포함된 잘 설계된 그리드가 필요합니다. 고객이 찾고 있는 정확한 제품을 탐색하고 검색하여 얻을 수 있는지 확인하십시오.
- 카테고리 개요: 하위 카테고리 및 기타 카테고리를 포함하여 상점의 모든 카테고리를 표시할 수 있습니다. 따라서 방문자는 판매하는 제품을 쉽게 이해하고 필요한 제품을 즉시 확인할 수 있습니다. 상점에 제품 카테고리가 하나만 있는 경우 이 단계를 건너뛸 수 있습니다.
- 제품 페이지: 이 페이지에는 제품 설명, 가격, 제품 사진, '장바구니에 추가' CTA, 배송 및 배송 세부정보와 같은 특정 제품의 세부정보와 크기, 무게, 제품 등급, 사용후기, 재고와 같은 관련 정보가 표시됩니다. 추가 제품을 상향 판매하려면 관련 관련 제품과 함께 '사람들도 구매하는 제품' 캐러셀을 포함해야 합니다.
- 검색 및 검색 결과: 온라인 상점에서 필수 검색 옵션을 추가하여 원하는 페이지에 빠르게 액세스하려는 고객을 돕습니다.
- 실제 매장 위치: 실제 매장 도 있는 경우 주소와 연락처 세부 정보를 포함해야 합니다. 일부 사람들은 가장 가까운 매장 주소를 알기 위해 사이트를 확인하기 때문입니다.
- 장바구니: 디지털 쇼핑객은 상점에서 추가한 제품을 여기에서 볼 수 있습니다. 그들은 이 페이지에서 배송비를 포함한 총 가격을 볼 수 있고, 프로모션 코드를 삽입하고, 할인을 받을 수 있습니다. 장바구니 포기는 모든 전자 상거래 비즈니스에서 큰 문제라는 것을 항상 기억하십시오.
- 내 주문: 이 페이지에서 고객은 이전 쇼핑 항목을 확인하는 데 도움이 되는 주문 내역을 확인할 수 있습니다.
- 반품: 일부 조건에서 반품/교환 옵션은 방문자가 귀하의 사이트에서 쇼핑을 계속할 수 있다는 큰 확신을 줍니다.
- 체크아웃 퍼널: 체크아웃 퍼널은 매끄럽고 매끄럽고 완전히 최적화되어야 합니다. 깔때기에는 고객이 제품을 추가하는 장바구니, CTA를 통한 결제 및 확인이 포함됩니다.
- 게스트 체크아웃: 모든 방문자가 제품을 구매하기 위해 정보를 공유하는 것을 편안하게 느끼는 것은 아닙니다. 방문자가 사이트에 등록하지 않고 구매하도록 허용할 수 있습니다.
- 리뷰: 고객이 전자 상거래 사이트에서 자신의 견해, 요구 사항, 쿼리 및 쇼핑 경험을 공유할 수 있도록 하는 것은 매우 중요합니다. 긍정적인 피드백은 신규 고객에게 큰 영향을 미칩니다.
- 블로그: 마지막으로 전자 상거래 상점을 위한 블로그가 필요합니다. 웹사이트를 통해 방문자와 잠재 고객에게 제품의 이점에 대해 알려야 합니다. 고품질 블로그 게시물은 검색 엔진에서 웹사이트를 홍보하는 데 많은 도움이 되어 사이트 및 판매에 대한 트래픽을 증가시킵니다.
'Elementor와 WooCommerce를 사용하여 전자 상거래 웹 사이트를 디자인하는 방법'이라는 질문에 대한 답변을 간절히 기다리고 있습니다. 글쎄요, 우리는 그 지점으로 가고 있습니다. 기다려 주십시오.
웹사이트에 필요한 도메인과 호스팅 계획이 이미 있다고 가정해 보겠습니다. 이제 WordPress 사이트를 구성하고 WooCommerce, Elementor 및 Element Pack Pro를 포함하여 필요한 모든 플러그인을 설치합니다.
그런 다음 WooCommerce를 설치하여 WordPress 및 Elementor에서 전자 상거래 사이트를 쉽게 만들고 사용자 정의하거나 디자인할 수 있습니다.
'Elementor와 WooCommerce로 전자상거래 웹사이트를 디자인하는 방법'에 대한 답을 찾으십니까? 잠깐만!
이에 대한 단계별 가이드는 다음과 같습니다.
1단계: WooCommerce 플러그인을 설치하여 시작합니다.
WordPress 관리 대시보드>플러그인>새로 추가로 이동합니다.
그런 다음 '우커머스'를 검색하세요.
그런 다음 '지금 설치' 버튼을 클릭하여 플러그인을 설치합니다.
이제 연속 시도로 '활성화'를 클릭하십시오.
이제 설치 마법사가 나타납니다. 이 부분을 건너뛰는 것보다 프로세스를 진행하고 그에 따라 모든 기본 사용자 정의를 수행하는 것이 좋습니다. 여기에서 '계속'을 선택하여 설정 마법사를 시작합니다.
가. 기본정보를 단계별로 제공
먼저 매장 위치, 제품 유형, 사용 통화 및 판매하려는 상품 유형(예: 실제, 디지털, 둘 다, 대면 및 기타)을 포함한 상점의 초기 데이터를 요청합니다.
또한 WooCommerce가 상점 개선을 위해 사용량을 추적하도록 허용할지 여부를 결정할 수 있습니다. 양식을 적절하게 채우고 하단의 '계속' 버튼을 클릭하고 다음 설정으로 바로 이동합니다.
B. WooCommerce 결제 게이트웨이 설정
여기에서 온라인 상점에 대한 지불 옵션을 구성할 수 있습니다. 이 단계의 옵션은 매장 위치와 판매하려는 제품 유형에 따라 다릅니다.
'직접 제품 판매' 옵션을 표시하지 않은 경우에만 Stripe 및 Paypal을 받을 수 있습니다. '직접 판매' 옵션을 표시하고 캐나다, 호주, 미국, 일본 및 영국에 거주하는 경우 Square, Paypal 및 Stripe가 표시됩니다. 이러한 지불 게이트웨이는 이러한 국가에서 사용할 수 있기 때문입니다.
'오프라인 결제' 옵션을 선택하여 드롭다운 메뉴에서 수표, 은행 송금 또는 현금과 같은 결제 옵션을 선택할 수 있습니다.
모든 설정이 끝나면 '계속' 버튼을 클릭하고 다음 단계로 진행합니다.
C. WooCommerce 배송 설정
이 단계에서는 제품 세부 정보를 배송하는 것이 전부입니다. WooCommerce는 2개의 배송 지역을 지원합니다.
- 영역 1 - 미국 및 캐나다
- 영역 2 - 나머지 국가
상점이 영역 1에 있는 경우 실시간 배송료 옵션이 표시됩니다. 그러나 유연하게 고정 배송료 또는 무료 배송을 설정할 수 있습니다. 실제 배송료를 기준으로 정확한 무게와 치수를 설정해야 합니다.
'계속' 버튼을 클릭하되 먼저 '집에서 배송 라벨 인쇄'를 선택하여 자격 증명을 인쇄하십시오.
D. 몇 가지 추가 옵션 구성
이 시점에서 WooCommerce는 몇 가지 필수 플러그인(예: Jetpack을 사용한 자동 세금, 이메일 마케팅용 MailChimp, WooCommerce 플러그인용 Facebook)을 설치하도록 요청합니다. 전자 상거래 웹 사이트에 필수적인 것을 선택할 수 있습니다. 이렇게 하려면 확인란을 선택하여 사이트에 자동으로 모두 가져오거나 나중에 수동으로 설치할 수도 있습니다.
E. WooCommerce를 Jetpack과 연결하고 설정을 완료합니다.
여기에서 설정 마법사는 앞에서 언급한 Jetpack과 사이트를 연결하도록 요청합니다. 이 플러그인은 최고의 보안을 보장하는 자동 세금의 모든 기능과 함께 놀랍게 작동합니다.
'계속 Jetpack'을 클릭하면 마법사의 마지막 페이지가 나타납니다. 이 페이지에서 제품을 생성하거나 가져오거나 대시보드를 방문하거나 전체 설정을 검토할 수 있습니다. 확인하고 진행하면 됩니다.
모두 완료되었습니다! 이제 상점에 제품을 추가할 수 있습니다.
'Elementor와 WooCommerce를 사용하여 전자상거래 웹사이트를 디자인하는 방법은 무엇입니까?'라는 질문에 대한 답변을 기다리고 있습니다. 우리는 그 지점으로 이동하고 있습니다.
2단계: WooCommerce 스토어에 제품을 추가합니다.
고객이 구매할 수 있는 필수 제품으로 온라인 전자 상거래 상점을 채울 때입니다. 어떻게 할 수 있는지 봅시다.
A. 제품 추가
WordPress 대시보드에서 제품>새 항목 추가로 이동합니다. 여기에서 제품에 대한 정보를 삽입할 수 있습니다.
상품명, 카테고리, 이미지, 태그, 갤러리, 설명 등의 상품정보를 추가할 수 있습니다. 모든 필수 정보와 함께 모든 제품을 상점에 하나씩 포함하십시오.
B. 제품 데이터 구성
기본 편집기 창 아래의 패널에서 제품 데이터를 설정합니다. 상점이 원활하게 작동하는 데 필요한 데이터를 신중하게 사용자 정의하십시오.
먼저 드롭다운 메뉴에서 판매 중인 제품의 데이터 유형을 다음과 같이 선택합니다.
- 심플한 상품
- 그룹화된 제품
- 외부/제휴 제품
- 가변 제품
선택하면 다른 구성 옵션이 나타납니다. 그래서 업종별, 업종별, 카테고리별, 업종별로 모든 데이터를 설정해야 합니다. 완료 및 저장이 완료되면 '전체 제품'에서 제품을 확인할 수 있습니다.
C. 제품의 Frontend View 확인
엄청난! 필요한 모든 작업을 완료했습니다. 이제 온라인 상점의 프론트엔드 보기와 제품 모양을 볼 차례입니다. 주로 사용한 테마에 따라 다릅니다. <테마 선택>
드디어 '엘리멘터와 우커머스로 전자상거래 웹사이트를 디자인하는 방법'이라는 질문에 도달했습니다! 진행합시다.
3단계: Elementor로 전자상거래 웹사이트 디자인하기
이 단계에서는 Elementor로 온라인 상점을 디자인할 수 있습니다. 그렇게 하려면-
- WordPress 관리 대시보드> 플러그인> 새로 추가로 이동합니다.
- '엘리멘터'를 검색하세요.
- 그런 다음 플러그인을 설치하고 활성화하십시오.
- 그런 다음 WooCommerce에서 했던 것과 유사하게 플러그인을 활성화합니다.
또는 Elementor를 다운로드하고 '플러그인 업로드' 옵션을 사용하여 파일을 업로드하여 수동으로 이 작업을 수행할 수 있습니다.
이제 다음 단계에서 Elementor로 상점 페이지 디자인을 시작하십시오.
A. Elementor를 통해 제품 페이지 구축
Elementor의 동적 기능과 위젯으로 온라인 상점의 모든 부분을 사용자 정의하십시오. Elementor를 처음 사용하는 경우 이 단계별 지침을 따를 수 있습니다.
특정 제품의 세부 정보를 표시하는 제품 페이지를 디자인하려면 다음 단계를 따르세요.
- WordPress 대시보드>페이지>새 항목 추가로 이동합니다.
- 페이지 제목을 입력하고 오른쪽 템플릿 드롭다운에서 'Elementor Canvas' 옵션을 선택합니다.
- 마지막으로 'Edit with Elementor' 버튼을 클릭하고 이 WordPress 빌더로 작업을 시작하세요.
또는 원하는 경우 미리 작성된 템플릿이나 블록을 사용하여 페이지를 디자인할 수 있습니다. 또한 타사 애드온을 설치하여 보다 독점적인 기능으로 템플릿 라이브러리를 확장할 수 있습니다.
여러 유형의 유용한 위젯을 삽입하여 개별 섹션을 디자인할 수 있습니다. 여기에서는 무료 코어 Elementor 및 Element Pack Pro의 위젯을 사용하여 제품 페이지를 멋지게 만들었습니다.
B. 디자인 마무리
모든 사용자 정의 프로세스를 성공적으로 완료했습니다. 이제 페이지를 게시할 차례입니다. 그 전에 특정 카테고리에 페이지가 표시되도록 조건을 설정해야 합니다.
이 방법으로 다른 페이지를 디자인할 수도 있으며 바인딩이 없습니다. 당신이 해야 할 일은 디자인을 생각하고 다른 위젯을 사용하여 실생활에서 초상화를 그리는 것입니다. Element Pack Pro를 사용하면 애니메이션을 사용하고 개체를 원하는 방향으로 이동할 수도 있습니다.
결론
이 기사에서는 Elementor와 WooCommerce를 사용하여 전자상거래 웹사이트를 디자인하는 쉬운 방법을 보여주었습니다. 많은 도움이 되셨길 바라며, 자신만의 온라인 쇼핑몰을 만들어 운영해 보시기 바랍니다.
추가 도움이 필요하면 아래 댓글 섹션에 댓글을 남겨주세요.
읽어 주셔서 감사합니다. 좋은 하루 되세요!