內容簡介
**總結文案:**
Step Kit OS 是一款全面的 WooCommerce 外掛，為您的線上商店帶來了 3D 產品自定義功能。它允許顧客通過交互式 iframe 介面即時個性化產品，創造獨特的購物體驗。
**問題與答案:**
1. Step Kit OS 的主要功能有哪些？
- 無縫與 WooCommerce 整合
- 交互式 3D 產品自定義介面
- 即時產品預覽
- 支持自定義產品屬性（尺寸、名稱、號碼、簽名、徽章）
- 基於自定義選項的動態定價
- 跨會話持久的購物車功能
- 手機響應式設計
- 支持訪客用戶並具有正確的會話處理
- 在購物車和訂單中顯示自定義元數據
- 自動購物車更新和片段刷新
- 登入/登出期間的會話持久性
2. 如何設置產品？
- 建立所需的產品，其中包括主套件、次套件和第三套件。
- 為每個產品添加“尺寸”屬性並設定價格等必填字段。
- 儲存每個產品並記下它們的 ID（在編輯時顯示於 URL 中）。
3. 如何配置產品 ID？
- 前往 https://simuladorfeirense.vercel.app/admin。
- 在各自的輸入字段中輸入產品 ID：主套件 ID、次套件 ID 和第三套件 ID。
- 點擊“保存”以儲存配置。
4. 如何創建模擬器頁面？
- 建立一個新頁面並將 slug 設置為“simulador”。
- 在頁面內容中添加短碼 [custom_iframe]。
- 發佈頁面。
5. 如何添加模擬器按鈕？
- 編輯您的產品頁面。
- 在您希望出現自定義按鈕的位置添加短碼 [simulator_button]。
- 更新產品頁面。
6. 如何進行測試？
- 拜訪您商店的產品頁面。
- 點擊由 [simulator_button] 短碼創建的“Customizar Camisola”按鈕。
- 您將被重定向至 /simulador 頁面。
- 測試自定義功能，包括選擇不同套件、選擇尺寸、添加自定義文本、號碼、簽名和徽章，並預覽自定義。
7. 如何完成測試？
- 點擊“Add to Cart”。
- 拜訪購物車頁面以確認自定義是否正確顯示。
- 繼續結帳以確保自定義出現在訂單中。
外掛標籤
開發者團隊
原文外掛簡介
Step Kit OS is a comprehensive WooCommerce plugin that brings 3D product customization capabilities to your online store. It allows customers to personalize products in real-time through an interactive iframe interface, creating a unique shopping experience.
Key Features:
– Seamless integration with WooCommerce
– Interactive 3D product customization interface
– Real-time product preview
– Custom product attributes support (size, name, number, signature, badge)
– Dynamic pricing based on customization options (separate pricing for name and number)
– Flexible number pricing (fixed price or per-digit pricing)
– Persistent cart functionality across sessions
– Mobile-responsive design
– Guest user support with proper session handling
– Custom meta data display in cart and orders
– Automatic cart updates and fragment refresh
– Session persistence during login/logout
– Automatic simulator button injection on product pages
– Enhanced security with proper nonce verification
The plugin provides a complete solution for stores looking to offer customizable products with a modern, interactive interface.
Product Setup
Create Required Products:
Create four Variable Products in WooCommerce:
Main Kit
Secondary Kit
Third Kit
Goalkeeper Kit
For each product:
Add the “size” attribute with variations (e.g., S, M, L, XL)
Set prices and other required fields
Publish the products
Configure Product IDs:
Go to WooCommerce > Step Kit OS in your WordPress admin
In the “Product Configuration” section:
Select your products from the dropdown menus for each kit type
The dropdowns automatically show all published WooCommerce products
Save your settings
Create Simulator Page:
Create a new page with the slug “simulador”
Add the shortcode [custom_iframe] to the page content
Publish the page
Add Simulator Button:
Edit your product pages
Add the shortcode [simulator_button] where you want the customization button to appear
Or enable automatic button injection in the plugin settings
Update the product pages
Shortcodes
[custom_iframe] – Displays the customization iframe
[simulator_button] – Displays the simulator button
Shortcode Parameters:
For [custom_iframe]:
– height – Iframe height (default: 100vh)
– width – Iframe width (default: 100%)
– border – Border style (default: none)
– product_id – Specific product ID (optional)
For [simulator_button]:
– label – Button text (default: “Customizar Camisola”)
– class – CSS classes for styling
– product_id – Specific product ID (optional)
Testing
Visit your store’s product page
Click the “Customizar Camisola” button (created by the [simulator_button] shortcode or automatic injection)
You will be redirected to the /simulador page
Test the customization features and complete the purchase flow
