개인화 된 상점 페이지를 만드는 방법을 배우고 싶습니까? WooCommerce 엘리멘터와?
아시다시피 Elementor Pro에는 빌더 기능이 함께 제공됩니다. WooCommerce 당신을 허용 웹 사이트 만들기 개인화된 전자상거래의 WooCommerce 코딩 없이. 이 기능을 사용하면 직관적인 인터페이스를 제공하는 Elementor의 시각적 편집기를 사용하여 사용자 정의 WooCommerce 페이지를 만들 수 있습니다.
참조 : WordPress에 Elementor를 설치하는 방법
이 글을 쓰는 시점에서 스토어 페이지, 상품 페이지, 상품 아카이브 페이지(태그 및 카테고리)에 대한 커스텀 페이지를 생성할 수 있습니다. 곧 결제 페이지와 장바구니 페이지에 대한 사용자 정의 페이지를 만들 수도 있습니다.
이 기사에서는 Elementor Pro의 WooCommerce 빌더 기능을 사용하여 맞춤형 WooCommerce 스토어 페이지를 만드는 방법을 보여줍니다.
상점 페이지 자체는 WooCommerce의 기본 페이지 중 하나입니다. 이 페이지는 귀하의 제품을 전시하는 쇼케이스 역할을 합니다. 다음으로 이동하여 이 페이지에 액세스할 수 있습니다. yoursite.com/store. 기본적으로 WooCommerce 스토어 페이지에는 WooCommerce 제품만 표시됩니다.
Elementor Pro를 사용하여 사용자 정의 상점 페이지를 생성하면 요소를 추가하여 상점을 더 매력적으로 만들 수 있습니다.
Elementor로 WooCommerce 스토어의 사용자 정의 페이지를 만드는 방법
WooCommerce 스토어의 사용자 정의 페이지를 만드는 데 사용할 수 있는 Elementor 위젯이 두 개 이상 있습니다. 아카이브 제품 과 제품.
이 예에서는 후자를 사용합니다.
위젯의 기능 제품 위젯과 매우 유사합니다. 게시물. 차이점은 제품 위젯은 WooCommerce 제품을 표시하는 데 사용되는 반면 게시물 위젯은 블로그 게시물을 표시하는 데 사용된다는 것입니다.
읽기 : Elementor에서 모델을 가져오거나 내보내는 방법
WooCommerce 플러그인이 설치 및 활성화된 경우에만 제품 위젯을 찾을 수 있습니다.
Elementor Pro를 사용하여 맞춤형 WooCommerce 스토어 페이지 생성을 시작하려면 다음으로 이동하십시오. 처음 à 템플릿 -> 테마 빌더 WordPress 대시보드에서. 탭을 클릭하십시오 제품 아카이브 테마 빌더 페이지의 버튼을 클릭합니다. ajouter 제품 아카이브.
모델 이름을 지정하고 버튼을 클릭하십시오. 모델을 만드십시오.
템플릿에서 사용자 정의 상점 페이지를 생성하려는 경우 선택할 수 있는 세 가지 사용자 정의 상점 페이지 템플릿이 있습니다. 사용자 정의 상점 페이지를 처음부터 구축하려는 경우 템플릿 라이브러리를 닫으면 됩니다.
참조 : Elementor에서 색상 샘플러를 사용하는 방법
이 예에서는 사용자 지정 상점 페이지를 처음부터 만듭니다. 위에서 언급했듯이 제품 위젯을 사용하여 제품을 표시합니다.
제품 위젯을 편집 상자에 추가하기 전에 섹션과 열을 추가하여 레이아웃을 정의할 수 있습니다. 레이아웃이 준비되면 제품 위젯을 편집 상자로 끌어다 놓기만 하면 됩니다.
보시다시피 제품 위젯은 최신 WooCommerce 제품을 자동으로 로드하고 표시합니다. 블록을 열어 쿼리를 수정할 수 있습니다. 질문 탭 아래 내용 설정 패널에서. 다섯 가지 옵션 중에서 선택할 수 있습니다.
- 현재 쿼리 - 현재 쿼리
- 최신 제품 - 최신 제품
- 세일 - 세일
- 추천 - 추천
- 수동 선택 - 수동 선택
제품이 표시되는 순서를 설정하거나 특정 제품을 제외할 수도 있습니다.
열과 행의 수를 설정하려면 블록을 열 수 있습니다 내용 탭 아래 함유량. 이 블록에서 활성화할 수도 있습니다. 쪽수 매기기.
제품 위젯에 대한 최상의 설정을 얻을 때까지 설정 패널을 가지고 놀 수 있습니다. 제품 위젯 사용이 끝나면 페이지에 더 많은 위젯을 추가할 수 있습니다.
읽기 : Elementor에서 색상 선택기를 사용하는 방법
페이지 편집이 완료되면 버튼을 클릭할 수 있습니다. 게시 설정 패널 하단에 있습니다.
버튼을 클릭하여 표시 조건 추가 조건을 추가합니다. 사용자 정의 상점 페이지를 만들고 싶기 때문에 옵션을 선택하십시오 가게 페이지를 참조하십시오. 버튼을 클릭 저장 및 닫기 변경 사항을 저장합니다.
지금까지 Elementor Pro를 사용하여 맞춤형 WooCommerce 스토어 페이지를 성공적으로 만들었습니다. 당신은 갈 수 있습니다 귀하의 site.com/store에서 결과를 확인하기 위해.
제품 위젯 사용자 정의
페이지를 게시하기 전에 제품 위젯을 사용자 정의하여 더 매력적으로 만들 수 있습니다. 이렇게 하려면 편집 상자에서 위젯을 클릭하고 탭으로 이동합니다. 스타일 설정 패널에서. 다음과 같이 XNUMX개의 블록을 열 수 있습니다.
제품
이 블록을 열어 열과 행 사이의 간격을 정의할 수 있습니다. 이 블록에서 제품 제목, 제품 가격, 제품 등급, 제품 등급 등과 같은 제품 요소의 텍스트 색상뿐만 아니라 타이포그래피(글꼴 패밀리, 글꼴 크기 등)도 설정할 수 있습니다. 제품 이미지의 테두리도 설정할 수 있으며,
- 보물상자
여기서 Box는 각 제품의 컨테이너를 의미합니다. 블록을 열 수 있습니다. 보물상자 컨테이너의 테두리 너비, 테두리 반경을 정의하려면, 상자의 그림자, 배경색, 테두리 색 등
- 쪽수 매기기
옵션을 활성화하면 쪽수 매기기 블록에서 함유량, 당신은 블록을 열 수 있습니다 쪽수 매기기 탭 아래 스타일 페이지 매김을 사용자 정의합니다. 간격, 테두리 색상, 배경색 등을 설정할 수 있습니다.
또한 각 상태(일반, 포인팅 및 활성)에 대해 서로 다른 매개변수를 정의할 수 있습니다.
- 더티 플래시
WooCommerce에 새 제품을 추가할 때 판매 가격 속성을 설정하여 방문자에게 관련 제품이 할인되었음을 표시할 수 있습니다. 이를 강조하기 위해 할인된 제품에 판매 배지가 포함되도록 상점 페이지에 판매 속성을 표시할 수 있습니다.
블록을 열 수 있습니다. 더티 플래시 판매 배지를 개인화합니다. 텍스트 색상, 배경 색상, 타이포그래피, 테두리 반경, 크기(너비 및 높이), 거리 등과 같은 요소를 정의할 수 있습니다.
결국
WooCommerce Builder는 Elementor Pro에서 제공하는 기능 중 하나입니다. 그것은 당신이 할 수 있습니다 웹 사이트 만들기 WooCommerce가 있고 코딩이 필요 없는 개인화되고 고유한 전자 상거래 플랫폼입니다. 설치할 필요가 없습니다 워드 프레스 테마 WooCommerce를 위해 설계되었다고 주장합니다. 대신 Elementor의 비주얼 편집기를 사용하여 사용자 정의 WooCommerce 페이지를 직접 만들 수 있습니다.
읽기 : Elementor에서 구분선을 추가하여 섹션을 만드는 방법
버전 3.2.2까지 Elementor Pro에서는 사용자 지정 쇼핑 페이지, 사용자 지정 단일 제품 페이지 및 사용자 지정 제품 아카이브 페이지만 만들 수 있습니다. 그러나 Elementor는 Elementor Pro의 다음 버전에서 사용자 지정 장바구니 페이지, 사용자 지정 체크아웃 페이지 및 사용자 지정 고객 계정 페이지도 만들 수 있다고 발표했습니다.
지금 Elementor Pro를 받으세요!
결론
여기 ! Elementor를 사용하여 WooCommerce 스토어에 대한 사용자 지정 페이지를 만드는 방법을 보여주는 이 기사는 여기까지입니다.. 가는 방법이 걱정되시면 f에서 알려주십시오. commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
