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

게시 됨: 2020-11-07

제품 페이지를 수정하고 전환을 극대화하고 싶으십니까? 이 가이드에서는 Elementor를 사용하여 WooCommerce 제품 페이지를 사용자 지정하여 판매를 늘리는 방법을 보여줍니다.

이전에는 제품 표시 방식을 개선하기 위해 Elementor를 사용하여 쇼핑 페이지를 사용자 정의하는 방법을 살펴보았습니다. 그러나 표준 유입경로에서는 쇼핑객이 쇼핑 페이지에서 제품을 선택한 후 제품 페이지로 이동합니다. 퍼널의 이 단계를 최대한 최적화하기 위해 Elementor의 위젯 및 템플릿 디자인을 사용하여 WooCommerce 제품 페이지를 만들고 사용자 지정할 수 있습니다. 따라서 Elementor를 사용하여 제품 페이지를 최대한 활용할 수 있는 방법을 살펴보겠습니다.

WooCommerce 제품 페이지를 사용자 정의하는 이유는 무엇입니까?

튜토리얼을 시작하기 전에 WooCommerce에서 제품 페이지를 개인화할 때의 이점을 더 잘 이해하겠습니다. 완전히 사용자 정의된 제품 페이지를 사용하면 제품 페이지를 유익하고 효과적이며 제품 품질을 완전히 대표할 수 있는 이점을 얻을 수 있습니다.

그 정도까지 고객을 설득할 때 추가 우위를 제공할 모든 요소를 ​​추가할 수 있습니다. 예를 들어 Elementor 를 사용하면 요소를 빠르게 추가하여 사용자의 평가나 제품 평가를 표시할 수 있습니다. 또한 상향 판매 요소, 관련 제품 및 추가 판매 제안을 포함할 수 있습니다. 더 나은 고객 응답 또는 데모 비디오를 위해 모든 제품에 맞춤형 문의 양식을 추가할 수 있습니다.

요즘 이커머스의 경쟁이 치열합니다. 따라서 경쟁에서 한 발 앞서 나가기 위해서는 창의적이어야 하고 쇼핑객에게 탁월한 고객 경험을 제공해야 합니다. 그렇기 때문에 맞춤형 WooCommerce 제품 페이지로 보다 선별된 쇼핑 경험을 만드는 것이 필수 입니다. 그리고 가장 좋은 점은 Elementor를 사용하여 제품 페이지를 쉽게 만들고 다시 디자인할 수 있다는 것입니다.

Elementor에는 디자인 경험이 없어도 즉시 제품 페이지를 만들 수 있는 많은 제품 페이지 템플릿이 제공됩니다. 그렇다면 Elementor에서 WooCommerce 제품 페이지를 사용자 정의하는 방법을 살펴보겠습니다.

시작하기 전에

튜토리얼을 시작하기 전에 이 프로세스를 위해서는 Elementor Pro가 필요하다는 점에 유의하는 것이 중요합니다. 프리미엄 버전을 사용하면 제품 페이지 템플릿을 사용자 정의하고 모든 WooCommerce 위젯을 활성화할 수 있습니다. 사이트의 더 많은 영역을 개인화하려는 경우 Elementor Pro는 기능과 가격을 고려할 때 훌륭한 투자입니다. 연간 49달러로 다음을 즐길 수 있습니다.

  • 전용 WooCommerce 위젯이 있는 50개 이상의 Pro 위젯
  • 쇼핑 페이지, 장바구니 페이지, 결제 페이지 등과 같은 특정 WooCommerce 페이지에 대한 전체 사용자 정의 옵션
  • 다양한 페이지 및 웹사이트 디자인을 위한 300개 이상의 Pro 템플릿이 포함된 10개 이상의 전체 웹사이트 키트
  • 특정 템플릿 및 위젯 구축 옵션이 있는 전용 WooCommerce 빌더

모든 계획에는 새로운 구매에 대한 30일 환불 보장이 있습니다.

엘리멘터 프로

Elementor에서 WooCommerce 상점 페이지를 사용자 정의하는 방법은 무엇입니까?

제품 페이지에 대한 모든 변경 사항을 쉽게 구현할 수 있도록 제품 페이지에 대한 템플릿을 설정하여 시작하겠습니다.

제품 페이지 템플릿 만들기

따라서 WordPress 관리 대시보드 에서 템플릿 을 누르십시오. 그런 다음 새로 추가 를 클릭하여 새 템플릿을 만들고 유형을 단일 제품 으로 선택하고 이름을 지정한 다음 템플릿 만들기를 클릭합니다. woocommerce 제품 페이지 요소 사용자 정의 또는 - 템플릿 신규

Elementor의 사용자 정의 화면 에 들어가면 설정 블록이나 템플릿을 사용하여 제품 페이지에서 작업할 수 있는 옵션이 제공됩니다. 여기로 위젯 드래그 섹션 에서 템플릿 추가 버튼을 클릭하면 언제든지 이 화면을 열 수 있습니다. 또한 Elementor가 제공하는 완전히 디자인된 다양한 제품 페이지 템플릿을 선택하여 삶을 더 쉽게 만들 수 있습니다.

작업을 시작할 수 있는 제품 페이지의 설정 섹션만 제공하는 더 작은 블록을 사용할 수도 있습니다. 지금은 몇 개의 블록을 사용합니다. 템플릿 추가 버튼을 클릭한 다음 블록 탭 으로 이동하여 템플릿 드롭다운 메뉴에서 단일 제품 을 선택하겠습니다. 그런 다음 필요에 맞는 블록을 선택하고 삽입 을 클릭하여 템플릿에 추가합니다.

woocommerce 제품 페이지 요소 사용자 정의 또는 - 블록 선택

WooCommerce 제품 페이지를 만들었습니다. 이제 약간의 풍미를 더할 때이므로 Elementor를 사용하여 페이지를 좀 더 사용자 정의 하는 것으로 시작하겠습니다.

Elementor에서 WooCommerce 제품 페이지 사용자 지정

제품 페이지 사용자 지정을 시작하려면 먼저 제품 평가 위젯을 제거합니다. 웹 사이트에서 제품 평가가 활성화되어 있지 않기 때문입니다. 이렇게 하려면 제거하려는 위젯을 마우스 오른쪽 버튼으로 클릭 하고 삭제를 누릅니다.

woocommerce 제품 페이지 요소 사용자 정의 또는 - 위젯 삭제

다음으로 고객의 현재 장바구니를 표시하는 메뉴 장바구니 버튼 을 추가해 보겠습니다. 그렇게 하려면 사이드바의 오른쪽 상단에 있는 그리드 아이콘 을 클릭하고 검색창을 사용하여 위젯 메뉴 를 찾습니다. 그런 다음 위젯을 원하는 위치로 드래그하세요.

woocommerce 제품 페이지 요소 사용자 정의 또는 - 메뉴 카트 추가

이제 WooCommerce 제품 페이지를 좀 더 커스터마이징해 보겠습니다. 위젯 을 클릭하고 왼쪽 사이드바 옵션 을 사용하여 아이콘과 정렬을 변경합니다.

마지막으로 온라인 상점에 매우 편리할 수 있는 몇 가지 요소를 더 추가해 보겠습니다. 예를 들어, 제품이 제공하는 것을 더 잘 표시하기 위해 비디오를 추가하지 않겠습니까? 제품 페이지 하단에 YouTube 동영상 또는 서버 호스팅 동영상을 추가하고 제품 페이지에 맞게 사용자 지정할 수 있습니다.

두 옵션의 프로세스는 매우 유사합니다. 위젯 메뉴에서 위젯 을 추가하고 비디오 소스 를 포함하기만 하면 됩니다. 비디오 자동 재생, 음소거 등을 선택할 수도 있습니다.

woocommerce 제품 페이지 요소 사용자 정의 또는 - 새로운 비디오 추가

이것은 단지 표면을 긁는 것일 뿐이지만 Elementor에서 WooCommerce 제품 페이지를 사용자 정의하기 위해 할 수 있는 일이 훨씬 더 많습니다. 예를 들어 설명, 관련 제품, 등급, 이미지, 버튼 등을 추가할 수 있습니다. 따라서 창의력을 발휘하고 Elementor가 제공하는 모든 위젯과 블록을 가지고 놀아보세요. 맞춤설정 을 마치면 페이지가 데스크톱과 휴대기기 모두에서 보기 좋게 표시되는지 확인하세요.

모바일 및 태블릿용 제품 페이지 사용자 지정

Elementor는 제품 페이지가 모바일 장치에서 완벽하게 보이도록 하는 흥미로운 옵션을 제공합니다. 왼쪽 사이드바 하단에 있는 반응형 모드 버튼을 클릭하고 태블릿이나 모바일로 변경하기만 하면 됩니다.

woocommerce 제품 페이지 요소 사용자 정의 또는 - 모바일 사용자 정의

그런 다음 다양한 위젯을 사용자 정의하고 모바일에서 완벽하게 보이도록 조정할 수 있습니다.

새로운 WooCommerce 제품 페이지 활성화

Elementor에서 제품 페이지 템플릿 사용자 지정을 마치면 모든 제품 페이지에 대해 활성화할 차례입니다. 이렇게 하려면 왼쪽 Elementor 사이드바 하단에 있는 게시 버튼을 클릭합니다. 그런 다음 템플릿에 대한 조건 을 설정해야 합니다. 이를 통해 특정 페이지 또는 웹사이트의 특정 조건에 대해 이 새 템플릿을 활성화할 수 있습니다.

예를 들어 제품 페이지에서 템플릿을 활성화할 수 있지만 카테고리 페이지 또는 특정 작성자의 제품과 같은 다른 페이지에서도 템플릿을 활성화할 수 있습니다. 그렇게 하려면 조건 추가 버튼을 누르고 포함 아래에서 드롭다운 옵션을 선택하고 제품 (또는 템플릿을 활성화하려는 다른 옵션)을 클릭 합니다. 그런 다음 저장 후 닫기 를 누르면 모든 WooCommerce 제품에 대해 새로 사용자 정의된 제품 페이지가 활성화됩니다.

마무리

요약하자면, 제품 페이지를 개인화하면 고객 경험을 개선하고 전환율을 높일 수 있습니다. 그리고 가장 좋은 점은 Elementor를 사용하면 매우 쉽다는 것입니다. 따라서 Elementor에서 WooCommerce 제품 페이지를 사용자 정의하는 방법을 배우면 상점을 다음 단계로 끌어올리는 데 도움이 됩니다 .

이 가이드에서는 제품 페이지를 만들고 편집하기 위해 수행할 수 있는 작업의 몇 가지 예를 보았습니다. 하지만 당신이 할 수 있는 다른 많은 것들이 있습니다. Elementor의 놀라운 드래그 앤 드롭 페이지 빌더와 수많은 WooCommerce 위젯을 사용하면 모든 종류의 제품 페이지를 필요에 맞게 만들 수 있습니다. 예를 들어 Google 지도와 같은 위젯, 응답을 위한 문의 양식, 평가 캐러셀 등을 포함할 수 있습니다. 미리 디자인된 페이지 템플릿을 사용할 수도 있습니다.

Elementor가 제공하는 모든 것을 발견할 수 있는 옵션을 가지고 노는 것이 좋습니다.

Elementor로 제품 페이지를 개선하기 위한 아이디어

이 과정에서 도움이 되도록 멋진 WooCommerce 제품 페이지를 만드는 데 사용할 수 있는 몇 가지 팁과 아이디어가 있습니다.

  • 데스크톱 및 모바일 장치 모두에서 보기 좋게 제품 페이지를 설정하는 것을 잊지 마십시오.
  • Elementor의 타이포그래피 옵션을 탐색하여 모든 위젯에서 다양한 텍스트 요소를 변경합니다.
  • 완전히 디자인된 블록과 템플릿을 사용하면 제품 페이지를 빠르게 설정할 수 있습니다.
  • 맞춤형 쇼핑 페이지와 제품 페이지가 서로 맞는지 확인하십시오.
  • 제품 페이지를 사용자 정의하고 제품에 대한 빠르고 직접적인 체크아웃 옵션을 활성화하는 것을 고려하십시오.

Elementor 및 WooCommerce를 최대한 활용하는 방법에 대한 자세한 내용은 다음 가이드를 확인하는 것이 좋습니다.

  • Elementor에서 WooCommerce Shop 페이지를 사용자 정의하는 방법은 무엇입니까?
  • Elementor로 메가 메뉴를 만드는 방법은 무엇입니까?

Elementor를 사용하여 제품 페이지를 사용자 정의하는 방법에 대해 질문이 있습니까? 아래 의견 섹션에서 알려주십시오! 기꺼이 도와드리겠습니다.