WooCommerce 제품 페이지를 사용자 정의하는 방법

모든 전자 상거래 웹 사이트의 제품 페이지는 가장 필수적인 부분으로 요구됩니다. 관련 상품 등의 부가 정보와 함께 상품에 관한 모든 세부 사항을 질서 있게 담고 있기 때문입니다.

기본 WooCommerce 제품 페이지는 기본 제품 빠른 보기 , 장바구니에 담기 및 기타 기본 기능에 적합하지만 경쟁이 치열한 현대 전자 상거래 환경에서는 이것만으로는 충분하지 않습니다. 제품 페이지는 WooCommerce가 구축한 모든 비즈니스 플랫폼에서 가장 중요한 페이지 중 하나로 중요한 기능을 합니다. 그러나 기본 페이지는 자르지 않습니다.

제품 페이지 사용자 정의의 중요성은 아무리 강조해도 지나치지 않습니다.

제품 페이지를 사용자 정의함으로써 본질적으로 고객에게 고유한 쇼핑 경험을 제공하게 되며 이는 방문자 유지 및 판매 증가에도 중요합니다.

이 게시물에서는 WooCommerce 제품 페이지 편집기와 맞춤형 WooCommerce 위젯을 활용하여 매력적인 제품 페이지 등을 만드는 방법을 안내합니다.

WooCommerce 제품 페이지를 사용자 정의하는 데 필요한 도구는 무엇입니까?

무엇보다도 서버에 최신 버전의 WordPress 가 설치되어 있어야 하며, 그 위에 모든 상점/쇼핑 페이지 기능을 수용하려면 WooCommerce 플러그인이 설치되어 있어야 합니다.

또한 기능 중심의 전자 상거래 WordPress 테마 가 필요 하며 마지막으로 WooCommerce Elementor Shop Builder 플러그인이 필요합니다. Elementor 샵 빌더 플러그인을 사용하면 개별 샵 페이지와 마켓플레이스 제품 그리드, 제품 목록, 제품 비교 블록 등을 완전히 제어하고 사용자 지정할 수 있습니다.

WooCommerce 제품 페이지를 사용자 정의하는 방법

WordPress가 제대로 설치되어 있고 전자 상거래 테마가 이미 서버에 설치되어 있기를 바랍니다. 이제 필요한 추가 WordPress 리소스 및 도구부터 시작하여 제품 페이지 사용자 지정의 단계별 프로세스를 살펴보겠습니다.

1단계: Elementor WooCommerce 애드온 플러그인 설치

최신 제품 페이지가 고객에게 제공되어야 하는 다양한 요소 및 WooCommerce 제품 변형 견본으로 WooCommerce 제품 페이지를 사용자 지정하는 이 라이브 예제에서는 ShopReady라고 하는 WooCommerce 제품 페이지 빌더 비주얼 작성기와 유사한 것을 사용할 것입니다.

ShopReady Elementor 상점 빌더는 강력한 전자 상거래 상점 웹사이트를 만들기 위한 놀라운 종합 번들 도구입니다. 플러그인에는 사용 사례별 기능 및 도구가 포함된 105개 이상의 전문적으로 제작된 위젯이 포함되어 있습니다. 예를 들어, 이 전자 상거래 플러그인을 사용하면 가격, 크기, 무게, 색상, 등급, 배송 등으로 제품을 필터링할 수 있는 기능적인 WooCommerce 제품 필터를 만들 수 있습니다.

이 WooCommerce 애드온 플러그인을 시작하려면 먼저 다운로드하세요. 그렇게 하려면 WordPress 대시보드 에 로그인 하고 그리고 설치 버튼을 클릭합니다.

플러그인이 성공적으로 설치될 때까지 기다렸다가 활성화 를 클릭합니다 .

ShopReady 메뉴가 WordPress 대시보드에 나타납니다. 여기에서 Shop 페이지 사용자 정의 플러그인에서 제공하는 모든 위젯, 모듈 및 사전 설정 콘텐츠에 액세스할 수 있습니다.

이 간단한 메뉴에서 위젯을 활성화/비활성화하고 템플릿을 만들고 다양한 기능에 대한 API 키를 삽입할 수 있습니다.

이 플러그인의 또 다른 훌륭한 기능은 WooCommerce 기능을 위한 통화 전환기입니다. 이 기능을 활성화하려면 아래 표시된 지침을 따라야 합니다.

Exchangerate 에서 생성한 통화 API 키를 추가하려면 API 탭을 클릭하세요.

Exchangerate 계정 대시보드에 로그온하고 API 키를 복사하여 가져옵니다. API 키를 붙여넣은 후 WordPress 대시보드 > ShopReady > API 로 이동하고 2단계: 사전 설정된 제품 페이지 템플릿 사용 또는 처음부터 만들기

다음 단계는 제품 페이지 작업을 시작하는 것이지만 그 전에 WooCommerce 웹사이트에 제품을 추가해야 합니다. 그렇게 하는 방법을 모르는 경우 이 가이드를 따를 수 있습니다. – WooCommerce 제품을 빠르게 추가하는 방법 .

이제 제품 쇼케이스용 페이지 사용자 지정을 시작하려면 ShopReady – WooCommerce Builder를 사용하여 플러그인 대시보드로 이동하고 템플릿 탭 을 클릭하여 간단한 제품 페이지를 만드 십시오. 제품 템플릿 범주를 활성화하고 단일 제품 설정을 찾습니다. 이제 편집 아이콘을 클릭하십시오.

그러면 Elementor Editor 화면으로 리디렉션됩니다. 이제 페이지 사용자 정의를 시작하려면 더하기 기호를 클릭하여 Elementor 섹션을 추가하십시오. 원하는 페이지 모양과 사용하려는 위젯에 따라 페이지에 추가할 수 있는 다양한 유형의 Elementor 섹션이 있습니다.

3단계: Elementor 위젯으로 WooCommerce 제품 페이지 사용자 지정

1. 제품 제목 추가

이제 WooCommerce 제품 페이지에 대한 기본 Elementor 섹션 구조를 배치했으므로 제품 제목을 추가하여 시작할 수 있습니다. 이렇게 하려면 제품 페이지에서 제품 제목 위젯을 끌어다 놓아야 합니다.

적절한 제품 제목을 표시하려면 콘텐츠 탭을 클릭하면 그 아래에 편집기 새로 고침 옵션이 있습니다. 데모 제품 옵션 에서 적절한 제품 제목을 선택합니다 .

이 데이터에 적절한 제품 제목이 표시되도록 하려면 WooCommerce 제품 대시보드 에서 적절한 제품 정보를 추가하거나 편집해야 합니다 .

2. 제품 페이지에 추천 이미지 추가

다음으로, 제품에 대한 제품 이미지 갤러리 및 기능 이미지가 필요합니다. 이를 위해 전자 상거래용 올인원 Elementor 애드온에서 제공하는 여러 이미지 위젯 중 하나를 사용할 수 있습니다 .

이 예에서는 Zoom 위젯과 함께 ShopReady Thumbnail을 사용할 것이며, 제목에서 알 수 있는 대로 작동합니다. 이 위젯을 사용하면 고객이 제품 이미지 위로 마우스를 가져갈 때 제품 이미지의 WooCommerce 제품 호버 줌 버전을 보여줄 수 있습니다.

이전과 마찬가지로 데모 제품 옵션의 콘텐츠 탭에서 올바른 제품 이미지를 선택할 수 있습니다.

3. 가격 위젯에 대한 블록 추가

전자 상거래 제품 페이지에 있어야 하는 또 다른 중요한 항목은 제품 가격 책정 블록입니다. 이를 위해 올바른 업데이트로 WooCommerce 제품 속성을 업데이트 하고 제품 제목 아래에 배치되어야 하는 ShopReady Price 위젯을 사용해야 합니다.

정확한 가격을 표시하려면 콘텐츠 탭 아래의 데모 제품 옵션 에서 제품 제목을 선택하십시오.

4. 제품 설명 추가

또한 이 WooCommerce 제품 추가 기능 제품 설명 위젯을 사용하여 고도로 사용자 정의 가능한 제품 설명을 추가할 수 있습니다. 스타일 탭에서 제품 설명이 대중에게 표시되는 방식을 사용자 지정할 수 있습니다.

5. 장바구니에 추가 기능 추가

장바구니에 추가는 고객이 체크아웃 페이지로 이동하기 전에 장바구니 페이지에 여러 제품을 가질 수 있도록 하는 또 다른 매우 중요한 기능입니다.

전자 상거래 쇼핑 페이지에서 강력한 장바구니에 추가 기능 을 사용하려면 ShopReady 장바구니에 추가 위젯을 사용할 수 있습니다. 이 위젯을 사용하면 고객이 장바구니에 추가 블록에서 직접 장바구니 제품 수량을 늘리거나 줄일 수 있습니다.

또한 WooCommerce 제품 스타일링 Elementor Style 탭 인쇄술, 색상, 배경, 여백, 패딩 등 의 Elementor 장바구니에 추가 버튼을 사용자 지정할 수 있습니다.

6. 제품 페이지에 메타데이터 추가

고객에게 더 나은 쇼핑 경험을 제공하려면 WooCommerce에 제품을 추가하는 동안 추가 한 메타데이터 및 제품 속성을 사용하여 WooCommerce 제품 필터를 구현해야 합니다 .

제품 페이지에 이러한 데이터를 표시하려면 ShopReady 메타 위젯을 검색하여 장바구니에 담기 버튼 아래에 놓습니다.

콘텐츠 탭 아래의 데모 제품 옵션 에서 올바른 제품 제목을 선택하면 제품 태그 및 메타데이터가 올바르게 표시되어야 합니다 .

7. 제품 페이지에 소셜 미디어 공유 버튼 추가하기

고객은 간단한 소셜 미디어 공유 버튼 블록을 사용하여 WooCommerce 제품 페이지에서 바로 소셜 미디어에 제품 게시물을 공유할 수도 있습니다. 드래그 앤 드롭 Elementor Social Share 위젯을 사용하여 간단히 만들 수 있습니다.

콘텐츠 탭 에서 바로 소셜 미디어 아이콘, 텍스트 및 공유 가능한 링크로 블록을 사용자 지정할 수 있습니다 . 또한 Elementor 스타일 탭 에서 소셜 공유 블록의 모양을 변경하도록 사용자 정의할 수도 있습니다 .

WooCommerce 제품 페이지 사용자 정의의 기본 사항이 완료되었습니다.

4단계: WooCommerce 제품 페이지에 관련 제품 추가

온라인 판매를 늘리는 좋은 방법은 WooCommerce 제품 추가 기능 관련 제품 위젯을 사용하여 제품 페이지에 관련 제품을 표시하는 것입니다. ShopReady 관련 제품 위젯을 사용하면 섹션에서 멋진 제품 슬라이더 블록을 생성할 수 있습니다.

위젯을 사용하려면 단일 제품 블록 아래에 위젯을 드래그 앤 드롭하고 단일 제품 페이지에서 선보이고 싶은 각 제품을 개별적으로 선택하기만 하면 됩니다.

결론적으로

이 유익한 가이드가 WooCommerce 제품 페이지 템플릿 사용자 정의 및 이러한 놀라운 도구를 활용하여 전자 상거래 웹사이트에 더 나은 기능을 추가하는 방법을 더 폭넓게 이해하는 데 도움이 되었기를 바랍니다.

제품 비교 테이블에 WooCommerce 팝업 제품 세부 정보를 사용하면 전자 상거래 시장이 필요로 하는 모든 것을 ShopReady에서 제공할 수 있습니다. 이 주제에 대해 질문이 있는 경우 아래의 댓글 섹션에 언제든지 문의하세요.