Atelier, Configurador de Productos

Cómo funciona 13Atelier

13Atelier convierte la ficha de un producto de WooCommerce en un configurador guiado: el cliente avanza pantalla a pantalla, elige entre tarjetas con foto, ve el precio actualizarse y añade al carrito una configuración completa. Todo se monta desde el escritorio de WordPress, marcando casillas.

Este manual corresponde a la versión 3.5.2.

Las cuatro piezas

Todo el plugin son cuatro cosas, y se entienden mejor de abajo arriba. Viven en 13Node → Atelier, cada una en su pestaña. Al lado están las pestañas Importar / Exportar y Ajustes.

Pieza	Qué es	Ejemplo
Grupo	La familia de una pregunta. Agrupa opciones que compiten entre sí.	Cuello, Manga, Tejido, Color
Opción	Cada respuesta posible, con sus fotos y su recargo. Pertenece a un grupo.	Cuello redondo, Cuello de pico
Paso	Una pantalla del configurador. Pregunta por uno o varios grupos.	Detalles del modelo
Configurador	La secuencia completa de pasos. Es lo que se asigna a un producto.	Maillots a medida

Un configurador se puede asignar a tantos productos como quieras: se monta una vez y se reutiliza.

Puesta en marcha

1. Crea los grupos. Uno por pregunta: Modelo, Tejido, Color, Cuello…
2. Añade las opciones de cada grupo, con su foto y lo que suman al precio.
3. Marca las compatibilidades en las opciones que las tengan (ver Restricciones).
4. Crea el configurador y sus pasos, en el orden en que se preguntarán.
5. Revisa los Ajustes de la tienda: columnas, pasos automáticos, cantidad por talla, imagen lateral.
6. Actívalo en el producto y listo.

Hay un archivo demo.json dentro del plugin con un configurador completo de ejemplo. Impórtalo desde la pestaña Importar / Exportar para ver todo montado antes de empezar el tuyo.

Grupos

Pestaña Grupos. Cada uno tiene estos campos:

Campo	Para qué sirve
Nombre	Es el título que ve el cliente en la pantalla, y el que aparece en el pedido.
Es término de producto	Marca los grupos que definen el producto en sí. Un paso del tipo «Términos de producto» los despliega todos automáticamente, así que añadir un grupo nuevo no obliga a crear ningún paso.
Este grupo define la foto del pedido	La foto de la opción elegida aquí sustituye a la del producto en el carrito, los correos y la pantalla del pedido, y es la que se muestra en la imagen lateral. Solo un grupo puede llevarlo; al marcarlo en otro, avisa y se lo quita al anterior.
Color → Grupo de color	De qué grupo salen los colores de esta parte. Ver Color por parte.
Color → Este color no cobra recargo	El color de esta parte sale gratis, tenga el precio que tenga. Solo se puede marcar si hay un grupo de color elegido.
Tomar opciones de	El grupo ofrece las opciones de otro en lugar de las suyas, con sus recargos y fotos. Ver Grupos que comparten opciones. Por defecto, — sus propias opciones —.
Orden	Posición del grupo dentro del configurador. El número más bajo va primero.

Opciones

Pestaña Opciones y términos. Cada opción es una tarjeta de las que ve el cliente.

Campo	Para qué sirve
Título	El nombre de la tarjeta. Es lo que se escribe en el pedido.
Descripción (el editor)	Texto largo que se lee al ampliar la foto de la opción. Opcional.
Extracto	Una línea corta bajo el título de la tarjeta. Opcional.
Grupo	A qué familia pertenece. Cada opción va en uno solo.
Imagen destacada	La foto de la tarjeta y la del pedido. Con foto, la tarjeta lleva un botón de zoom.
Más fotos	Hasta tres fotos más además de la destacada. Se ven al ampliar la opción y, con la imagen lateral activa, como miniaturas bajo la foto grande. La destacada sigue siendo la de la tarjeta y la del pedido.
Recargo	Lo que suma al precio del producto. Déjalo en 0 si va incluida.
Orden	Campo «Orden» de los atributos de página. Coloca la opción dentro de su grupo: es el orden exacto en que el cliente ve las tarjetas.

El listado de opciones tiene una columna Orden que se puede ordenar pulsando su cabecera. Filtrando por grupo, se revisa el orden de todo un grupo de un vistazo.

Restricciones

Es lo que impide pedidos imposibles. Dentro de cada opción, bajo Esta opción permite…, hay una caja por grupo, y dos maneras de usarla:

• Marcar opciones concretas: al elegir esta opción, ese grupo se reduce a las marcadas. Un grupo sin nada marcado no se toca y se muestra entero.
• Marcar «— Ninguno —»: al elegir esta opción, ese grupo deja de preguntarse. Es lo que hace desaparecer la pregunta de la falda en un modelo que no lleva falda, sin inventarse una opción «sin falda».

Los botones Seleccionar todo y Quitar todo de cada caja evitan tener que marcar de una en una cuando el grupo tiene muchas opciones. El título de cada caja indica cuántas hay marcadas, o «ninguno».

Los grupos que toman sus opciones de otro solo muestran la casilla «Ninguno»: qué opciones quedan disponibles se marca en la caja del grupo del que salen.

Si un paso se queda sin ninguna opción disponible, esa pantalla no se muestra. El cliente nunca ve un paso vacío.

Pasos

Pestaña Pasos. Un paso es una pantalla. El orden entre pasos se decide con el campo Orden de los atributos de página. La caja del paso solo muestra los campos que usa el tipo elegido.

Tipo de paso

Tipo	Qué hace
Opciones de un grupo	Pregunta por los grupos que marques. Con varios grupos marcados, el paso se despliega en una pregunta por grupo, en el orden de los grupos. Sin ningún grupo y solo con campos personalizados, es una pantalla de datos.
Términos de producto (sub-pasos)	Pregunta por todos los grupos marcados como «Es término de producto», en su orden. No hay que enumerarlos: el paso los recoge solo.
Tallas y medidas	Tallas estándar, medidas personalizadas, o ambas con un selector. Ver Tallas y medidas.

Resto de campos

Campo	Para qué sirve
Configurador	A qué configurador pertenece el paso.
Grupos de opciones	Los grupos por los que pregunta. Solo para el tipo «Opciones de un grupo».
Mostrar todas las preguntas en la misma pantalla	Con varios grupos, los junta en una sola pantalla en vez de encadenarlos.
Obligatorio	No deja avanzar sin responder.
Ofrecer una opción «Ninguna»	Añade una última tarjeta «Ninguna» que deja la pregunta sin responder, sin tener que crear una opción para ello. Sirve también para deshacer una elección ya hecha. Un paso que la ofrece nunca es obligatorio.
Permitir varias opciones y Máximo	Convierte las tarjetas en casillas. El máximo en 0 significa sin límite.
Campos personalizados	Datos libres que se piden en el mismo paso. Ver Campos personalizados.
Nota bajo las tallas	Solo en pasos de tallas. Un aviso destacado dentro del paso, con sus colores de fondo, borde y texto. Vacía, no se muestra nada; con los colores vacíos, usa los del tema.

Campos personalizados

Cualquier paso puede pedir datos que no son opciones: una edad, un nombre para bordar, un dorsal. Se escriben en el cuadro Campos personalizados del paso, uno por línea:

etiqueta|formato|unidad|mínimo|máximo|obligatorio

Columna	Qué va
etiqueta	El nombre del campo, tal como lo ve el cliente y sale en el pedido.
formato	text para texto o number para número, escrito así, en inglés.
unidad	Lo que aparece junto al campo: años, cm… Puede quedar vacía.
mínimo y máximo	En un número, acotan el valor. En un texto, acotan cuántos caracteres. 0 es sin límite.
obligatorio	Un 1 lo hace obligatorio. Vacío, es opcional.

Ejemplos:

• Edad|number|años|1|99|1 · número entre 1 y 99, obligatorio.
• Nombre a bordar|text||0|12| · texto de hasta 12 caracteres, opcional.

Los campos se muestran debajo de las opciones del paso, en la misma pantalla, y viajan al carrito, al pedido y a los correos como cualquier otra respuesta.

Configuradores

Pestaña Configuradores. Aquí hay un nombre, la lista de sus pasos (con enlace a cada uno) y el texto libre: un cuadro de comentarios bajo el botón de añadir al carrito, para el detalle que no cabe en ninguna casilla.

Campo	Para qué sirve
Mostrar un campo de texto libre bajo el botón de carrito	Activa el cuadro.
Obligatorio	No deja añadir al carrito con el cuadro vacío.
Etiqueta	El título del cuadro. Vacía, se llama «Comentarios».
Máximo de caracteres	0 es sin límite.

Activarlo en un producto

En la ficha del producto, en el bloque Datos del producto → General:

1. Marca Habilitar Configurador 13Atelier.
2. Elige el configurador en la lista de debajo.
3. Actualiza el producto.

La casilla aparece en los productos simples. Un producto variable no la muestra: las variaciones son otra forma de resolver lo mismo y las dos no conviven en la misma ficha.

La ficha pasa a mostrar el configurador ocupando toda la página, en lugar de la galería y el resumen habituales. La imagen destacada del producto queda como cabecera del configurador. El precio del producto es la base sobre la que suman los recargos.

Colores

Hay dos maneras de preguntar colores sin repetir la paleta. Las dos parten de lo mismo: un grupo Colores con una opción por color, cada una con su foto y su recargo. No marques «Es término de producto» en ese grupo.

Color por parte

Cada parte pregunta su color justo debajo, dentro del mismo paso:

1. Ve al grupo de la parte —Cuello, por ejemplo— y en Color → Grupo de color elige Colores.
2. Decide si ese color cobra: la casilla Este color no cobra recargo se aplica solo a esa parte.
3. Repite en las demás partes que lleven color.

El cliente elige el cuello y, en cuanto lo elige, aparece la pregunta «Cuello · Colores». Si quita el cuello, la pregunta del color desaparece. En el pedido salen como líneas separadas: «Cuello · Colores», «Manga · Colores». El color de una parte siempre hay que elegirlo, aunque la parte ofrezca la tarjeta «Ninguna».

Qué colores admite cada parte. Se marca en la opción de la parte. Abre Cuello redondo y, en su caja Colores, marca los que lleva; o marca «Ninguno» si ese cuello no se pide en color. Esa marca afecta solo al color del cuello: los colores marcados en el modelo no recortan el color del cuello, ni al revés.

Ejemplo: un adorno en otro color. El modelo Clásico solo se hace en rojo y azul, pero el adorno puede ir en blanco o en dorado. En el grupo Adorno, elige Grupo de color → Colores. En la opción Clásico, marca Rojo y Azul en su caja Colores; eso recorta solo el color del modelo. En cada opción de adorno, marca en su caja Colores los colores que admite, o no marques ninguno para ofrecer la paleta entera. El cliente elige el modelo en rojo y el adorno en dorado.

Todas las partes pueden compartir el mismo grupo de color. Solo hace falta un grupo aparte cuando una parte tiene colores que las demás no tienen, o cuando el mismo color cuesta distinto según dónde se elija.

Grupos que comparten opciones

Cuando el color no depende de una parte concreta, sino que son preguntas propias —«Color de arriba», «Color de abajo», «Color del ribete»—, crea esos grupos vacíos y en cada uno elige Tomar opciones de → Colores. Los tres ofrecen toda la paleta sin repetir una sola opción. Luego añádelos a un paso como cualquier otro grupo.

• El recargo y las fotos salen de las opciones de Colores.
• Qué colores admite un modelo se marca una sola vez, en la caja Colores de ese modelo, y vale para los tres. Si una de esas preguntas tiene que ofrecer colores que el modelo no admite, pregúntala como color por parte.
• «Ninguno» sí se marca por separado en cada grupo: un modelo sin ribete puede saltarse «Color del ribete» y seguir preguntando los otros dos.
• Un grupo del que otros toman opciones no puede tomarlas a su vez de otro.

Si el color se preguntaba antes como paso general y ya no hace falta, borra ese paso. Borrar el paso no borra el grupo ni sus opciones: el grupo sigue alimentando las preguntas por parte.

Ajustes

Pestaña Ajustes, junto a Importar / Exportar. Son decisiones de toda la tienda: se aplican a todos los configuradores. Sin tocar nada, el configurador se comporta como siempre.

Ajuste	Qué hace
Pasos automáticos	En cuanto el cliente responde una pregunta de opción única, pasa solo al paso siguiente, también al pulsar «Ninguna». Una pantalla con varias preguntas espera a que estén todas respondidas, y un paso de varias opciones mantiene su botón «Siguiente».
Columnas en el ordenador	Cuántas tarjetas por fila en pantalla grande: de 3 a 6. Por defecto, 4. Las tallas siguen el mismo número.
Columnas en el móvil	1 o 2 tarjetas por fila en el móvil. Por defecto, 1.
Cantidad por talla	El paso de tallas pide cuántas unidades de cada talla en lugar de una sola talla, y desaparece el selector de cantidad de WooCommerce. Ver Cantidad por talla.
Imagen del producto	Pone la foto en una columna propia a la izquierda, con los pasos a la derecha. Empieza siendo la foto del producto y cambia a la de la opción elegida en el grupo que define la foto del pedido. Si esa opción tiene más fotos, salen como miniaturas debajo y un clic las pasa al frente. En móvil y tableta la foto vuelve a ir encima de los pasos.
Separación por encima de la imagen	La foto acompaña al cliente al hacer scroll. Este número (en píxeles, 20 por defecto) es a qué distancia del borde superior se detiene. Súbelo a la altura de la cabecera fija del tema si la tapa.

Lo que ve el cliente

• Barra de progreso: una marca por paso configurado, aunque el paso se despliegue en varias preguntas. Solo se puede volver a pantallas ya respondidas.
• Botones Atrás y Siguiente arriba y abajo de los pasos, para no tener que bajar hasta el final en una pantalla llena de tarjetas. Pulsar Intro en un campo también avanza.
• Zoom: las tarjetas con foto tienen un botón que abre una galería con todas las fotos de la opción, miniaturas, flechas del teclado y la descripción de la opción debajo. Esc o un clic fuera la cierra.
• Tu elección: bajo los pasos, la lista de lo elegido hasta ahora con la foto de cada opción. Cada línea tiene un enlace Cambiar que vuelve a esa pregunta. No hay nada que configurar: se actualiza al vuelo, y si una elección posterior elimina una pregunta, su línea desaparece.
• Total actualizado en todo momento, multiplicado por las unidades si hay cantidad por talla.

Tallas y medidas

En un paso del tipo Tallas y medidas:

• Tallas: separadas por comas. S, M, L, XL
• Permitir medidas personalizadas: añade los campos numéricos.
• Medidas: una por línea, con el formato etiqueta|unidad|mínimo|máximo. Por ejemplo Pecho|cm|50|150. El configurador rechaza cualquier valor fuera de ese rango.

Con tallas y medidas a la vez, el cliente ve un selector y elige entre Talla estándar y Medidas personalizadas. En móvil y tableta las tallas se colocan en tres columnas.

Cantidad por talla

Con el ajuste Cantidad por talla activo, cada talla tiene su propio contador: el cliente pide, por ejemplo, cinco S y tres M de la misma configuración. Van al carrito como dos líneas, cada una con su talla y su cantidad, y el total se multiplica por las unidades.

• Las medidas personalizadas siguen como siempre: una sola línea con el selector de cantidad normal.
• Un producto sin tallas estándar también conserva su selector de cantidad.

Con 13Sizer instalado

Si tienes también 13Sizer y asignas una tabla de tallas al paso, ese paso pasa a manos suyas: el cliente indica sus medidas y la talla se calcula sola. Un paso sin tabla asignada conserva el selector propio de 13Atelier, así que un mismo configurador puede mezclar los dos tipos. Desactivar 13Sizer deja el paso funcionando con su selector de siempre.

La cantidad por talla funciona también en un paso de 13Sizer a partir de su versión 1.4.0: la talla calculada entra con una unidad y cada línea del pedido guarda las medidas.

Precios

El total es el precio del producto más el recargo de cada opción elegida. Se ve actualizarse mientras el cliente avanza, y se vuelve a calcular en el servidor al añadir al carrito: lo que se cobra siempre sale de tus datos, no de lo que llegue del navegador.

• Una opción sin recargo no muestra ningún precio en su tarjeta.
• Un grupo con el color marcado como gratuito tampoco lo muestra, porque no lo va a sumar.
• El recargo del color se cobra una vez por cada parte que lo elija. Tres partes con un color de 8 € son 24 €, salvo en las que hayas marcado que no cobra.
• Con cantidad por talla, el total se multiplica por el número de unidades.

Carrito y pedido

La configuración viaja con el producto: aparece bajo la línea del carrito, en el pedido, en Mi cuenta, en la pantalla del administrador y en los correos, con una línea por pregunta respondida, los campos personalizados y el texto libre.

Cada opción elegida sale con su foto, no solo con su nombre: en la página de pedido recibido, en Mi cuenta, en los correos y en la edición del pedido.

Si marcaste un grupo como el que define la foto del pedido, la miniatura de la línea es la de la opción elegida en ese grupo en vez de la foto genérica del producto.

Importar y exportar

Pestaña Importar / Exportar. El montaje entero —grupos, opciones, configuradores y pasos— viaja como un archivo JSON.

• Todo se referencia por slug, así que el archivo se restaura en cualquier instalación.
• Al importar, lo que ya existe se actualiza por su slug y lo que falta se añade; no se borra nada. La casilla Borrar y reemplazar hace lo contrario, deja exactamente lo que traiga el archivo.
• Los precios se guardan con el criterio de impuestos de la tienda que exportó y se convierten al entrar.

Sirve igual para llevar un configurador de la web de pruebas a la definitiva que para guardar una copia antes de un cambio grande.

Licencia y actualizaciones

La clave de licencia se introduce en 13Node → Ajustes (puede aparecer como Settings; no es la pestaña Ajustes de Atelier). Con la licencia activa, las actualizaciones llegan al escritorio como las de cualquier otro plugin, y desaparece el crédito de 13Node del pie del configurador.

Si algo no sale

Síntoma	Qué mirar
La ficha del producto sigue siendo la de siempre	Que el producto tenga marcada la casilla de Datos del producto → General y un configurador elegido. Con una de las dos cosas no basta. Comprueba también que sea un producto simple, y vacía la caché si la web la tiene.
Un paso no aparece	Se está quedando sin opciones disponibles. Revisa las restricciones de lo elegido antes: alguna opción tiene marcado «Ninguno» en ese grupo, o lo ha reducido a nada.
Un paso aparece con opciones que no tocan	Al revés: falta marcar las compatibilidades en la opción anterior. Un grupo sin nada marcado se muestra entero.
Las tarjetas salen en otro orden	Revisa el campo Orden de cada opción; la columna Orden del listado lo enseña todo de una vez. A igual número, se ordenan por título.
El color de una parte ofrece colores que no tocan	Los colores de una parte se marcan en la opción de esa parte (el cuello concreto), no en el modelo.
El color sale dos veces	Está preguntado como paso general y además como color de una parte. Borra el paso general si ya no hace falta.
El color aparece como una parte más del producto	El grupo de color tiene marcado «Es término de producto». Desmárcalo.
No puedo elegir un grupo en «Tomar opciones de»	Ese grupo ya toma sus opciones de otro, o es este mismo. Solo se puede tomar de un grupo con opciones propias.
El paso no avanza solo con los pasos automáticos activos	Es lo previsto en pantallas con varias preguntas (espera a todas) y en pasos de varias opciones (usan «Siguiente»).
La cabecera del tema tapa la imagen lateral	Sube Separación por encima de la imagen en Ajustes a la altura de esa cabecera.
Ha desaparecido el selector de cantidad	Está activa la Cantidad por talla: la cantidad se pide en cada talla.
Dos líneas del pedido se pisan	Dos pasos con el mismo título. El pedido se ordena por el título de la pregunta, así que tienen que ser distintos.

Requisitos

• WordPress 5.6 o superior
• WooCommerce activo
• PHP 7.4 o superior