WooCommerce Product Configurator

Un reloj con 165 combinaciones no necesita 165 fotos

Vendes un reloj con 5 esferas, 3 cajas y 11 correas. Son 165 combinaciones, y cada cliente quiere ver la suya antes de pagar. Fotografiarlas todas se come el presupuesto; dejar una sola foto obliga a imaginar el resultado justo en el momento de decidir.

Un configurador por capas cambia dónde se gasta el esfuerzo: dejas de producir resultados terminados y preparas piezas que encajen entre sí, y de esa preparación depende que la imagen final parezca real. En ese ejemplo bastan 20 imágenes, pero las 20 tienen que coincidir con exactitud.

WooCommerce Product Configurator, de Iconic, trabaja así con productos variables: cada valor de atributo tiene su imagen transparente y, cuando el comprador elige una opción, esa capa se carga sobre las demás. Antes de comprarlo, la pregunta útil es si puedes obtener tus piezas por separado, con el mismo encuadre y la misma luz.

Capas, condiciones y caché de imágenes

• Una capa por valor de atributo: en la pestaña Configurator, cada valor tiene su selector de imagen.
• Orden por arrastre: los atributos situados arriba se muestran por encima de los de abajo.
• Capas condicionales: la imagen de un atributo cambia según lo elegido en otro, con grupos formados por atributo, comparación y valor.
• Capa de fondo opcional: puede ser un color sólido guardado como imagen.
• Caché de imágenes: guarda las imágenes configuradas para mostrarlas al instante, y se vacía desde el panel del plugin.

Las condiciones resuelven los casos en que una pieza cambia de forma con otra elección. Si una mesa admite patas rectas y otras de distinto estilo, creas un grupo para el estilo recto y le asignas la imagen de esas patas en cada color.

Ahorra fotos, y las variaciones siguen siendo tuyas

El plugin reduce las imágenes y deja intacto el modelo de WooCommerce. El producto sigue siendo variable, y las variaciones tienen que estar creadas, con precio y existencias; si falta alguno de esos datos, esa opción queda fuera del alcance del comprador.

Compone imágenes planas, por lo que el resultado depende de tus capas. Conviene definir una imagen destacada, que aparece en los listados y sirve de respaldo.

Si las imágenes desaparecen al guardar, el servidor está limitando los campos que acepta en cada envío, y hay que subir el ajuste max_input_vars.

Requisitos y montaje del primer producto configurable

Necesita WooCommerce y la biblioteca GD de PHP. Usa capas PNG, que es el formato seguro en todos los casos. Después, sigue este orden:

1. Crea el producto variable con sus atributos y variaciones, ponles precio y existencias y guárdalo.
2. Abre Configurator en los datos del producto y activa el interruptor.
3. Prepara las capas en un editor de imágenes sobre un lienzo fijo, por ejemplo de 1000 por 1000 píxeles, alineadas y con fondo transparente.
4. Asigna cada imagen a su valor de atributo con el icono de suma.
5. Arrastra los atributos para fijar el orden de las capas y guarda el producto.

Muestras, idiomas, listas de deseos y constructores

Tiene integración oficial con WooCommerce Attribute Swatches y WooThumbs, también de Iconic, y con WooCommerce Variation Swatches and Photos de Lucas Stark. La lista sigue con Variation Swatches for WooCommerce, WPML, YITH Wishlist y WC Product Bundles.

Entre los temas y constructores integrados están The Gem, Divi, Elementor, Goya y Be Theme. Con cualquier otro plugin externo la compatibilidad no está garantizada, así que prueba tu combinación antes de cargar todo el catálogo.

Cuando lo tuyo es precio a medida, diseño libre o páginas separadas

Si las opciones cambian el precio por una fórmula, como en una persiana cortada a medida, mira Uni CPO. Si el cliente debe crear su propio diseño para imprimirlo, Lumise une el archivo de producción al pedido.

Si cada versión merece su propia URL, Linked Variations las mantiene como productos independientes enlazados entre sí.

Número de imágenes, WebP y capas que no cambian

¿Cuántas imágenes tengo que preparar?

Una por valor de atributo, más la de fondo si la usas y las de las capas condicionales. El reloj del ejemplo pasa de 165 a 20.

¿Sirve para productos simples?

No. Solo trabaja con productos variables.

¿Puedo usar WebP?

PNG funciona en todos los casos. Si prefieres WebP, pruébalo en tu instalación antes de convertir las capas.

Cambié una capa y sigo viendo la anterior, ¿qué hago?

Vacía la caché de imágenes con el botón Clear Cache del panel de Configurator.