如何在 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 时，您可以构建单个产品模板，以 Simplio3D 短代码小工具替代 Elementor 的“添加到购物车”小工具；上线前请先预览该设置。

最常用的设置

在短代码中添加设置时，请使用直引号和下划线。从 Word、Google Docs 或 Slack 复制内容可能会将引号转换为弯引号，导致 WordPress 忽略该设置。

• 查看器上的 height="620px" mobile_height="400px" 可设置其在桌面端及宽度不超过 781 px 的屏幕上的高度。
• 页面顶部查看器上的 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。