요소를 사용하여 사용자 정의 WooCommerce 제품 페이지를 만드는 방법

요즘 요소는 최고의 페이지 빌더 중 하나입니다. Page Builders의 기능을 사용하여 웹 사이트를 만드는 것은 매우 쉽습니다.

그러나 미리 메이드 디자인을 제공하지만 직접 만들고 싶다면 Elementor의 드래그 앤 드롭 빌더는 모든 작업을 매우 쉽게 만듭니다. 따라서 윈윈 상황입니다.

그건 그렇고, 제품 페이지는 거의 모든 전자 상거래 사이트에서 찾을 수 있지만 사이트 소유자가 제품을 다르게 표시해야 할 때 맞춤형 WooCommerce 제품 페이지가 구축됩니다.

사이트를 설계하는 동안 사용자 정의 WooCommerce 페이지를 만들 수 있습니다.

이 블로그에서는 WordPress 웹 사이트에서 Elementor Page Builder를 사용하여 사용자 정의 WooCommerce 제품 페이지를 만드는 방법을 볼 수 있습니다.

맞춤형 WooCommerce 제품 페이지를 만들려면 어떤 도구

이 블로그에는 Elementor 플러그인이 필요합니다. 이 외에도 Elemento Addons도 필요합니다.

Elementor는 페이지 건설 프로세스를 쉽게 만들고 Elemento Addon은 위젯과 추가 기능을 위젯에 추가하여 요소의 전력을 확장하는 데 도움이됩니다.

Elemento Addons에는 작동과 부드러움 때문에 사용하기에 불법적 인 위젯이 있습니다.

그래서 지금 시작합시다.

요소를 사용하여 사용자 정의 WooCommerce 제품 페이지를 만드는 방법

먼저 두 플러그인을 설치하겠습니다.

요소 플러그인 설치

1 단계) 대시 보드를 엽니 다

WordPress 대시 보드에 로그인하십시오.

2) 플러그인으로 이동하여 새 플러그인 추가를 클릭하십시오.

대시 보드에는 왼쪽에 여러 메뉴가 표시됩니다. 플러그인으로 이동하여 새 플러그인 추가를 클릭하십시오.

3 단계) 검색 창으로 이동하여 요소를 검색하십시오.

이 페이지에는 플러그인이 있습니다. 검색 창으로 이동하여 요소를 검색하십시오.

4 단계) 요소를 설치하고 활성화하십시오

요소를 검색 한 후 플러그인 목록에 나타납니다. 설치 버튼을 클릭하고 설치 후 활성화 버튼을 클릭하여 Elementor 플러그인을 활성화하십시오.

Elemento Addons 플러그인 업로드

먼저 Themehunk에서 Elemento Addons를 다운로드하십시오.

Elemento Addons 페이지로 이동하여 플러그인을 구입하십시오. Elemento Addons를 얻기 위해 도움이 필요한 경우이 튜토리얼을 볼 수 있습니다.

1 단계) 대시 보드를 열고 플러그인 페이지로 이동하십시오.

동일한 단계를 반복하고 플러그인 페이지에 도달하십시오.

2 단계) 플러그인 업로드를 클릭하십시오

왼쪽 상단으로 이동하여 플러그인 업로드를 클릭하십시오.

3 단계) Elemento Addons를 업로드하십시오

지금 설치를 클릭 한 다음 플러그인을 활성화하십시오 .

두 플러그인 모두 설치되어 이제 더 진행할 수 있습니다.

WooCommerce 사용자 정의 제품 페이지 작성

1 단계) 새 페이지를 만듭니다

대시 보드로 이동하여 페이지를 클릭 한 다음 새 페이지 추가를 클릭하십시오.

2) '요소와 함께 편집'을 클릭하십시오.

상단 막대에는 요소가있는 편집 버튼이 있습니다. 클릭하십시오.

그런 다음 페이지가 요소와 함께 열립니다. 이 페이지에서 Elementor 위젯에 액세스하고 사용할 수 있습니다.

우리는 두 개의 구획이 필요하므로 먼저 양면이있는 컨테이너를 가져갑니다.

제품 페이지에서 우리가 넣을 가장 중요한 것 중 하나는 이미지입니다. 이미지 위젯을 찾아 왼쪽 컨테이너에 넣으십시오.

이제 제품의 이미지를 설정하십시오.

이제 오른쪽으로 오세요. 제목을 입력하려면 검색하고 두 번째 컨테이너에 삽입하십시오.

제목에 제품 이름을 입력하십시오.

같은 방식으로, 우리는 제품의 가격을 쓸 것입니다. 가격을 작성하려면 제목 아래에 텍스트 편집기 위젯을 삽입하고 제품의 가격을 작성하십시오.

제품 페이지에는 제품에 대한 간단한 설명이 있습니다. 추가하려면 텍스트 편집기를 다시 삽입하고 제품에 대한 간단한 설명을 작성하십시오.

이제 카트 버튼을 추가 할 시간입니다. 이번에는 더 많은 기능과 기능이 있기 때문에 Elemento Addons의 카트 위젯을 사용할 것입니다.

카트에 추가를 검색하고 컨테이너에 삽입하십시오.

CART 버튼 설정에서 제품 이름을 검색하고 제품 섹션에서 제품을 선택하십시오. 그런 다음 사용자가 카트 버튼을 클릭하면 카트에 직접 추가됩니다.

Sku ID를 추가하려면 다른 위젯을 추가 한 것과 같은 방식으로 할 수 있습니다. 여기에 텍스트 편집기를 삽입하고 제품의 SKU를 작성하십시오.

제품 페이지의 중요한 부분 중 하나는 소셜 공유 버튼이있는 것입니다. 이 페이지에 소셜 공유 버튼을 추가 할 수 있습니다.

소셜 아이콘을 검색하고 페이지에 넣으십시오.

더 이상 소셜 핸들 버튼을 추가하려면 새 추가를 클릭하고 새 버튼을 추가하십시오. 아이콘 변경 및 링크 및 색상 편집과 같은 몇 가지 변경 사항을 수행 할 수 있습니다.

같은 방식으로 여기에 다른 것을 추가 할 수 있습니다.

기본 설명을 제공하려면 텍스트 편집기를 추가하고 설명을 작성하십시오.

체계적이고 체계적으로 보이는 컨테이너 외부의 주요 설명을 추가했습니다.

사용자가 제품 페이지를 방문하면 관련 제품을 확인하여 확인할 수 있습니다.

따라서 관련 제품을 추가하려면 먼저 제목을 추가하고 Elemento Addons의 제품 슬라이더를 검색하십시오.

이것은 사용자 정의 Woocommerce 제품 페이지를 추가 할 수있는 방법입니다. 이제 페이지의 미리보기를 볼 시간입니다.

제품 페이지는 몇 가지 간단한 단계 내에도 만들 수 있습니다. 이를 위해서는 Elemento Addons 위젯이 필요합니다.

어떻게 끝났는지 보자.

사용자 정의 관련 제품 페이지를 사용하십시오

요소로 편집을 클릭하면 왼쪽으로 이동하여 요소 위젯을 찾을 수 있습니다.

아래로 스크롤하여 Elemento Addons 로 이동하십시오.

테마 사전 제품을 찾고 위젯을 드래그하고 페이지에서 떨어 뜨립니다.

위젯을 떨어 뜨리면 사용자 정의 설정이 왼쪽 막대에 나타납니다. 애드온의 설정과 모양을 편집 할 수 있습니다.

그러나 사이트의 모양을 변경하려면 내용 외에 스타일을 클릭하십시오.

스타일 섹션에서는 색상, 타이포그래피 및 기타 추가 설정을 변경할 수 있습니다.

모든 변경 사항을 작성하고 페이지를 설정 한 후 게시를 클릭하십시오.

이제 사이트를 미리 봅니다 .

여기에서 Custom Woocommerce 제품 페이지에서 Elemento Addons의 제품 위젯의 도움으로 제품을 추가했습니다.

제품은 페이지에 표시됩니다. 단일 제품 페이지를 미리 보자.

그렇습니다. 맞춤형 WooCommerce 제품 페이지가 구축되었습니다.

FAQ

결론

그래서 우리는 Elementor를 사용하여 사용자 정의 Woocommerce 제품 페이지를 추가하는 방법을 배웠습니다. 우리가 Elemento Addons 플러그인을 사용했을 때, 제품을 추가하고 페이지에 보여줄 수있게되었습니다.

Elemento Addons에는 웹 사이트 구축을위한 애드온이 너무 많습니다. 위젯뿐만 아니라 위젯의 기능도 알려져 있습니다.

특정 기능을 홍보하려면 사용자 정의 WooCommerce 제품 페이지가 필요할 수 있습니다. 일반적으로 템플릿에는 그러한 페이지가 없으므로 자체 페이지를 만들어야합니다.

이 블로그가 도움이되기를 바랍니다. 그래도 쿼리 나 제안이 있으면 의견 섹션에 알려주십시오.
YouTube 채널 을 구독 할 수 있습니다. 또한 훌륭한 콘텐츠를 업로드하고 Facebook 및 Twitter 에서도 팔로우하십시오.

더 많은 기사를 발견하십시오

• 쉬운 단계에서 WordPress 로그인 URL (Custom URL)을 변경하는 방법
• WordPress에서 사용자 정의 404 오류 페이지를 만드는 방법 (Easy Guide)
• 더 쉬운 제품 발견을 위해 WooCommerce에 사용자 정의 검색 바를 추가하는 방법