Diseña capítulos y elige un diseño

Un capítulo es una decisión en un producto Composite: elegir una base, añadir accesorios, seleccionar el embalaje o escoger un servicio. Esta guía explica cómo crear fuentes de capítulos útiles y elegir un diseño de tienda que se adapte a la tarea de compra.

Abre el editor de capítulos

Ve a Products → All Products, edita un producto Composite y abre Product data → Composite chapters.

Los capítulos guardados comienzan contraídos para que sus nombres y su orden sigan visibles de un vistazo. Usa el control de flecha para expandir un capítulo, arrastra su tirador de movimiento para cambiar su posición o usa el botón rojo Remove chapter para eliminarlo. Los capítulos recién añadidos permanecen abiertos para su edición.

Elige una fuente

Cada capítulo admite uno de estos tres valores de Source type:

• Specific products mantiene una lista ordenada exacta. Úsalo cuando cada elección permitida está seleccionada manualmente.
• Product categories obtiene las opciones de una o varias categorías de producto de WooCommerce.
• Products and categories combina productos seleccionados manualmente con coincidencias de categoría.

Para las fuentes de categoría, elige Dynamic: update options automatically cuando los nuevos productos del catálogo que coincidan deban aparecer sin editar el producto Composite. Elige Snapshot: freeze matches when saved cuando una campaña, un presupuesto o una selección regulada deba permanecer estable hasta que vuelvas a guardar el producto Composite.

Usa Excluded products para una excepción absoluta. Usa Excluded categories para eliminar los productos aportados por la rama de categoría. En una fuente mixta, un producto incluido directamente puede seguir disponible aunque pertenezca a una categoría excluida; una exclusión explícita de producto siempre lo elimina.

Establece las reglas de selección

La opción Option style del capítulo determina si los clientes eligen uno o varios productos distintos. Radio list permite un producto distinto; Selection list y Quantity grid (−/+) permiten varios. Después combina los límites según necesites:

• Customers must complete this chapter hace que el capítulo sea obligatorio en la práctica.
• Minimum/Maximum/Exact total units controla todas las unidades seleccionadas en el capítulo.
• Minimum/Maximum distinct products controla cuántas elecciones distintas se seleccionan.
• Minimum/Maximum units per option y Quantity step controlan cada producto elegido.
• Default selection preselecciona un producto o variación exacta que pertenezca a la fuente.

Un total exacto tiene prioridad sobre el mínimo y el máximo del capítulo. Mantén los tres coherentes para que el producto pueda guardarse y presupuestarse.

Cuando Maximum units per option es 1, la tienda no muestra un campo numérico que no pueda cambiar de forma útil. En su lugar muestra ×1 después de la selección. En un capítulo de opción múltiple, un producto opcional con un mínimo de cero y un máximo 1 se comporta, por tanto, como una casilla de verificación con un ×1 informativo; un capítulo obligatorio de elección única conserva su comportamiento de botón de opción y también muestra ×1.

Elige cómo aparecen las opciones

En Storefront display, elige:

• Quantity grid (−/+) para un catálogo multiproducto navegable donde cada tarjeta expone controles directos de cantidad y cero significa no seleccionado;
• Radio list para una decisión de elección única mediante controles de botón de opción; o
• Selection list para varias elecciones mediante casillas de verificación.

Puedes mostrar imágenes, precios y descripciones de forma independiente. La búsqueda y el filtrado por categoría son ayudas de descubrimiento opcionales, no requisitos. Para un configurador tipo pack, elige Quantity grid (−/+), desactiva la búsqueda y los filtros y deja que los clientes exploren la página inicial del catálogo de inmediato. La tienda ofrece un simple enlace Load more options cuando es necesario, y las selecciones permanecen en la configuración mientras se carga otra página o mientras el cliente busca o filtra.

Combina Quantity grid (−/+) con Exact total units para un pack de tamaño fijo: el contador muestra las unidades seleccionadas frente al objetivo, el botón menos devuelve una opción a cero y el servidor sigue validando los límites por opción y por capítulo antes de añadir al carrito.

Cuando POM Theme está activo, la cantidad del producto padre y los controles de la cuadrícula de cantidad usan los mismos controles compactos y redondos de menos y más que los productos simples y el carrito. Otros temas reciben en su lugar los controles de cantidad autocontenidos de Composite.

Añade una Chapter placeholder image cuando un capítulo necesite una alternativa fiable para una imagen de producto ausente o no disponible.

Controla cuántas opciones se cargan a la vez

Usa estos ajustes cuando un capítulo contenga suficientes productos o variaciones como para mostrar Load more options:

1. En Product data → Composite chapters → Storefront layout, establece Default options per load para este producto. El valor predeterminado es 12; los valores permitidos son 1–50.
2. Para usar un tamaño distinto en un capítulo, expándelo y abre Storefront display → Options per load. Deja 0 para heredar el ajuste del producto, o introduce 1–50 para anularlo.
3. Actualiza el producto y recarga su página de tienda. Comprueba las opciones iniciales, haz clic en Load more options y prueba la búsqueda y los filtros de categoría si están activados. Todos usan el mismo tamaño de página efectivo para ese capítulo.

Por ejemplo, establece el valor predeterminado del producto en 24, usa 50 para un capítulo de accesorios y usa 6 para un capítulo con tarjetas de opción detalladas. Los productos existentes conservan 12 hasta que cambies el ajuste. Devuelve un capítulo a 0 para que vuelva a seguir a su producto; un capítulo reutilizable con 0 sigue al producto donde se usa.

El máximo es 50 opciones nuevas examinadas por carga, no 50 opciones totales ni unidades seleccionadas. Cada variación comprable cuenta como una opción. Las selecciones existentes permanecen disponibles por separado, por lo que pueden aumentar el número de tarjetas visibles. Hay más opciones accesibles mediante Load more options. Una página puede contener menos opciones cuando la disponibilidad del catálogo o un trabajo de descubrimiento acotado impida llenarla; sigue cargando mientras el enlace esté disponible.

Los valores más bajos reducen el trabajo por solicitud y el tamaño inicial de página, especialmente en productos con muchos capítulos. Si el guardado se rechaza, usa números enteros dentro del intervalo permitido. Si un capítulo ignora un valor predeterminado de producto cambiado, comprueba si tiene su propio valor distinto de cero en Options per load.

Establece columnas de opciones adaptables

Dentro de cada capítulo, abre Storefront display y establece su número de columnas de opciones para cada punto de ruptura POM Theme:

• Desktop se aplica a partir de 992 px.
• Horizontal tablet se aplica de 768 px a 991 px.
• Vertical tablet se aplica de 576 px a 767 px.
• Mobile se aplica por debajo de 576 px.

Cada valor acepta de una a seis columnas y solo afecta a ese capítulo. El ajuste funciona con Quantity grid, Radio list y Selection list, de modo que un capítulo puede usar una cuadrícula de productos amplia mientras otro usa una lista de elección más densa de dos o tres columnas. Revisa los recuentos de columnas más grandes con nombres de producto, imágenes, precios y descripciones reales antes de publicar.

Elige el diseño del producto

Abre Storefront layout y elige la estructura que mejor se adapte al número y la complejidad de las decisiones.

Los cinco diseños usan la misma configuración guardada y el mismo presupuesto del servidor. Cambiar el diseño no cambia precios, reglas ni selecciones.

Comportamiento con teclado y en pantallas pequeñas

• Accordion expone el estado expandido y admite Flecha arriba, Flecha abajo, Inicio y Fin entre los títulos de capítulo.
• Stepped bloquea Next cuando el capítulo actual no es válido, enfoca su error y enfoca el título del siguiente capítulo después de una transición válida.
• Componentized usa una lista de pestañas accesible. Las teclas de flecha siguen la dirección de la página, incluido RTL, mientras que Inicio y Fin llegan al primer y último capítulo visible.
• Cada resumen ofrece enlaces Edit y Remove para cada fila seleccionada. Edit devuelve el foco a la opción correspondiente, mientras que Remove la borra directamente.
• Los resúmenes Drawer contienen el foco mientras están abiertos, se cierran con Escape y devuelven el foco a su activador.

Cada capítulo usa sus propios recuentos de columnas adaptables. Antes de la mejora, los capítulos permanecen en un orden apilado legible, pero añadir al carrito queda desactivado porque el precio y la disponibilidad actuales requieren validación por JavaScript.

Coloca el constructor y el resumen

Elige Builder position y Builder hook priority de forma independiente al resumen. Las posiciones disponibles cubren el área predeterminada de añadir al carrito, las áreas antes, dentro o después del resumen del producto, el inicio o el final de la descripción larga y el área después del producto completo. Las posiciones de descripción larga requieren contenido de descripción del producto y normalmente aparecen dentro de la pestaña o el área de contenido Description del tema. Cuando el constructor usa una de estas posiciones externas, su catálogo de capítulos no repite la cantidad del producto padre. El control de cantidad único, los complementos de producto (Product Add-Ons) y el botón de añadir al carrito permanecen juntos en el área de compra normal de WooCommerce.

Para una página de producto convencional de dos columnas, una división útil es:

1. Establece Builder position en At the start of the long description.
2. Establece Summary position en Inside the product summary.
3. Elige Sticky cuando el resumen del lado derecho deba permanecer visible en pantallas más anchas.
4. Previsualiza la plantilla real del tema, porque las columnas de los hooks de WooCommerce están controladas por el tema activo.

Los cinco diseños respetan Summary position y Summary presentation. Slot builder usa el mismo marcado canónico de resumen que los demás diseños y nunca crea un segundo resumen de vista previa de slot. Si el hook de tema seleccionado no está disponible, aparece una alternativa en línea dentro del configurador.

Cuando una ventana emergente de archivo de producto compatible ejecuta la acción de añadir al carrito de Composite de WooCommerce, Default add-to-cart area muestra el constructor completo y la acción de compra dentro de esa ventana emergente. POM Tweaks carga los recursos de la tienda antes de que se muestre el archivo y mantiene separadas las solicitudes de presupuesto y opción de componente de cada producto Composite cuando varias ventanas emergentes comparten la página. Las posiciones que dependen de hooks de resumen o descripción de producto individual siguen siendo específicas de las plantillas que ejecutan esos hooks.

Usa Show Edit links in the summary y Show Remove links in the summary para exponer una, ambas o ninguna de las dos acciones. Cuando están activadas, estas acciones permanecen como enlaces en línea simples en cada fila seleccionada. Desactiva Show each product price in the summary cuando el resumen deba mostrar los nombres y las cantidades de los productos seleccionados sin exponer la aportación de cada línea; el total del Composite sigue visible. Activa Show repeated units as separate summary rows cuando una cantidad como tres chocolates deba mostrarse como tres filas de cantidad uno en lugar de una fila combinada. Cuando los precios de producto son visibles, el precio mostrado en cada fila expandida es la aportación unitaria; el total del resumen permanece sin cambios.

Después de cada presupuesto válido, el precio principal del producto de WooCommerce muestra el precio de una configuración Composite completa. Cambiar la cantidad del producto padre multiplica el total dentro del resumen del Composite pero no multiplica este precio unitario principal. La barra de producto inferior fija de POM Theme sigue el mismo precio unitario. Una configuración incompleta o no válida restaura el precio original del producto hasta que vuelva a haber un presupuesto válido.

Elige la Summary position, Hook priority y Summary presentation:

• Inline permanece en el flujo normal del documento.
• Sticky sigue al cliente dentro de su columna y vuelve al flujo normal en pantallas estrechas.
• Drawer abre un resumen accesible fuera del lienzo y devuelve el foco a su activador cuando se cierra.

Si el tema activo no ejecuta el hook de resumen seleccionado, POM Tweaks muestra un resumen alternativo dentro del configurador. Si un hook de constructor seleccionado está ausente en una plantilla de producto personalizada, elige otra posición de constructor que la plantilla ejecute.

Verifica el diseño

Previsualiza el producto en escritorio y en un ancho móvil estrecho. Complétalo con un teclado, usa la búsqueda y los filtros, selecciona una variación, cambia las cantidades y envía una configuración incompleta. Confirma que no hay desplazamiento horizontal de página, que cada error solicitado enlaza con su capítulo, que el precio principal del producto y la barra fija POM Theme muestran el precio de una configuración, y que el resumen y el carrito muestran el total de cantidad completo. Los avisos de campo obligatorio deben permanecer ocultos durante la navegación normal: aparecen solo después de que el cliente intente añadir una configuración incompleta o intente abandonar un paso obligatorio incompleto.

Para combinaciones concretas de estos controles, consulta los casos de uso del producto Composite.