Elementor의 WooCommerce 제품 캐러셀: 작동하는 세 가지 방법

마스터 애드온 WooCommerce 제품 캐러셀 위젯이 없습니다. 그게 솔직한 대답이고,그것은 당신에게 설치를 저장합니다.

작동하는 것은 세 가지 경로입니다. Elementor Pro 의 루프 회전 목마는 라이브 제품 쿼리를 실행하는 유일한 것이므로 스트립이 카탈로그를 따라야하는 경우 선택하십시오. 무료 Quadrant Paged Catalog 디자인은 뒤에 쿼리가없는 손으로 선별 한 9 가지 항목 쇼케이스를 제공합니다. 그리고 Master Addon 의 주요 제품 위젯은 제품 사진을 다루는 무료 이미지 회전 목마로 한 제품을 조명합니다. 세 가지 모두 더 넓은 안쪽에 앉습니다 Elementor 캐러셀 위젯 가족; 가게 전체를 정리하고 있다면, woocommerce를 위한 최고의 Elementor 애드온 검거는 나머지를 덮습니다.

아래: 각 제품이 어떻게 제작되는지, 대부분의 튜토리얼은 제품 캐러셀의 판매 비용이 적극적으로 드는 부분을 건너뜁니다.

어떤 방법을 선택할 것인가

• Elementor Pro가 있으며 스트립은 재고, 가격 및 새로 도착한 제품을 추적해야 합니다 → 루프 회전목마. 진짜 답이다.
• 마지막 복사본 줄까지 제어할 수 있는 손으로 쓴 카드 9장을 원합니다 → Quadrant Paged Catalog, 무료.
• 당신은 하나의 제품을 열심히 밀어 붙이기를 원합니다 → 주요 제품, 프로.
• 트랙에 제품 사진이 필요하기만 하면 됩니다 → 이미지 회전목마, 무료.

방법 1: Elementor Pro의 루프 회전목마

Elementor Pro 는 기본적으로 이 문제를 해결하므로 여기에서 시작하십시오. The 루프 회전목마 loop Item 템플릿,한 번 디자인한 제품 카드 한 장을 가져와 WooCommerce 쿼리를 가리킵니다. 제품을 추가하고,가격을 변경하고,크기에서 매진하면,캐러셀은 아무도 편집기를 열지 않고 이를 반영합니다. 애드온이 포함되지 않습니다.

1. Loop Item 템플릿을 빌드합니다. 템플릿 → 테마 빌더 → 루프 아이템, 소스가 제품으로 설정됨 동적 태그를 사용하여 이미지, 제목, 가격, 등급 및 버튼을 배치합니다.
2. 페이지에 루프 회전목마 위젯을 놓습니다 그리고 그 템플릿을 선택합니다.
3. 쿼리를 설정합니다. 출처는 실제 작업이 이루어지는 곳입니다: 모든 제품,카테고리, 태그,판매 중,특집 또는 수동 선택. 그런 다음 날짜,가격, 인기 또는 메뉴 순서로 주문하십시오.
4. 불러올 수를 설정합니다. 이것은 회전목마가 들고 있는 총합이지 몇 개가 보이는지가 아닙니다. 여덟 개에서 열두 개가 관련 제품 스트립에 어울립니다. 네 개가 보이는 네 개를 로드하면 스크롤할 것이 없습니다.
5. 없어야 할 것은 제외하라. 품절된 품목, 그리고 단일 제품 페이지에는 현재 제품이 있습니다. 이미 보고 있는 제품이 포함된 관련 제품 스트립이 깨진 것으로 읽혀집니다.
6. 중단점당 보기당 슬라이드를 설정합니다. 데스크톱에 4개, 태블릿에 3개, 모바일에 1.5개.

그 “모바일에서 하나 반”은 오타가 아닙니다. 전체 카드와 다음 카드의 절반은 스트립 스크롤의 가장 강한 신호입니다. 너비를 채우는 카드 하나는 정적 블록처럼 보이며 대부분의 사람들은 결코 스 와이프하지 않습니다.

캐치는 라이센스입니다. 루프 회전목마는 Pro 전용이며 Elementor 코어에는 무료 등가물이 없습니다. 캐러셀 플러그인 검거 쿼리 컨트롤과 무료 해결 방법을 자세히 살펴봅니다.

방법 2: Quadrant Paged Catalog(무료)를 사용하여 직접 큐레이팅했습니다

라이브 쿼리는 때때로 정확히 잘못되었습니다. 모든 줄을 직접 작성하려는 홈페이지 컬렉션이나 WooCommerce 를 전혀 실행하지 않는 사이트의 제품 쇼케이스는 직접 선택한 카드를 원합니다.

Quadrant Paged Catalog는 무료로 가져올 수 있는 8개 카탈로그 중 하나입니다 위젯 빌더 디자인: 한 번에 세 페이지씩 페이징된 9 개의 항목 상자로 구성된 격자, 현재 위치를 표시하고 페이지 사이를 점프하는 세그먼트 레일 각 상자에는 이미지, 카테고리 라벨, 제목, 복사본 줄 및 통계가 모두 손으로 입력되어 있으며 이것이 포인트입니다.

라이브 데모 위젯 JSON 다운로드

그것은 마스터 애드온을 통해 무료 플러그인에 가져 → 위젯 빌더 → 위젯을 가져 오기, 다음 즐겨찾기 아래의 Elementor에 나타납니다. 세트의 나머지, 그들 중 여덟과 스무 디자인은 무료, 에 있습니다 무료 Elementor 슬라이더 템플릿 검거.

정직한주의 사항: 9 가지 항목,고정. 제품 쿼리가 아닙니다. 아무것도 주식을 추적하지 않으며 가격을 업데이트하지 않으며 매진 된 항목은 상자를 편집 할 때까지 거기에 있습니다. 거의 변경하지 않는 큐레이팅 된 세트에 사용하십시오. 카탈로그를 따라야하는 모든 것은 방법 1 로 돌아갑니다.

방법 3: 주요 제품 및 사진용 이미지 캐러셀

마스터 애드온은 정확히 하나의 WooCommerce 위젯을 가지고 있으며,그것은 회전 목마가 아닙니다. The 주요 제품 위젯 프로이며, 다른 작업을 수행합니다: 하나의 제품, 주어진 방, 이미지, 제목, 가격, 설명 및 구매 버튼이 스트립의 카드가 아닌 블록으로 배치되어 있습니다.

어쨌든 더 나은 모양인 경우가 많습니다. 주변에 공간이 있는 단일 제품은 누군가가 스크롤해야 하는 4 장의 카드 중 하나와 동일한 제품보다 더 세게 변환됩니다. 출시,베스트셀러 또는 랜딩 페이지가 구축된 하나의 항목에 사용합니다.

트랙(동일한 재킷의 6개 각도, 룩북, 재료 스트립)에서 제품 사진을 찍는 경우 무료입니다 이미지 회전목마 처리합니다. 라이트박스,캡션, 장치별 슬라이드-당-뷰. 그 각도 중 일부가 스틸이 아닌 클립인 경우,the 비디오 회전 목마와 갤러리 슬라이더 가이드 재생을 처리하는 위젯을 다룹니다.

아닌 것에 대해 명확히하십시오: 이미지를 직접 추가하면 링크를 손으로 설정하지 않으면 제품에 연결되지 않습니다. 샵 피드가 아닌 사진 회전 목마입니다.

제품 회전목마가 속한 곳

어떤 방법을 사용하든 4가지 위치가 안정적으로 작동합니다:

• 단일 제품 페이지의 관련 제품. 방문자는 이미이 범주에 관심이 있습니다. 4 가지 대안의 슬라이딩 스트립은 서비스입니다.
• 교차 판매 및 “모양을 완성하십시오.” 주요 제품 아래의 액세서리. 아무도 열두 가지를 모두 볼 필요가 없습니다; 그들은 열두 가지가 존재한다는 것을 알아야 합니다.
• 홈페이지의 특집 또는 계절별 컬렉션입니다. 철저하지 않고 선별되었습니다.
• 최근 본. 작고 개인적이며 회전목마는 자연스러운 형태입니다.

공유 내용: 제품은 다음과 같습니다 선택사항. 스트립에 아무도 손을 대지 않으면 페이지는 여전히 작동합니다.

판매 비용이 드는 곳

상점이나 카테고리 페이지에 회전목마를 넣지 마세요.

바로 잡을 수 있는 것입니다. 카테고리 페이지가 존재하므로 사람들이 비교할 수 있습니다: 격자를 스캔하고,원하는 것을 발견하고,클릭하십시오. 회전목마는 4 개의 제품을 보여주고 나머지는 화살표 뒤에 숨겨서 비교를 기억 연습으로 바꿉니다. 방문자는 제품 6 을 보면서 제품 2 를 머리에 들고 있어야 합니다.

프레젠테이션 비용도 있습니다. 회전목마와 격자는 동일한 마크업을 출력할 수 있지만,여섯 개의 항목을 눈에 띄게 보여주는 카테고리 페이지는 쇼핑객과 페이지의 깊이를 판단하는 모든 사람에게 얇은 카테고리로 읽혀집니다. 여러분의 샵 페이지는 샵처럼 보여야 합니다.

두 번째 나쁜 위치: 모바일의 접힌 부분 위. 제품 회전목마는 무엇이든이 칠하기 전에 질의, 템플렛 렌더링 및 슬라이더 초기화입니다. 전화 페이지의 정상에, 저것은 회전자에 소비된 당신의 가장 큰 내용 페인트입니다. 정체되는 영웅을 거기 두고 그 밑에 회전목마를 시작하십시오.

장바구니에 추가: 회전목마에 있나요?

간단한 제품의 경우 버튼을 표시합니다. 가변 제품의 경우 숨깁니다.

스트립에 AJAX 추가 카트가있는 간단한 제품은 실제 바로 가기입니다: 한 번의 탭, 페이지로드 없음, 카트 업데이트. 가질만한 가치가 있습니다.

가변 제품은 크기나 색상을 선택하지 않고는 추가할 수 없으므로 버튼이 아무 작업도 수행하지 않거나 쇼핑객을 제품 페이지로 튕겨냅니다. 둘 다 깨진 느낌이 듭니다. 가변 제품의 경우 카드 전체를 링크로 만들고 버튼을 건너뜁니다.

카탈로그가 두 가지를 모두 혼합하는 경우 하나의 타협 레이아웃이 아닌 서로 다른 쿼리로 두 개의 캐러셀을 실행하십시오.

판매 배지 및 가격 표시

세일 배지를 보여주세요. 제품 카드에서 가장 대비가 높은 것이고 사람들이 스크롤을 멈추는 이유입니다.

비교가 설득력이 있기 때문에 판매 품목에 대한 충격적인 원본을 포함하여 가격을 표시합니다.

가변 제품은 범위를 표시합니다 (“£ 20 ~ £ 45”). 장거리 랩 및 브레이크 카드 정렬,수평 스트립의 잘못 정렬 된 카드는 그리드보다 훨씬 더 잘 보입니다. 가격 행에 고정 높이를 설정하거나 “£ 20 에서”를 표시합니다

아마추어같지 않은 카드 디자인

나머지보다 세 가지가 더 중요합니다.

동일한 카드 높이. 제품 제목은 길이가 매우 다양하며 한 줄 제목 옆에 있는 두 줄 제목은 가격 행을 다른 높이로 밀어냅니다. 자르기로 고정된 제목 높이를 설정하거나 자동 높이를 켜서 행이 스스로 수평을 이루도록 합니다.

이미지 종횡비 1개. 같은 스트립에 초상화와 사각형 제품 사진은 제품 회전 목마가 저렴 보이는 하나의 가장 일반적인 이유입니다. 비율을 설정하고 자르도록.

카드 사이의 간격. 16 에서 24px. 영 간격은 제품을 함께 피를 흘리게합니다; 너무 많이 그리고 네 장의 카드는 세트로 읽기를 멈 춥니 다.

제품에 대한 자동 재생?

아니,그리고 이건 선호사항이 아니잖아 The 자동 재생 규칙 클릭할 수 있는 것이 없고 회전 비용이 전혀 들지 않는 영웅 슬라이더의 경우 다릅니다.

제품 카드는 클릭할 수 있습니다. 자동 재생은 누군가가 손을 뻗으면 카드가 움직일 수 있다는 것을 의미하며,잘못된 제품을 두드리는 쇼핑객은 대개 돌아가서 다시 시도하지 않습니다. 그들은 떠납니다. 일시 중지-온-호버 커버 데스크톱; 터치하면 호버가 전혀 없으며 모바일은 대부분의 쇼핑객이 있는 곳입니다.

꺼요.

성능: 제품 캐러셀의 실제 비용은 얼마입니까

쿼리의 모든 제품은 데이터베이스 읽기와 템플릿 렌더링이며 해당 마크업이 존재할 때까지 슬라이더 스크립트를 초기화할 수 없습니다. 세 가지 실제 제한:

• 쿼리를 12로 제한합니다. 그 이상에서는 아무도 도달하지 못하는 카드를 렌더링하고 있습니다.
• 보이는 이미지의 첫 번째 행을 제외한 모든 것을 게으르게 로드합니다. 오프 스크린 슬라이드를 열심히로드하는 것은 느린 제품 페이지의 일반적인 원인입니다.
• 카드 크기로 카드 이미지를 제공하십시오. 300px 카드로 확장 된 2000px 제품 사진은 WooCommerce 사이트에서 가장 일반적으로 낭비되는 다운로드입니다.

페이지 섹션 당 하나의 회전 목마는 합리적인 천장입니다. 홈페이지에 세 겹쳐 쌓인 회전 목마는 전화의 메인 스레드를 놓고 경쟁하는 세 개의 슬라이더입니다.

스키마: 손으로 굴리지 마세요

WooCommerce 는 이미 단일 제품 페이지에 제품 구조화 데이터를 출력하고 있으며 Google 이 원하는 곳입니다. 홈페이지 또는 랜딩 페이지의 제품 카드 캐러셀은 자체 제품 마크업이 필요하지 않으며 손으로 추가하는 것은 실제 제품 페이지와 모순되는 가격 또는 가용성 데이터로 끝나는 좋은 방법입니다.

캐러셀 카드가 제품 페이지에 연결되고 그래야 하는 경우 크롤링 경로는 그대로 유지되며 구조화된 데이터는 해당 경로가 속한 곳에 그대로 유지됩니다. 그대로 두십시오.

자주 묻는 질문

다음

여섯 개의 상품을 나열하는 것이 아니라 여섯 각도에서 한 상품을 촬영하는 것? That's the 이미지 캐러셀 튜토리얼라이트박스와 캡션 측면을 다룹니다.

회전목마 모양의 무료 Pro는 모두 켜져 있습니다 회전 목마 위젯 허브, 그리고 무료 대 Pro 분석 라이센스가 추가하는 내용을 정확하게 보여줍니다.

Quadrant Paged Catalog는 무료로 수입됩니다. 다른 12개의 디자인에는 라이센스가 필요합니다 가격 페이지 각각이 어느 계층에 속하는지 표시합니다.