Elementor 기반 WooCommerce 사이트를 만드는 방법

WordPress 플랫폼 자체가 세계에서 가장 인기 있는 콘텐츠 관리 시스템(CMS)이라는 것만으로는 충분하지 않습니다. 또한 Elementor 및 WooCommerce에서 가장 인기 있는 페이지 빌더 및 전자 상거래 플랫폼도 보유하고 있습니다. 따라서 이 세 가지를 모두 사용하여 훌륭하고 성능이 뛰어난 온라인 상점을 만드는 것이 좋습니다.

세분화하면 WordPress는 게시물, 페이지 및 제품을 구성하는 데 이상적입니다. WooCommerce는 개발자(Automattic) 덕분에 플랫폼과의 긴밀한 통합을 제공합니다. 또한 Elementor는 강력하고 직관적인 끌어서 놓기 페이지 작성 기능을 제공합니다. 매장 구축을 위한 완벽한 코드 없는 솔루션입니다.

이 글에서는 Elementor와 WooCommerce를 사용하여 상점을 구축하는 방법을 살펴보겠습니다. 전체에 걸쳐, 우리는 두 가지 모두가 어떻게 귀하의 사이트에 가장 큰 유연성을 제공하는지 살펴볼 것입니다.

WordPress, Elementor 및 WooCommerce가 함께 잘 작동하는 이유

WordPress, Elementor 및 WooCommerce를 결합하여 최고의 온라인 상점을 만드는 데 도움이 되는 방법을 자세히 살펴보는 것이 좋습니다.

우선 WordPress는 시장에서 가장 많이 사용되는 CMS입니다. 물론 이것은 사용자들 사이에서 그러한 지배적인 위치를 보증하기에 충분하지 않습니다. 사실, 우리는 이전 포스트에서 이것을 살펴보았으므로, 우리는 당신이 그 포스트를 더 읽어보기를 권장합니다. 요컨대, 이 플랫폼은 기반으로 구축할 수 있는 안전하고 안정적이며 확장 가능한 플랫폼입니다.

말하자면 WooCommerce도 있습니다. Automattic은 플러그인을 개발하기 때문에 핵심 WordPress와 완벽하게 통합되지만 그게 다가 아닙니다.

또한 가장 인기 있는 전자 상거래 플랫폼이기도 합니다. WordPress 생태계 내에서 약 20%의 점유율을 가지며 이는 전체 웹사이트의 약 8%에 해당합니다. 이에 비해 Shopify는 약 5~6%의 시장 점유율을 가지고 있습니다. 다시 말하지만, 사용량 수치가 전부는 아닙니다.

WooCommerce는 온라인 상점을 만들고 프로세스를 간소화합니다. 몇 분 안에 가동할 수 있으며 강력하고 강력하며 확장 가능한 전자 상거래 플랫폼을 구축할 수 있습니다.

이것들을 함께 짜기 위해 Elementor가 있습니다. 또한 해당 분야 내에서 큰 시장 점유율과 방대한 사용자 기반을 보유하고 있습니다.

전체 웹 사이트를 처음부터 구축하는 데 도움이 되는 고유한 접근 방식을 사용하는 드래그 앤 드롭 페이지 빌더입니다. 이것은 다른 도구에는 없는 강력한 기능과 기능이 많기 때문에 사용하기 좋은 솔루션입니다. 여기에서 가장 관련성이 높은 것은 전용 WooCommerce Builder입니다.

요컨대, Elementor는 WPKube 블로그에 열 인치가 많은 플러그인이며, 우리 아카이브를 살펴보고 그것이 무엇을 할 수 있는지 확인해야 합니다.

WooCommerce 사이트가 페이지 빌더에서 필요로 하는 것

마지막 섹션의 암시적 테이크아웃은 Elementor가 WooCommerce가 귀하의 사이트를 다음 단계로 끌어올리는 데 필요한 기능과 기능의 올바른 조합을 제공할 수 있다는 것입니다. 그러나 이것이 왜 그리고 무엇을 제공하는지에 대해 연마하는 것이 중요합니다.

일반적으로 WooCommerce 사이트는 페이지 빌더에서 다음이 필요합니다.

• 긴밀한 통합으로 페이지 빌더와 WooCommerce 간에 충돌이 없습니다.
• 제품과 쇼핑 페이지를 눈에 띄게 만드는 데 도움이 되는 다양한 사용자 정의 옵션.
• 일반적인 제품 페이지를 구성하는 개별 요소를 편집하는 방법입니다.
• 상점을 '레벨 업'하는 데 도움이 되는 추가 기능.

당신은 (물론) 당신의 개인적인 필요도 기록해야 합니다. 예를 들어, 양식과 팝업이 상점 및 판매 전략에 중요하다는 것을 알 수 있습니다. 좋은 소식은 Elementor가 귀하의 요구 사항을 충족할 수 있다는 것입니다.

예를 들어 판매, 시간 제한 제안, 쿠폰 등을 처리하는 훌륭한 팝업 빌더가 있습니다.

다른 페이지 템플릿과 마찬가지로 만들 수 있으며 순식간에 적용할 수 있습니다. 또한 거의 모든 방식으로 사용자화할 수 있습니다. 사이트에서 홍보할 특정 캠페인이 있는 경우에 적합합니다.

적합한 WooCommerce 테마를 선택하는 방법

튜토리얼에서 이를 다루고 전용 기사에서 몇 가지 주제를 정리하기 때문에 여기에서 자세히 다루지 않을 것입니다.

이 경우에 필요한 주요 고려 사항은 Elementor와 WooCommerce가 호환되는 테마입니다. 프리미엄 마켓플레이스 사이트를 조금만 살펴봐도 많은 테마에서 이를 광고하고 있으므로 선택의 폭이 넓다는 것을 알 수 있습니다.

그럼에도 불구하고 언급할 수 있는 몇 가지 두드러진 주제가 있습니다.

• 매장 앞. Block Editor는 기본 기술이기 때문에 앞으로 Elementor와의 호환성이 가장 낮을 것입니다. 아직,
• 안녕하세요. 이것은 Elementor 공백 시작 테마이며 WooCommerce 사이트를 처음부터 개발하는 데 이상적입니다. 물론 사용 가능한 시간이 적다면 더 완전한 기능을 갖춘 다른 테마를 선택하는 것이 현명할 수 있습니다.
• 생성프레스. 유연한 인프라를 갖춘 최고의 테마입니다. 즉, 블록 편집기, Elementor 또는 다른 것을 사용하는지 여부에 관계없이 상점이 멋지게 보일 것입니다.

사이트를 만들기 전에 올바른 테마를 찾는 것이 좋습니다. 최고의 결과는 Elementor 및 WooCommerce와 호환되는 것입니다.

3단계로 Elementor 기반 WooCommerce 사이트를 만드는 방법

이 기사의 나머지 부분에서는 Elementor와 WooCommerce를 함께 사용하여 전자 상거래 사이트를 만드는 방법을 보여 드리겠습니다. 주의해야 할 세 단계가 있습니다.

• WooCommerce를 설치하고 설정합니다.
• WooCommerce 제품 라인을 만들고 Elementor를 사용하여 제품 페이지를 구축하십시오.
• 다시 Elementor를 사용하여 전용 Shop 페이지를 디자인합니다.

하지만 이 튜토리얼에서는 이미 Elementor Pro를 설치하고 활성화했다고 가정합니다. WordPress 깔때기 생성에 대한 기사에서 설명합니다. 그 게시물은 당신이 문제를 겪을 때 도움이 될 것입니다.

1. WooCommerce 설치 및 설정

WooCommerce 설치를 설정할 때 고려해야 할 두 가지 측면이 있습니다. 플러그인 자체와 스토어 설정입니다. 사실 플러그인 설치는 다른 워드프레스 플러그인과 동일한 과정을 거칩니다.

WooCommerce 자체를 설정하는 경우 몇 분 안에 준비할 수 있지만 설정 마법사를 진행하는 데 시간이 더 걸립니다.

설정의 이 지점에 관해서는 우리가 다뤘습니다. 실제로 WooCommerce를 시작하고 첫 번째 제품을 만드는 방법에 대한 단계별 세부 정보를 제공하는 전체 WooCommerce 튜토리얼 게시물이 있습니다. 이 게시물을 실행하는 동안 예비 탭에서 열어두면 좋은 게시물입니다. 그 안에 있는 정보는 다음 단계에 유용할 것입니다.

2. WooCommerce 제품 만들기

WooCommerce 설치가 완료되면 백엔드에서 제품을 만드는 방법을 살펴봐야 합니다. 다시 한 번, WooCommerce 자습서에서는 이를 수행하는 방법을 자세히 다루지만 다음은 Cliff's Notes입니다.

• 제품 > WordPress 내에서 새 탭 추가 로 이동합니다.
• 제품 이름과 간단한 설명을 입력합니다.
• WooCommerce 메타 상자를 사용하여 가격과 같은 제품 데이터를 채웁니다.
• 이미지를 추가합니다.
• 제품을 게시하십시오.

그러나 여기 Elementor가 WooCommerce Builder라는 첫 번째 힘을 보여주는 곳입니다. 이것은 페이지 빌더를 사용하여 제품 페이지의 디자인을 만드는 방법입니다.

시작하려면 WordPress 내에서 템플릿 > 새로 추가 를 클릭합니다.

여기에서 템플릿 유형 드롭다운에서 단일 제품 을 선택하고 선택적 이름을 입력합니다.

그러면 템플릿 라이브러리 가 열리며 다음 내의 모든 미리 빌드된 블록이 표시됩니다.

마음에 드는 디자인이 보이면 삽입 버튼을 클릭하면 Elementor가 블록을 가져옵니다.

이것은 전용 제품 페이지를 빠르게 만드는 방법입니다. 이 멋진 시작을 시작하고 더 추가할 수도 있습니다. Elementor에는 WooCommerce 전용 페이지를 구축하는 데 도움이 되는 여러 전용 위젯이 포함되어 있습니다.

원하는 페이지 레이아웃이 있으면 화면 하단에 있는 녹색 게시 버튼을 클릭합니다.

그러면 템플릿을 표시하기 위한 특정 조건을 설정하는 데 도움이 되는 팝업이 나타납니다.

준비가 되면 저장 후 닫기 를 클릭합니다. 여기에서 스토어에 더 많은 제품을 추가하거나 더 많은 템플릿을 작업하거나 전용 Shop 페이지에서 작업을 시작할 수 있습니다.

3. Elementor 및 WooCommerce를 사용하여 전용 상점 페이지 디자인

WooCommerce의 편리한 사용자 경험(UX) 중 하나는 상점에 필요한 대부분의 페이지를 생성하는 방법입니다. 최상위 Shop 페이지가 가장 중요합니다. 도어를 장식하는 프런트 어닝이기 때문입니다.

Storefront와 같은 WooCommerce 관련 테마와 함께 WordPress 및 WooCommerce를 사용하는 경우 Shop 페이지를 사용자 지정하기 위한 주요 호출 포트는 사용자 지정 프로그램을 통하는 것입니다. 하지만 우리의 초점은 Elementor입니다. 페이지 빌더로 이를 수행하는 방법은 제품 아카이브 페이지를 사용하는 것입니다.

이렇게 하면 사이트에 제품이 표시되는 방식을 사용자 지정할 수 있지만 페이지의 나머지 부분은 처리하지 않습니다. 어떤 경우에는 두 세트의 사용자 정의 및 설정을 관리하는 것이 어려울 수 있지만 경험상 지금까지는 문제가 되지 않았습니다.

개별 제품과 마찬가지로 템플릿 > WordPress 내에서 새로 추가 로 이동한 다음 드롭다운에서 제품 아카이브 를 선택해야 합니다.

다시 말하지만 차단을 선택하거나 페이지를 처음부터 편집하거나 두 가지를 결합하여 고유한 것을 만들 수 있습니다. 또한 이전과 마찬가지로 WooCommerce 전용 위젯을 사용하여 원하는 대로 페이지를 디자인할 수 있습니다.

게시 버튼을 다시 클릭하고 게시 설정 대화 상자로 이동하면 마법을 호출할 수 있습니다. 기본 양식에서 쇼핑 페이지 에 새 템플릿을 포함할 수 있습니다.

하지만 그게 다가 아닙니다. 사이트의 여러 위치에서 템플릿을 사용하기 위해 추가 포함 조건을 추가할 수 있습니다. 이것은 연속성을 위해 중대하고 방문자가 당신의 상점을 방문할 이유를 제공합니다.

WooCommerce의 기타 생성 페이지에 대한 간략한 참고 사항

마무리하기 전에 생성된 다른 WooCommerce 페이지에 대해 언급하고자 합니다. 나쁜 소식은 그들이 Elementor의 시선 아래 떨어지지 않는다는 것입니다. 즉, 추가 WooCommerce 확장이 없으면 Checkout 또는 Thank You 페이지와 같은 페이지를 편집할 수 없습니다.

이것은 실망스럽지만 이해할 수 있습니다. 그렇더라도 여전히 Elementor를 사용하여 주변 요소를 개발한 다음 단축 코드를 사용하여 특정 페이지 기능을 삭제할 수 있습니다. 하지만 이상적이지는 않습니다.

이 페이지 전체를 편집하는 것이 중요하다면 Checkout Field Editor(연간 $49)와 맞춤형 감사 페이지 확장(연간 $49)을 살펴보고 싶을 것입니다.

결론적으로

전자 상거래 상점을 게시하기 위해 가장 인기 있는 세 가지 도구를 사용할 때 어떤 문제가 발생할 수 있습니까? 이 경우는 많지 않습니다. WordPress, Elementor 및 WooCommerce는 모두 뛰어난 경험을 제공합니다. 그것들을 결합하면 온라인 상점을 만들고 운영하는 데 궁극적인 효과를 얻을 수 있습니다.

이 게시물 전체에서 Elementor와 WooCommerce를 함께 사용하여 스토어를 구축하는 방법을 살펴보았습니다. 두 플러그인을 모두 설치하고 활성화했으면 첫 번째 작업은 관련 페이지와 함께 제품을 만드는 것입니다. 거기에서 Elementor가 처리할 수 있는 전용 Shop 페이지가 필요합니다. 또한 페이지 빌더 플러그인의 추가 기능(예: 팝업 빌더 등)은 상점을 성층권으로 끌어들이는 데 도움이 될 수 있습니다.

다음 상점을 위해 Elementor와 WooCommerce 조합을 만들고 싶습니까? 그렇다면 이 기사가 도움이 될까요? 아래 의견 섹션에서 알려주십시오!