Cómo usar el plugin Simplio3D WordPress en Elementor

El plugin Simplio3D WordPress no tiene widgets independientes para Elementor, ni los necesita. Cada bloque de Simplio3D también es un shortcode, y lo colocas con el propio widget Shortcode de Elementor, un widget por bloque. El shortcode muestra exactamente lo mismo que el bloque, por lo que un configurador de productos en Elementor funciona igual que uno creado en el editor de bloques de WordPress: una configuración en vivo compartida por todos los widgets, la barra de herramientas 3D, las dimensiones, AR, el precio en vivo, el resumen, las solicitudes de presupuesto y el carrito de WooCommerce.

Esta guía cubre el camino más directo: encontrar tus ID, crear el diseño, añadir al carrito y corregir los errores habituales. Está escrita para la versión 2.0.3 del plugin y funciona con la versión gratuita de Elementor.

Antes de empezar

• El plugin Simplio3D, versión 2.0.3 o posterior, del directorio de plugins de WordPress.org, ejecutándose en modo Simplio3D v3. Las nuevas instalaciones se inician en este modo. Un sitio actualizado desde la versión 1.x permanece en modo Legacy hasta que lo cambies en Simplio3D → Migración.
• Tu cuenta de Simplio3D conectada: en WordPress, ve a Simplio3D → Iniciar sesión en Simplio3D.
• Un proyecto publicado: en Simplio3D, abre Compartir, activa el enlace para compartir y déjalo sin contraseña. Si restringes los dominios de inserción, añade el dominio de tu sitio.
• Elementor. La versión gratuita es suficiente.
• Para Añadir al carrito: WooCommerce y un producto simple con precio.

Añadir al carrito con WooCommerce

En el editor de bloques, al elegir un producto en el bloque Añadir al carrito, se vincula a tu proyecto. Un shortcode no puede hacerlo, así que primero vincula el producto manualmente:

1. En Productos, edita un producto simple con un precio normal.
2. Abre Datos del producto → Simplio3D, establece proyecto de Simplio3D en tu proyecto y Precio del carrito en precio calculado de Simplio3D (verificado en el servidor), o en el precio propio de WooCommerce del producto. Haz clic en Actualizar.
3. Anota el ID del producto: pasa el cursor sobre el producto en la lista de Productos o consulta post=123 en la barra de direcciones de la pantalla de edición.
4. Sustituye el widget Enviar por [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Añade quantity_mode="selector" para permitir que los compradores elijan una cantidad, y after_add="cart" para llevarlos al carrito.

El carrito, la finalización de compra, los correos electrónicos de pedido y WooCommerce → Pedidos mostrarán entonces la configuración, una imagen de ella y el precio verificado.

Un producto vinculado con el precio de Simplio3D solo puede comprarse mediante el configurador, por lo que el botón normal Añadir al carrito de WooCommerce en su página de producto pide a los compradores que lo configuren primero. Con Elementor gratuito, mantén el configurador en una página independiente y enlázalo desde el producto, por ejemplo con un enlace «Configura el tuyo» en la descripción corta. Con Elementor Pro, puedes crear una plantilla de producto individual que use los widgets Shortcode de Simplio3D en lugar del widget Añadir al carrito de Elementor; previsualiza esta configuración antes de publicarla.

Ajustes que más usarás

Añade los ajustes dentro del shortcode, con comillas rectas y guiones bajos. Al copiar desde Word, Google Docs o Slack, las comillas pueden convertirse en comillas curvas, y entonces WordPress ignora el ajuste.

• height="620px" mobile_height="400px" en el Visor establece su altura en ordenadores y en pantallas de hasta 781 px de ancho.
• loading="eager" en un Visor situado al inicio de la página lo carga inmediatamente en lugar de hacerlo al desplazarse hasta que entra en pantalla.
• layout="dropdown" en un widget de Opciones cambia sus opciones a un menú desplegable. grid, list y buttons también funcionan, según el tipo de opción.
• columns="4" thumbnails="small" permite incluir más opciones en cada fila.
• prefix="From" tax_display="exclude" en el Precio añade texto antes de este y muestra el precio antes de impuestos, lo que coincide con el carrito de WooCommerce.
• summary_mode="compact" hide_defaults="yes" en el Resumen coloca cada opción en una línea y omite las que se dejan con su valor predeterminado.
• display="hosted" en el Visor muestra el configurador completo de Simplio3D, incluidas las opciones, en un único widget, sin necesidad de ID de opciones.
• instance="oak" en cada widget de un conjunto mantiene separados dos configuradores en una misma página. Los widgets con la misma instancia comparten una configuración.

Haz que coincida con tu diseño de Elementor

• La pestaña Avanzado de cada widget Shortcode permite gestionar el margen, el relleno, el fondo, el borde y la visibilidad adaptable. El visor ocupa toda su columna, así que ajusta el ancho de la columna o del contenedor para hacerlo más ancho o más estrecho.
• Los bloques toman la fuente y el color del texto de la página. El color de acento (la opción seleccionada, el anillo de enfoque y los botones) recurre a un tono casi negro en temas clásicos como Hello Elementor, así que configúralo con el acento de Elementor en Apariencia → Personalizar → CSS adicional: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Otras propiedades incluyen --s3d-radius para las esquinas, --s3d-thumb para el tamaño de las miniaturas y --s3d-button-bg para el botón. Para aplicar estilos a un único widget, añade class="my-finish" a su shortcode y selecciona .my-finish en tu CSS.