Elementor와 WooCommerce는 WordPress에서 맞춤형 온라인 상점을 구축하기 위한 가장 유연한 조합 중 하나를 형성합니다. WooCommerce는 전자 상거래 기능(제품, 장바구니, 결제, 결제 처리)을 처리하고, Elementor는 이러한 상점 페이지의 모양과 기능에 대한 시각적 제어를 제공합니다. 이 가이드에서는 제품 페이지, 상점 아카이브 및 장바구니 경험을 포함하여 Elementor로 주요 WooCommerce 페이지를 구축하는 방법을 안내합니다.
이 튜토리얼은 WordPress, WooCommerce 및 Elementor Pro가 설치되어 있다고 가정합니다. WooCommerce 위젯을 사용하려면 Elementor Pro가 필요하며, 무료 버전의 Elementor는 이를 포함하지 않습니다.
시작하기 전에 필요한 것
| 요구 사항 | 필요한 이유 | 구매처 |
|---|---|---|
| WordPress 6.x+ | 핵심 CMS 플랫폼 | wordpress.org |
| WooCommerce (무료) | 전자 상거래 기능 | WordPress 플러그인 디렉토리 |
| Elementor Pro | WooCommerce 위젯 및 테마 빌더 | PluginTheme.net |
| 호환 가능한 테마 | 상점의 기초 | 테마 선택 가이드 |
| 샘플 제품 | 템플릿 디자인을 위한 콘텐츠 | WooCommerce → 도구 → 샘플 데이터 가져오기 |
Elementor의 WooCommerce 빌더 이해하기
Elementor Pro는 테마 빌더 시스템 내에 전용 WooCommerce 빌더를 포함하고 있습니다. 이를 통해 다음을 위한 맞춤형 템플릿을 만들 수 있습니다:
- 단일 제품 페이지: 개별 제품 페이지의 레이아웃 제어
- 제품 아카이브: 상점 페이지 및 카테고리 페이지 사용자 정의
- 장바구니 페이지: 맞춤형 장바구니 레이아웃 디자인
- 결제 페이지: 결제 양식 레이아웃 사용자 정의
- 내 계정 페이지: 고객 계정 대시보드 재설계
각 템플릿은 제품에서 동적 데이터를 가져오는 WooCommerce 전용 위젯을 사용합니다. 이는 레이아웃을 한 번 디자인하면 모든 제품(또는 특정 카테고리)에 자동으로 적용된다는 것을 의미합니다.
맞춤형 제품 페이지 만들기
1단계: 템플릿 생성
- WordPress 관리에서 템플릿 → 테마 빌더로 이동합니다.
- "새로 추가"를 클릭하고 템플릿 유형으로 "단일 제품"을 선택합니다.
- 미리 만들어진 제품 페이지 템플릿을 선택하거나 빈 캔버스에서 시작합니다.
- Elementor 편집기가 열리며 패널에서 WooCommerce 위젯을 사용할 수 있습니다.
2단계: WooCommerce 위젯 추가
제품 페이지에 필요한 주요 WooCommerce 위젯:
ducts| 위젯 | 표시 내용 | 사용자 정의 옵션 |
|---|---|---|
| 제품 이미지 | 썸네일 및 라이트박스가 있는 갤러리 | 갤러리 레이아웃, 썸네일 위치, 확대/축소 전환 |
| 제품 제목 | 제품 이름 (H1) | 타이포그래피, 색상, 정렬 |
| 제품 가격 | 정상 가격 및 세일 가격 | 타이포그래피, 세일 배지 색상, 레이아웃 |
| 제품 평점 | 리뷰에서의 별 평점 | 별 색상, 크기, 정렬 |
| 장바구니에 추가 | 수량 선택기 + 장바구니에 추가 버튼 | 버튼 스타일, 색상, 수량 레이아웃 |
| 제품 간략 설명 | 간단한 제품 요약 | 타이포그래피, 간격 |
| 제품 메타 | SKU, 카테고리, 태그 | 레이아웃, 타이포그래피, 구분선 |
| 제품 데이터 탭 | 설명, 리뷰, 추가 정보 탭 | 탭 스타일, 테두리, 간격 |
| 관련 제품 | 동일 카테고리의 제품 | 열, 개수, 순서 |
| 업셀 | 수동으로 연결된 업셀 프로 | |
| 열, 수, 레이아웃 |
3단계: 레이아웃 모범 사례
전환율이 높은 제품 페이지는 검증된 레이아웃 패턴을 따릅니다:
- 위쪽: 제품 이미지(왼쪽, 50-60% 너비) + 제목, 가격, 평점, 간단한 설명, 장바구니에 추가 버튼(오른쪽, 40-50% 너비)
- 아래쪽: 제품 데이터 탭(전체 설명, 사양, 리뷰)
- 하단 섹션: 관련 제품 및 업셀을 그리드 형식으로 표시(3-4 열)
- 신뢰 요소: 장바구니에 추가 버튼 근처의 배송 정보, 반품 정책, 보안 배지
장바구니에 추가 버튼은 데스크탑과 모바일 모두에서 스크롤 없이 볼 수 있도록 유지하세요. 버튼에 주목을 끌기 위해 대비되는 색상을 사용하세요.
상점 페이지 사용자 정의하기 (제품 아카이브)
1단계: 아카이브 템플릿 만들기
- 템플릿 → 테마 빌더 → 제품 아카이브로 이동
- 새 템플릿을 추가하고 유형으로 "제품 아카이브"를 선택
- 디스플레이 조건 설정(모든 아카이브, 특정 카테고리 또는 태그 페이지)
2단계: 제품 그리드 구성하기
아카이브 제품 위젯은 다음 옵션으로 제품 목록을 표시합니다:
- 열: 2-6 열(대부분의 상점에서 3-4가 잘 작동함)
- 페이지당 제품: 사용자 경험을 위해 12-24가 표준
- 페이지 매김: 번호 매기기 페이지, "더 보기" 버튼 또는 무한 스크롤
- 정렬 드롭다운: 고객이 가격, 인기 또는 평점으로 정렬할 수 있도록 허용
- 세일 배지: 세일 배지 위치, 색상 및 텍스트 사용자 정의
제품이 많은 상점의 경우 그리드 위에 카테고리 필터링을 추가하세요. Elementor의 메뉴 위젯이나 JetWooBuilder와 같은 제품 필터 플러그인을 사용하여 고급 필터링 옵션을 사용할 수 있습니다.
장바구니 페이지 디자인하기
Elementor Pro를 사용하면 장바구니 페이지 레이아웃을 사용자 정의할 수 있습니다. 좋은 장바구니 페이지는 다음과 같아야 합니다:
- 제품 이미지, 이름, 가격 및 수량을 깔끔한 표로 표시
- 총액을 눈에 잘 띄게 표시
- 상점 페이지로 돌아가는 "쇼핑 계속하기" 버튼 포함
- 고객이 배송 비용을 추정할 수 있도록 배송 계산기 표시
- 장바구니 표 아래에 교차 판매 제품 표시
Elementor 장바구니 위젯은 기본 WooCommerce 장바구니 레이아웃을 시각적 편집기로 대체하여 모든 요소—표 테두리, 버튼 색상, 타이포그래피 및 간격—를 스타일링할 수 있습니다.
체크아웃 페이지 사용자 정의하기
체크아웃 페이지는 전환율에 직접적인 영향을 미칩니다. Elementor Pro의 체크아웃 위젯은 다음을 제어합니다:
- 양식 레이아웃: 단일 열 또는 이중 열 청구/배송 양식
- 주문 요약 위치: 양식 옆 또는 위/아래
- 버튼 스타일링: 주문 버튼 색상, 크기 및 텍스트
- 결제 섹션: 결제 방법에 대한 라디오 버튼 또는 탭 레이아웃
- 신뢰 배지: 결제 양식 근처에 보안 아이콘 및 보증 텍스트 추가
체크아웃 전환 최적화 팁은 WooCommerce 체크아웃 최적화 가이드를 참조하세요.
성능 고려 사항
Elementor는 페이지에 CSS와 JavaScript를 추가합니다. WooCommerce 상점의 경우 성능은 전환과 직접적으로 연결되어 있습니다. 다음 팁을 염두에 두세요:
- 섹션/열 대신 Flexbox 컨테이너 사용하여 DOM 요소 수를 줄입니다.
- 제품 이미지 최적화: WebP 형식, 적절한 크기 및 지연 로딩 사용. 이미지 최적화 가이드를 참조하세요.
- 위젯 수 제한: 각 위젯은 마크업을 추가하므로 필요한 것만 사용하세요.
- Elementor의 성능 기능 활성화: 자산 로딩 개선, CSS 로딩 개선
- 캐싱 플러그인 사용: WP Rocket는 Elementor WooCommerce 설정과 잘 작동합니다.
Elementor WooCommerce를 위한 필수 애드온
이 Elementor 애드온은 WooCommerce 구축 기능을 확장합니다:
| 애드온 | 주요 WooCommerce 기능 |
|---|---|
| JetWooBuilder | 고급 제품 그리드, 사용자 정의 아카이브 템플릿, 조건부 논리가 있는 단일 제품 레이아웃 |
| Essential Addons Pro | 제품 그리드, 제품 캐러셀, WooCommerce 체크아웃 |
| Happy Elementor Addons | 제품 카테고리 그리드, 미니 장바구니, 제품 캐러셀 |
자주 묻는 질문
WooCommerce에 Elementor Pro가 필요한가요, 아니면 무료 버전으로도 가능한가요?
WooCommerce 전용 위젯(제품 이미지, 장바구니에 추가, 제품 데이터 탭, 장바구니, 체크아웃 등)을 사용하려면 Elementor Pro가 필요합니다. Elementor의 무료 버전에는 이러한 위젯이 포함되어 있지 않습니다. 무료 버전을 사용하여 일반 페이지를 디자인할 수 있지만, 사용자 정의 WooCommerce 템플릿은 Elementor Pro가 필요합니다.
체크아웃 페이지에 Elementor를 사용할 수 있나요?
네. Elementor Pro에는 기본 WooCommerce 체크아웃 레이아웃을 대체하는 체크아웃 위젯이 포함되어 있습니다. 양식 필드, 주문 요약, 결제 섹션 및 전체 레이아웃을 사용자 정의할 수 있습니다. 그러나 결제 게이트웨이 통합이 깨질 수 있는 중대한 사용자 정의는 주의해야 하며, 변경 후 전체 구매 흐름을 항상 테스트해야 합니다.
다른 카테고리에 대해 서로 다른 제품 페이지 레이아웃을 어떻게 만들 수 있나요?
Elementor의 테마 빌더에서 각 템플릿에 표시 조건을 할당할 수 있습니다. 의류(크기/색상 선택기 포함)용 제품 페이지 템플릿 하나, 디지털 제품(배송 정보 없음)용 템플릿 하나 등을 만드세요. 각 템플릿은 지정된 카테고리의 제품에만 적용됩니다.
Elementor가 WooCommerce를 느리게 하나요?
Elementor는 모든 페이지에 CSS 및 JavaScript 오버헤드를 추가합니다. 많은 위젯이 있는 제품 페이지에서는 기본 WooCommerce 템플릿에 비해 로드 시간이 0.5-1.5초 증가할 수 있습니다. Elementor의 내장 성능 기능을 사용하고, 이미지를 최적화하며, 캐싱 플러그인을 사용하면 이 영향을 완화할 수 있습니다. 성능이 중요한 상점의 경우 GeneratePress와 같은 더 가벼운 테마를 고려하세요.
모든 테마에서 Elementor WooCommerce 템플릿을 사용할 수 있나요?
대부분의 Elementor WooCommerce 템플릿은 WooCommerce를 지원하는 모든 테마와 함께 작동합니다. 그러나 일부 테마는 Elementor 템플릿과 충돌하는 자체 제품 페이지 스타일링이 있을 수 있습니다. Astra, GeneratePress 및 OceanWP와 같은 테마는 Elementor와 원활하게 작동하도록 설계되었으며 사용자 정의 템플릿을 위한 가장 깨끗한 캔버스를 제공합니다.
WooCommerce 스토어 구축을 위한 Elementor Pro를 받으세요
모든 WooCommerce 위젯, 테마 빌더 및 100개 이상의 Pro 템플릿에 액세스하세요. 사용자 정의 제품 페이지, 상점 아카이브 및 체크아웃 레이아웃을 시각적으로 구축하세요.
Elementor Pro 둘러보기 →
