Elementor에서 Simplio3D WordPress 플러그인 사용하는 방법

Simplio3D WordPress 플러그인에는 별도의 Elementor 위젯이 없으며, 그럴 필요도 없습니다. 모든 Simplio3D 블록은 쇼트코드이기도 하며, 블록당 하나의 위젯으로 Elementor의 자체 쇼트코드 위젯을 사용해 배치할 수 있습니다. 쇼트코드는 블록과 정확히 동일한 내용을 표시하므로, Elementor의 제품 구성기는 WordPress 블록 편집기에서 만든 구성기와 동일하게 작동합니다. 즉, 모든 위젯이 하나의 실시간 구성을 공유하며 3D 툴바, 치수, AR, 실시간 가격, 요약, 견적 요청 및 WooCommerce 장바구니를 제공합니다.

이 가이드에서는 ID 찾기, 레이아웃 만들기, 장바구니 추가 및 일반적인 오류 해결까지의 간단한 과정을 다룹니다. 플러그인 버전 2.0.3을 기준으로 작성되었으며 Elementor 무료 버전에서 사용할 수 있습니다.

시작하기 전에

• WordPress.org 플러그인 디렉터리에서 제공되는 Simplio3D 플러그인 버전 2.0.3 이상이 필요하며, Simplio3D v3 모드로 실행되어야 합니다. 새로 설치하면 이 모드로 시작됩니다. 버전 1.x에서 업데이트한 사이트는 Simplio3D → 마이그레이션에서 전환하기 전까지 레거시 모드로 유지됩니다.
• Simplio3D 계정 연결: WordPress에서 Simplio3D → Simplio3D에 로그인으로 이동합니다.
• 게시된 프로젝트: Simplio3D에서 공유를 열고 공유 링크를 켠 뒤 비밀번호 없이 유지합니다. 임베드 도메인을 제한하는 경우 사이트 도메인을 추가하세요.
• Elementor. 무료 버전으로 충분합니다.
• 장바구니에 추가하려면: WooCommerce 및 가격이 설정된 단순 상품이 필요합니다.

WooCommerce로 장바구니에 추가하기

블록 편집기에서는 장바구니에 추가 블록에서 상품을 선택하면 프로젝트에 연결됩니다. 쇼트코드에서는 이 작업을 할 수 없으므로 먼저 직접 상품을 연결해야 합니다.

1. 상품에서 정가가 설정된 단순 상품을 편집합니다.
2. 상품 데이터 → Simplio3D를 열고 Simplio3D 프로젝트를 해당 프로젝트로 설정한 다음, 장바구니 가격을 Simplio3D 계산 가격(서버 측 검증 완료) 또는 상품 자체의 WooCommerce 가격으로 설정합니다. 업데이트를 클릭합니다.
3. 상품 ID를 확인합니다. 상품 목록에서 상품 위에 마우스를 올리거나 편집 화면 주소 표시줄의 post=123을 확인하세요.
4. 제출 위젯을 [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]로 교체합니다. 구매자가 수량을 선택할 수 있도록 quantity_mode="selector"을 추가하고, 장바구니로 이동시키려면 after_add="cart"을 추가합니다.

이제 장바구니, 결제, 주문 이메일 및 WooCommerce → 주문에 구성 내용, 해당 이미지 및 검증된 가격이 표시됩니다.

Simplio3D 가격과 연결된 상품은 구성기를 통해서만 구매할 수 있으므로, 상품 페이지의 WooCommerce 일반 장바구니 추가 버튼은 구매자에게 먼저 구성을 완료하도록 안내합니다. Elementor 무료 버전에서는 구성기를 별도 페이지에 두고, 짧은 설명의 “나만의 제품 구성하기” 링크처럼 상품 페이지에서 해당 페이지로 연결하세요. Elementor Pro에서는 Elementor의 장바구니 추가 위젯 대신 Simplio3D 쇼트코드 위젯을 사용하는 단일 상품 템플릿을 만들 수 있습니다. 공개하기 전에 이 설정을 미리 확인하세요.

가장 자주 사용하는 설정

쇼트코드 내부에 큰따옴표와 밑줄을 사용하여 설정을 추가하세요. Word, Google Docs 또는 Slack에서 복사하면 따옴표가 곡선 따옴표로 바뀔 수 있으며, 그러면 WordPress이 설정을 무시합니다.

• 뷰어의 height="620px" mobile_height="400px"은 데스크톱과 너비 781px 이하 화면에서 높이를 설정합니다.
• 페이지 상단의 뷰어에 loading="eager"을 사용하면 화면에 스크롤되어 들어올 때가 아니라 즉시 로드됩니다.
• 옵션 위젯의 layout="dropdown"은 선택 항목을 드롭다운으로 전환합니다. 옵션 유형에 따라 grid, list, buttons도 사용할 수 있습니다.
• columns="4" thumbnails="small"을 사용하면 각 행에 더 많은 선택 항목을 표시할 수 있습니다.
• 가격의 prefix="From" tax_display="exclude"은 가격 앞에 텍스트를 추가하고 세전 가격을 표시하며, 이는 WooCommerce 장바구니와 일치합니다.
• 요약의 summary_mode="compact" hide_defaults="yes"은 각 옵션을 한 줄에 표시하고 기본값으로 남은 옵션은 제외합니다.
• 뷰어의 display="hosted"은 옵션을 포함한 전체 Simplio3D 구성기를 하나의 위젯에 표시하므로 옵션 ID가 필요하지 않습니다.
• 동일한 세트의 모든 위젯에 instance="oak"을 사용하면 한 페이지에 있는 두 구성기를 분리할 수 있습니다. 같은 인스턴스를 사용하는 위젯은 하나의 구성을 공유합니다.

Elementor 디자인에 맞추기

• 각 쇼트코드 위젯의 고급 탭에서 여백, 안쪽 여백, 배경, 테두리 및 반응형 표시 여부를 설정할 수 있습니다. 뷰어는 열을 가득 채우므로, 더 넓게 또는 좁게 만들려면 열이나 컨테이너 너비를 설정하세요.
• 블록은 페이지의 글꼴과 텍스트 색상을 사용합니다. 강조 색상(선택된 항목, 포커스 링 및 버튼)은 Hello Elementor 같은 클래식 테마에서 거의 검은색으로 기본 설정되므로, 외모 → 사용자 정의하기 → 추가 CSS에서 Elementor 강조 색상으로 설정하세요: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• 기타 속성으로는 모서리용 --s3d-radius, 썸네일 크기용 --s3d-thumb, 버튼용 --s3d-button-bg이 있습니다. 하나의 위젯만 스타일링하려면 쇼트코드에 class="my-finish"을 추가하고 CSS에서 .my-finish을 대상으로 지정하세요.