Elementor용 WooCommerce 빌더로 스토어를 구축하는 방법

Elementor의 강력한 시각적 빌더를 사용하여 상점을 만들고 사용자 정의할 수 있도록 Elementor용 WooCommerce 빌더를 찾고 있습니다.

ShopReady를 사용하면 무료 버전의 Elementor를 사용하는 경우에도 Elementor로 전체 WooCommerce 상점을 만들고 사용자 지정할 수 있습니다!

ShopReady에 대해 자세히 알아보려면 전체 ShopReady 리뷰를 확인하십시오.

그러나이 기사에서는 ShopReady를 Elementor의 WooCommerce 빌더로 사용하는 방법에 더 중점을 둡니다.

아래에서 ShopReady를 사용하여 위시리스트, 제품 빠른 보기, 최적화된 체크아웃 등과 같은 고급 기능 추가를 포함하여 스토어를 구축하고 사용자 지정하는 방법을 단계별로 보여줍니다.

다음과 같은 상점을 만들 수 있습니다.

또한 Elementor를 사용하여 제품, 카트 및 체크아웃 페이지( 더 많은 것 )를 포함하여 모든 것을 사용자 정의할 수 있습니다.

ShopReady를 Elementor용 WooCommerce 빌더로 사용하는 방법

더 이상 고민하지 않고 바로 단계별 자습서로 들어가겠습니다.

튜토리얼을 시작하기 전에 ShopReady의 많은 기능에 대해 자세히 알아보려면 전체 ShopReady 리뷰를 읽을 수 있습니다.

그리고 사용하려고 할 때마다 체크아웃 시 전용 쿠폰 코드 WPMayor30을 사용하여 30% 할인을 받을 수 있습니다.

1. 기본 WooCommerce 스토어 생성 및 Elementor 설치

아직 설정하지 않은 경우 첫 번째 단계는 기본 WooCommerce 스토어를 설정하는 것입니다.

고품질 WooCommerce 호스팅을 선택하고, WooCommerce를 설치하고, 설정 마법사를 진행하고, 일부 제품을 추가하는 등의 작업을 원할 것입니다.

여기에서 도움이 필요한 경우 WooCommerce 상점 설정에 대한 가이드를 확인할 수 있습니다.

아직 WooCommerce 테마를 선택하거나 디자인을 사용자 정의하는 것에 대해 걱정하지 마십시오. 그것이 바로 Elementor와 ShopReady의 목적이기 때문입니다. 백엔드에서 물건을 설정하는 데 집중하여 기본이지만 상점이 작동하도록 하십시오.

완료하면 Elementor 플러그인도 설치하고 싶을 것입니다.

ShopReady를 사용하면 무료 버전의 Elementor만 무료로 사용할 수 있습니다.

또는 이미 Elementor Pro가 있는 경우 이를 설치할 수도 있습니다. ShopReady는 두 버전 모두에서 잘 작동합니다.

2. ShopReady 설치 및 모든 기능 활성화

기본 WooCommerce 상점을 설정하고 Elementor를 설치하면 Elementor용 ShopReady WooCommerce 빌더를 설치할 준비가 된 것입니다.

WordPress.org에서 사용할 수 있는 무료 버전의 ShopReady와 더 많은 기능을 추가하는 프리미엄 버전이 $75부터 시작됩니다.

이 튜토리얼에서는 Pro 버전이 설치되어 있습니다. 그러나 동일한 기본 단계가 무료 버전에도 적용되므로 무료 버전을 사용하더라도 따라할 수 있습니다( 일부 고급 기능에 대한 액세스 권한이 없을 수 있으며 많은 템플릿을 사용자 지정할 수 있음 ).

플러그인을 활성화하면 WordPress 대시보드에 새로운 ShopReady 메뉴가 표시됩니다.

기본 ShopReady 메뉴로 이동하면 다양한 위젯, 모듈 및 템플릿을 활성화할 수 있는 다양한 영역의 인터페이스가 나타납니다.

지금은 스토어를 만드는 동안 모든 기능에 액세스할 수 있도록 모든 위젯과 모듈을 활성화하는 것이 좋습니다.

상점을 구축한 후에는 언제든지 돌아와서 사용하지 않는 요소를 비활성화하여 경량을 유지하고 상점 속도를 높일 수 있습니다.

Demo Importer 모듈을 활성화하는 것이 특히 중요합니다. 이렇게 하면 ShopReady의 미리 만들어진 상점 템플릿에 액세스할 수 있기 때문입니다( 언제든지 처음부터 모든 것을 사용자 정의할 수 있음 ).

Demo Importer 모듈을 활성화하면 함께 제공되는 Demo Importer 플러그인을 설치하라는 메시지가 표시됩니다.

그런 다음 WordPress 대시보드의 새로운 Unyson 영역으로 이동하고 ShopReady의 템플릿을 가져올 수 있도록 백업 및 데모 콘텐츠 확장을 활성화합니다.

참고 – Elementor를 사용하여 처음부터 템플릿을 디자인하려는 경우 이 프로세스를 건너뛸 수 있습니다.

3. 스토어의 기반 역할을 할 템플릿 가져오기

이제 도구 → 데모 콘텐츠 설치 로 이동하여 사전 제작된 ShopReady 데모 사이트 중 하나를 설치할 수 있습니다.

다시 말하지만, 이 단계를 건너뛰고 상점의 템플릿을 처음부터 디자인할 수도 있습니다. 이에 대해서는 다음 섹션에서 다룰 것입니다.

데모를 가져오면 Elementor를 사용하여 모든 것을 완전히 사용자 지정할 수 있습니다.

다양한 데모 옵션을 둘러본 다음 상점의 기반으로 사용하려는 데모의 설치 버튼을 클릭하십시오.

이 자습서에서는 Demo V1을 사용합니다.

마찬가지로 상점은 데모와 정확히 같아야 합니다.

4. Elementor를 사용하여 상점 템플릿 사용자 정의

이제 Elementor용 WooCommerce 빌더를 사용하여 스토어 콘텐츠를 사용자 정의할 준비가 되었습니다.

스토어의 다양한 템플릿에 모두 액세스하려면 WordPress 대시보드의 ShopReady 영역으로 이동한 다음 템플릿 탭을 선택합니다.

여기에서 상점과 관련된 모든 다양한 템플릿 목록을 볼 수 있습니다. 고려해야 할 가장 중요한 템플릿은 다음과 같습니다.

• 제품 – 단일 제품 페이지의 템플릿입니다.
• 쇼핑 - 기본 상점 페이지의 템플릿입니다.
• Shop Archive – 모든 제품을 나열하는 페이지의 템플릿입니다.
• 카트 / 빈 카트 – 장바구니의 다양한 단계에 대한 템플릿입니다.
• 체크아웃 – 체크아웃 페이지의 템플릿입니다.
• 내 계정 – 쇼핑객의 프런트엔드 계정 페이지 템플릿입니다.

그러나 ShopReady의 좋은 점은 제품 퀵뷰, 위시리스트 등과 같은 다른 많은 템플릿도 제어할 수 있다는 것입니다.

템플릿을 편집하고 Elementor를 시작하려면 관련 템플릿을 선택한 다음 연필 아이콘을 클릭하기만 하면 됩니다.

또한 새 템플릿을 만들고 스토어의 여러 부분에서 여러 템플릿을 사용할 수 있습니다.

ShopReady는 이제 Elementor 인터페이스를 시작합니다.

디자인을 제어하기 위해 일반 Elementor 인터페이스와 모든 디자인 옵션을 사용할 수 있습니다.

주요 차이점은 ShopReady는 디자인에 사용할 수 있는 수많은 일반 위젯과 전용 WooCommerce 위젯도 제공한다는 것입니다. Elementor 인터페이스의 다양한 Shop Ready 영역에서 다음을 찾을 수 있습니다.

각 위젯에는 고유한 설정도 있습니다.

예를 들어 확대/축소 축소판 위젯을 사용 하면 다양한 레이아웃과 설정으로 제품 이미지를 표시할 수 있습니다.

완료되면 변경 사항을 저장해야 합니다.

그런 다음 동일한 프로세스를 반복하여 스토어의 모든 템플릿을 편집할 수 있습니다. 페이지 오른쪽에 있는 파란색 대시보드 링크를 사용하면 ShopReady 템플릿 인터페이스로 쉽게 돌아갈 수 있습니다.

다른 템플릿에는 고유한 특수 위젯이 포함될 수 있습니다. 예를 들어 체크아웃 페이지 템플릿을 생성할 때 이를 수행하는 데 도움이 되는 특수 위젯이 제공됩니다.

5. 사이트 설정 사용자 지정

ShopReady는 Elementor로 개별 템플릿을 사용자 정의할 수 있는 것 외에도 Elementor 사이트 설정 메뉴에 몇 가지 옵션을 추가합니다. Elementor 인터페이스의 왼쪽 상단 모서리에 있는 햄버거 아이콘을 클릭하고 사이트 설정을 선택하여 Elementor 사이트 설정에 액세스할 수 있습니다 .

여기에서 스토어 동작에 대한 여러 중요한 설정에 액세스할 수 있습니다.

처음에는 설정이 ShopReady 와 ShopReady General & PopUp의 두 영역으로 나뉩니다.

해당 영역을 클릭하면 다양한 추가 옵션이 표시됩니다. 예를 들어 ShopReady로 추가할 수 있는 사이트 전체 미니 카트의 동작을 제어할 수 있습니다.

상점에 대한 수많은 멋진 기능을 찾을 수 있는 곳이므로 이러한 모든 옵션을 탐색하는 것이 좋습니다.

WordPress 대시보드에서 ShopReady → Header Footer 로 이동하여 머리글과 바닥글을 제어할 수도 있습니다.

지금 바로 Elementor용 WooCommerce 빌더를 사용해보세요.

사용자는 강력한 시각적 드래그 앤 드롭 빌더 인터페이스 때문에 Elementor를 좋아합니다.

ShopReady를 사용하면 해당 빌더의 기능을 활용하여 무료 버전의 Elementor만 사용하는 경우에도 WooCommerce 스토어를 완전히 디자인하고 사용자 지정할 수 있습니다.

시작할 준비가 되었으면 아래 버튼을 사용하여 ShopReady를 다운로드한 다음 이 튜토리얼을 따라 WooCommerce 스토어를 만드십시오.

보너스: 결제 시 독점 쿠폰 코드 WPMayor30을 사용하여 ShopReady에서 30% 할인을 받으세요!