Elementor로 우커머스 상점 페이지를 편집할 수 없는 이유 | 쉬운 솔루션

WooCommerce 스토어를 설정하고, 제품을 신중하게 선택하고, 설명을 작성하는 데 몇 시간을 투자했는데, 그 결과 우커머스 상점 페이지 편집 불가 Elementor로. 

최근 WooCommerce 통계에 따르면 전체 온라인 스토어 중 28% 이상이 WooCommerce를 사용하며, 전 세계적으로 가장 널리 사용되는 전자상거래 플랫폼으로 자리매김했습니다. 그러나 많은 스토어 소유자는 특히 다음과 같은 사용자 지정 제한으로 인해 어려움을 겪고 있습니다. WooCommerce 상점 페이지 사용자 지정 디자인 요소.

하지만 Elementor를 통해서는 WooCommerce 상점 페이지를 편집할 수 없는데, 이는 WooCommerce 자체에서 이 기본 페이지를 관리하기 때문입니다. 따라서 편집하려면 다음과 같이 Elementor와 호환되는 WooCommerce 페이지 빌더 플러그인을 사용해야 합니다. 궁극의 스토어키트. 위젯을 끌어서 놓기만 하면 전체 상점 페이지를 원하는 대로 편집할 수 있습니다.

이 종합 가이드에서는 다음과 같이 정확하게 안내해 드립니다. Elementor로 WooCommerce 상점 페이지를 편집할 수 없는 이유 를 쉽게 사용하는 방법 궁극의 스토어 키트의 강력한 위젯을 활용해보세요. 기본 상점 레이아웃을 멋지게 보일 뿐만 아니라 판매를 촉진하고 사용자 경험을 개선하는 전문적인 상점으로 탈바꿈시킬 수 있습니다.

Elementor로 우커머스 상점 페이지를 편집할 수 없는 이유

이 문제가 발생하는 이유 이해하기 Elementor 상점 페이지 편집 문제 에 대해 알아보는 것이 중요합니다. 다음은 이러한 일반적인 불만의 기술적 이유입니다:

WooCommerce 상점 페이지는 동적 아카이브입니다.

일반 워드프레스 페이지와 달리 우커머스 기본 상점 페이지 는 실제로 데이터베이스의 제품을 표시하는 동적 아카이브 페이지입니다. 

이 근본적인 차이점은 Elementor가 쉽게 편집할 수 있는 표준 페이지처럼 작동하지 않는다는 것을 의미합니다.

Elementor 동적 아카이브 페이지를 직접 편집할 수 없음

Elementor가 WooCommerce에서 작동하지 않습니다. 상점 페이지는 특히 무료 버전에서 잘 문서화되어 있는 제한 사항입니다. 

Elementor의 페이지 빌더는 인벤토리 및 카테고리에 따라 변경되는 동적 제품 목록이 아닌 정적 콘텐츠용으로 주로 설계되었습니다.

상점 페이지 콘텐츠는 WooCommerce 템플릿을 통해 제어됩니다.

그리고 우커머스 상점 페이지 레이아웃 문제 는 콘텐츠가 워드프레스 편집기가 아닌 PHP 템플릿 파일을 통해 제어된다는 사실에서 비롯됩니다. 

즉, 기존 페이지 빌더는 콘텐츠 구조에 직접 액세스할 수 없습니다.

Elementor는 실제 제품 데이터 대신 플레이스홀더를 로드합니다.

다음을 시도할 때 상점 페이지 템플릿 편집 Elementor를 클릭하면 실제 제품이 아닌 플레이스홀더 콘텐츠가 표시되는 경우가 많습니다. 

이는 Elementor가 WooCommerce의 동적 제품 쿼리와 제대로 인터페이스할 수 없기 때문에 발생합니다.

Elementor Pro는 복잡한 테마 빌더 설정이 필요합니다.

Elementor Pro를 사용하더라도 사용자 지정 상점 페이지 레이아웃을 만들려면 테마 빌더 기능을 이해하고 복잡한 템플릿 조건으로 작업해야 하는데, 이 과정은 많은 사용자에게 부담스러울 수 있습니다.

타사 지원이 없으면 사용자 지정 옵션이 매우 제한적입니다.

많은 우커머스 스토어용 Elementor 애드온하지만 Elementor의 디자인 기능과 WooCommerce의 동적 콘텐츠 시스템 사이에 누락된 링크를 제공하는 Ultimate Store Kit와 같은 솔루션이 주로 권장됩니다.

시작하기 전 전제 조건

상점 페이지 사용자 지정을 시작하기 전에 다음과 같은 필수 구성 요소가 설치되어 있는지 확인하세요:

WooCommerce 설치 및 활성화

먼저 모든 기능을 갖춘 WooCommerce 스토어가 필요합니다. Automattic에 따르면 전 세계적으로 5백만 개가 넘는 설치 수를 자랑하는 WooCommerce는 워드프레스 전자상거래를 위한 최고의 선택입니다.

Elementor 설치 및 활성화(무료 또는 프로)

무료 버전인 Elementor(활성 설치 수가 5백만 건 이상) 또는 Elementor Pro가 필요합니다. 두 버전 모두 저희 방식과 함께 작동하지만, Pro는 추가적인 디자인 유연성을 제공합니다.

궁극의 스토어 키트 설치 및 활성화

이는 다음을 가능하게 하는 중요한 구성 요소입니다. 상점 페이지 Elementor로 편집합니다. 궁극의 스토어 키트 는 WooCommerce와 Elementor 간의 호환성 문제를 해결하도록 특별히 설계되었습니다.

왜 얼티밋 스토어 키트를 사용하나요?

궁극의 스토어 키트 는 몇 가지 강력한 이점을 제공합니다:

• 60개 이상의 전문 WooCommerce 위젯: 일반 페이지 빌더와 달리 Ultimate Store Kit는 전자상거래 기능을 위해 특별히 설계된 위젯을 제공합니다.
• 코딩 필요 없음: 코드 한 줄 건드리지 않고도 전문적인 상점 레이아웃 만들기
• 모바일 반응형 디자인: 모든 위젯은 모바일 상거래에 최적화되어 있으며, 이는 모바일이 이커머스 트래픽의 54%를 차지하기 때문에 매우 중요합니다.
• 성능 최적화: 전환율에 필수적인 빠른 로딩 시간을 보장하는 경량 코드
• 정기 업데이트: 지속적인 호환성 업데이트로 최신 WooCommerce 및 Elementor 버전에서 원활한 작동 보장

자세히 보기: 웹사이트에 얼티밋 스토어 키트 설치 및 활성화. 

궁극의 스토어 키트를 사용하여 Elementor로 WooCommerce 상점 페이지 편집하기

이제 상점 페이지를 변환하는 자세한 프로세스를 살펴보겠습니다. 다음과 같은 정확한 단계를 따라 전문적인 결과를 얻으세요:

4.1 단일 제품 페이지 위젯 활성화하기

첫 번째 단계는 Elementor 동적 콘텐츠 사용자 지정 프로세스를 통해 필요한 위젯을 활성화할 수 있습니다:

1. 다음으로 이동 워드프레스 > 궁극의 스토어 키트 플러그인 대시보드
2. 를 클릭합니다. 화장실 위젯 탭
3. 검색 "단일 제품 페이지 위젯"
4. 단일 제품 페이지 위젯 활성화 스위치를 토글하여
5. 클릭 "설정 저장" 를 클릭하여 변경 사항을 확인합니다.

이 위젯은 사용자 지정 접근 방식의 기반이 되는 위젯으로, 다음과 같은 기능을 제공합니다. Elementor WooCommerce 고급 상점 페이지 편집에 필요한 통합 기능입니다.

4.2 Elementor 편집기에서 단일 제품 페이지 위젯 삽입하기

이제 페이지에 위젯을 추가하겠습니다:

1. 열기 Elementor 편집기 를 눌러 원하는 페이지로 이동합니다.
2. 를 클릭합니다. "+"(요소 추가) 아이콘 버튼
3. 검색 "단일 제품 페이지" 위젯
4. 위젯을 끌어다 놓기 편집기 캔버스에

위젯이 제품 데이터로 즉시 채워지고 사용자 지정이 어떻게 표시되는지 실시간으로 미리 볼 수 있습니다.

4.3 제품 제목 섹션 사용자 지정

제품 제목은 SEO와 사용자 경험에 매우 중요합니다. 연구에 따르면 매력적인 제품 제목은 다음과 같은 이점을 제공합니다. 클릭률 최대 36% 증가.

다음으로 이동합니다. 스타일 > 제품 제목 를 클릭하고 사용자 지정합니다:

색상

• 브랜드 팔레트에 맞는 색상을 선택하세요.
• 접근성을 위해 명암비를 고려하세요(WCAG는 최소 4.5:1을 권장합니다).
• 밝은 배경에서 가독성을 높이려면 어두운 색상을 사용하세요.

타이포그래피

다음 옵션을 사용하여 타이틀의 모양을 사용자 지정하세요:

• 글꼴 패밀리: 웹 안전 글꼴 또는 Google 글꼴 중에서 선택
• 글꼴 크기: 데스크톱의 경우 일반적으로 24-32px가 최적 크기입니다.
• 글꼴 무게: 제목에는 굵게(700) 또는 약간 굵게(600)가 적합합니다.
• 텍스트 변환: 현대적인 미학을 위해 대문자를 고려하세요.
• 선 높이: 1.2-1.4는 좋은 가독성을 제공합니다.
• 문자 간격: 미묘한 간격(0.5~1px)으로 가독성을 높일 수 있습니다.

4.4 제품 가격 섹션 사용자 지정

가격은 전환율에 영향을 미치는 가장 중요한 요소 중 하나입니다. 연구에 따르면 명확하고 형식이 잘 정립된 가격 책정은 다음과 같은 이점을 제공합니다. 전환율 최대 25% 증가.

다음으로 이동 스타일 > 제품 가격 를 클릭하고 조정합니다:

색상

• 대비되는 색상을 사용하여 가격을 돋보이게 하기
• 판매 가격을 빨간색 또는 주황색으로 표시하여 긴박감을 조성하세요.
• 전체 색 구성표와 일관성 유지

타이포그래피

• 글꼴 크기: 가격은 눈에 잘 띄어야 합니다(일반적으로 18-24px).
• 글꼴 무게: 대담한 가중치로 가격 책정에 대한 관심 유도
• 글꼴 패밀리: 일관성을 위해 제목과 동일한 글꼴 사용

4.5 제품 설명 섹션 사용자 지정

제품 설명은 구매 결정에 큰 영향을 미칩니다, 자세한 설명을 통해 전환율을 최대 781%까지 높일 수 있습니다..

다음으로 이동합니다. 스타일 > 제품 설명:

색상

• 읽기 쉬운 중성적인 색상 사용
• 배경과 충분한 대비 확보
• 계층 구조를 위해 제목보다 약간 밝은 색상을 고려하세요.

타이포그래피

• 글꼴 크기: 가독성을 위해 14-16px가 최적입니다.
• 선 높이: 1.5-1.6으로 읽기 경험 향상
• 글꼴 무게: 본문 텍스트의 경우 일반(400) 또는 중간(500)

4.6 장바구니에 추가 섹션 사용자 지정하기

카트에 추가 버튼은 전환의 초점입니다. 최적화된 버튼을 사용하면 전환율 최대 35% 증가 이커머스 연구에 따르면

다음으로 이동 스타일 > 장바구니 추가 을 클릭하고 두 탭 모두에서 작업하세요:

일반 탭 사용자 지정:

1. 텍스트 색상: 가시성을 위해 고대비 색상 선택
2. 배경색: 클래식 및 그라데이션 옵션 중에서 선택
   • 클래식: 단색은 프로페셔널한 룩에 잘 어울립니다.
   • 그라데이션: 현대적인 그라데이션으로 시각적 매력 창출
3. 테두리 설정:
   • 테두리 유형: 단색 테두리로 깔끔한 선명도 제공
   • 테두리 너비: 미묘한 선명도를 위한 1-2px
   • 테두리 색상: 색 구성표 보완
   • 테두리 반경: 모던한 둥근 모서리의 경우 4-8px

4. 크기: 눈에 잘 띄는 필요에 따라 소형, 중형, 대형 중에서 선택하세요.
5. 타이포그래피: 사이트의 타이포그래피 계층 구조와 일치하기
6. 상자 그림자: 미묘한 그림자(2~4px)로 깊이와 클릭 가능성에 대한 단서 추가

호버 탭 사용자 지정:

1. 텍스트 호버 색상: 대화형 피드백 생성
2. 배경 유형 및 호버 색상: 호버 상태를 어둡게 또는 밝게
3. 테두리 호버 색상: 미묘한 색상 변화는 상호 작용을 나타냅니다.

4.7 수량 필드 섹션 사용자 지정

수량 선택기는 직관적이고 접근하기 쉬워야 합니다. 다음으로 이동합니다. 스타일 > 수량 필드:

1. 너비: 숫자 입력을 위한 충분한 공간 확보(최소 60px)
2. 색상: 가독성 있는 텍스트 색상 사용

3. 배경 유형: 클래식 배경은 양식 요소에 가장 적합합니다.
4. 테두리 설정: 테두리를 지우면 입력 영역을 정의하는 데 도움이 됩니다.

5. 패딩8-12px로 편안한 터치 타겟 제공
6. 마진: 적절한 간격으로 실수로 인한 클릭 방지
7. 타이포그래피: 양식 타이포그래피 표준 일치
8. 상자 그림자: 미묘한 그림자 삽입으로 입력 필드를 나타낼 수 있습니다.

4.8 탭 항목 섹션 사용자 지정하기

제품 탭은 정보를 효과적으로 정리하며, 잘 디자인된 탭은 사용자 참여도를 최대 40%까지 향상시킵니다.

다음으로 이동합니다. 스타일 > 탭 항목 를 클릭하고 세 가지 상태를 구성합니다:

일반 설정:

1. 패딩: 편안한 클릭 타겟을 위한 12-16px
2. 마진: 탭이 닿지 않도록 방지
3. 타이포그래피: 선명하고 가독성 높은 글꼴
4. 테두리 설정: 탭 경계 정의

일반 탭 상태:

1. 텍스트 색상: 비활성 상태의 중성 색상
2. 배경색: 미묘한 배경
3. 배경 이미지: 선택적 브랜딩 요소

탭 상태로 마우스를 가져갑니다:

1. 텍스트 호버 색상: 피드백을 위해 약간 밝게
2. 배경 유형 및 색상: 부드러운 호버 전환
3. 테두리 호버 색상: 미묘한 대화형 신호

활성 탭 상태:

1. 텍스트 활성 색상: 현재 선택을 위한 고대비
2. 배경 활성 색상: 활성 상태를 명확하게 구분
3. 테두리 활성 색상: 강력한 시각적 지표
4. 활성 라인 색상: 밑줄 또는 강조 색상

4.9 탭 콘텐츠 섹션 사용자 지정하기

콘텐츠 영역은 가독성이 뛰어나고 잘 정리되어 있어야 합니다:

다음으로 이동합니다. 스타일 > 탭 콘텐츠:

1. 텍스트 색상: 가독성을 위한 높은 대비
2. 배경 유형 및 색상: 중립적 배경이 가장 효과적
3. 배경 이미지: 주의가 산만해지지 않도록 아껴서 사용
4. 패딩: 편안한 읽기를 위한 16-20px

5. 테두리 반경: 사이트의 디자인 언어와 일치
6. 테두리 설정: 미묘한 테두리로 콘텐츠 영역을 정의할 수 있습니다.

4.10 관련 제품 섹션 사용자 지정

관련 상품은 평균 주문 가치를 최대 20%까지 높일 수 있습니다. 4개의 하위 섹션을 구성합니다:

제목 하위 섹션:

1. 색상: 계층 색상 사용(본문 텍스트보다 진한 색상)
2. 타이포그래피: 섹션 헤더에 더 크고 굵은 글꼴 사용
3. 마진: 위와 아래의 적절한 간격

제목 하위 섹션:

1. 색상: 제품별 색상
2. 타이포그래피: 가독성 크기(16-18px)

가격 하위 섹션:

1. 색상: 주요 제품 가격과 일치
2. 타이포그래피: 명확하고 눈에 잘 띄는 가격 표시

카트 하위 섹션:

1. 색상: 액션 지향적 색상
2. 배경: 버튼의 배경 대비
3. 패딩: 편안한 버튼 사이즈
4. 타이포그래피: 명확한 클릭 유도 문안 텍스트

4.11 변형 견본 섹션 사용자 지정하기

제품 변형은 사용자 경험에 매우 중요합니다. 세 가지 상태를 구성합니다:

다음으로 이동합니다. 스타일 > 변형 견본:

일반 설정:

1. 라벨 색상: 선명하고 가독성 높은 색상
2. 올바른 간격: 라벨과 견본 사이의 충분한 공간 확보
3. 타이포그래피: 양식 요소와 일치

일반 탭:

1. 텍스트 색상: 무채색, 가독성 높은 색상
2. 배경 설정: 견본 배경 지우기
3. 테두리 설정: 견본 경계 정의

4. 패딩: 편안한 선택 대상
5. Gap: 견본 옵션 사이의 간격
6. 상자 그림자: 미묘한 깊이 표시기
7. 텍스트 색상 재설정: 초기화 옵션 스타일링 지우기

탭으로 이동합니다:

1. 텍스트 호버 색상: 대화형 피드백
2. 배경 설정: 호버 상태 표시
3. 테두리 호버 색상: 선택 미리 보기
4. 호버 그림자: 향상된 상호 작용의 깊이

활성 탭:

1. 텍스트 활성 색상: 선택 표시 지우기
2. 배경 설정: 강력한 활성 상태
3. 테두리 활성 색상: 최종 선택 테두리
4. 액티브 섀도우: 발음 선택 피드백

4.12 수량 플러스 마이너스 섹션 사용자 지정하기

수량 제어는 직관적이고 접근하기 쉬워야 합니다:

다음으로 이동 스타일 > 수량 플러스 마이너스 를 클릭하고 두 가지 상태를 구성합니다:

일반 탭:

1. 아이콘 색상: 선명하고 클릭 가능한 색상
2. 배경 설정: 버튼 영역 정의
3. 테두리 설정: 버튼 경계 지우기

4. 패딩: 적절한 터치 타겟(최소 44px)
5. 상자 그림자: 미묘한 버튼 깊이
6. 아이콘 크기: 선명하고 가독성 높은 아이콘(16~20px)

탭으로 이동합니다:

1. 아이콘 호버 색상: 대화형 피드백
2. 배경 설정: 호버 상태 표시
3. 테두리 호버 색상: 향상된 상호 작용
4. 호버 그림자: 호버링 시 깊이 증가

4.13 판매 배지 섹션 사용자 지정하기

판매 배지를 제대로 구현하면 전환율을 최대 451%까지 높일 수 있습니다:

다음으로 이동합니다. 스타일 > 세일 배지:

1. 텍스트 색상: 높은 대비로 가시성 확보
2. 배경 설정: 시선을 사로잡는 색상(빨간색, 주황색)
3. 배경 이미지: 홍보 그래픽 옵션

4. 패딩: 텍스트 주위에 적절한 공백
5. 마진: 제품 대비 적절한 위치
6. 테두리 반경: 디자인 미학에 맞추기
7. 타이포그래피: 대담하고 가독성 높은 세일 텍스트

우커머스 Elementor 사용자 정의 모범 사례

이러한 사용자 지정을 구현할 때는 다음과 같은 입증된 모범 사례를 고려하세요:

모바일 우선 설계

모바일 상거래가 전체 전자상거래 트래픽의 54%를 차지하므로 모든 사용자 지정이 모바일 반응형이어야 합니다. 테스트 WooCommerce 페이지 편집 다양한 기기에서 결과를 확인할 수 있습니다.

성능 최적화

페이지 속도는 전환율에 직접적인 영향을 미치며, 1초 지연 시 전환율이 71%까지 감소할 수 있습니다. 가능한 경우 이미지를 최적화하고 위젯 사용을 최소화하세요.

A/B 테스트

다양한 디자인 변형을 지속적으로 테스트하여 전환율을 최적화하세요. 작은 변경 사항이라도 Elementor 상점 편집 요소는 매출에 큰 영향을 미칠 수 있습니다.

접근성 규정 준수

사용자 지정이 접근성에 대한 WCAG 가이드라인을 충족하는지 확인하여 잠재 고객층을 확대하고 사용자 경험을 개선하세요.

결론

다음을 수행할 수 없을 때의 좌절감 Elementor로 WooCommerce 상점 페이지 편집하기 는 이제 과거의 일이 되었습니다. 앞서 살펴본 바와 같이, Elementor만으로는 상점 페이지를 편집할 수 없습니다. 정적 페이지 빌더와 동적 이커머스 콘텐츠 간의 근본적인 아키텍처 차이로 인한 것입니다.

하지만, 궁극의 스토어 키트는 이러한 한계를 해결합니다. WooCommerce의 동적 기능과 Elementor의 디자인 기능 사이의 간극을 메우는 특수 위젯을 제공하여 우아하게 디자인할 수 있습니다. 이 솔루션은 복잡한 코딩이나 값비싼 사용자 지정 개발이 필요 없습니다.

자주 묻는 질문