Configurar las páginas individuales de producto
El diseño del producto individual debe acomodar la galería, el resumen del producto, las variaciones, el stock, los controles de compra, la información extensa, los productos relacionados y las integraciones opcionales sin ocultar la decisión de compra.
Antes de empezar
Prepara productos simples y variables representativos. Incluye un precio rebajado, un título largo, varias imágenes de galería, un estado sin galería, descripciones largas y vacías, atributos del producto, productos relacionados, ventas adicionales y un producto agotado.
Configurar el diseño principal
- Ve a Settings → POM Theme → E-Commerce → Product single → Product layout.
- Elige Default o Content left; purchase area right.
- Define la distribución del diseño cuando el diseño seleccionado ofrezca columnas iguales, una galería más grande o una descripción más grande.
- Usa Layout para mantener la página completa del producto y la barra fija opcional de añadir al carrito en un contenedor, o para extender ambas al ancho completo de la página.
- Elige un diseño de página a ancho completo o con barra lateral y selecciona la barra lateral registrada cuando corresponda.
- Guarda e inspecciona tanto el contenido de producto corto como el largo.
Configurar la galería
Elige dónde aparecen las miniaturas en relación con la imagen principal, o usa una galería de una a cuatro columnas. Después revisa las dimensiones de las imágenes, las flechas de la galería y cualquier opción que oculte la galería.
Usa imágenes de origen con proporciones coherentes. Las dimensiones del producto individual son independientes del recorte de miniaturas del archivo, así que verifica ambos contextos después de cambiar los ajustes de medios.
Colocar la información del producto
POM puede colocar el área de añadir al carrito y las pestañas del producto en ubicaciones compatibles. Las pestañas pueden usar una presentación de pestañas, acordeón o encabezados.
Elige la estructura según la longitud del contenido:
- las pestañas mantienen compactas varias secciones;
- un acordeón es útil cuando el espacio vertical es limitado;
- los encabezados exponen todo el contenido en el flujo del documento.
Una descripción corta fija debe probarse con controles de compra largos y áreas de visualización cortas antes del lanzamiento.
Las descripciones pueden contener texto normal, shortcodes existentes o contenido de bloques guardado. El texto clásico conserva el formato automático de párrafos. Las descripciones basadas en bloques conservan su propio marcado sin una segunda pasada que añada párrafos o saltos de línea alrededor de los controles; esto también se aplica cuando los bloques y los shortcodes aparecen juntos. No se añade una hoja de estilos de bloques independiente para este comportamiento de formato.
Configurar las recomendaciones y las opciones para compartir
Configura las posiciones de los productos relacionados y las ventas adicionales. Los productos relacionados pueden usar una plantilla de resultados seleccionada y controles de carrusel que incluyen flechas, puntos, bucle, reproducción automática y arrastre.
Elige las posiciones de las opciones para compartir solo donde no interrumpan la selección de variaciones ni la progresión del pago.
Configurar la barra fija de añadir al carrito
La barra fija puede mantener disponible la acción de compra mientras el cliente se desplaza. Puede limitarse al móvil y tiene sus propios controles de color compatibles. Su contenido interno usa la misma elección de Layout que la página completa del producto individual.
Cuando el formulario de compra incluye un control de cantidad, la barra fija refleja ese control exacto y mantiene ambos valores sincronizados. Su acción de añadir al carrito envía el formulario de compra original de WooCommerce para que la validación del tipo de producto y los datos de configuración permanezcan intactos.
Actívala solo cuando no duplique ni cubra los avisos de WooCommerce, los controles de cookies, los widgets de accesibilidad o los controles del navegador del dispositivo.
Comportamiento específico de las integraciones
Los ajustes de presentación de WooCommerce Bookings aparecen solo cuando esa integración está activa. Prueba cualquier integración con sus selectores y validación reales; un producto simple no puede representar el comportamiento de reservas, suscripciones, paquetes o complementos.
Verificación
- Abre un producto variable con una opción predeterminada seleccionada y confirma que su imagen principal coincide con esa opción antes de interactuar. Selecciona cada variación y confirma que la imagen, la miniatura adaptable, el texto alternativo, el precio, el stock y el estado del botón se actualizan.
- Abre las imágenes de la galería y usa los controles de miniatura, flecha, teclado y táctiles. En un ancho estrecho, comprueba tanto tocar una miniatura como arrastrar una tira de miniaturas desplazable.
- Envía una selección de variación incompleta y lee el aviso.
- Prueba productos rebajados, agotados, descargables y virtuales donde se usen.
- Revisa el contenido de pestañas o acordeón con teclado y ampliación de pantalla.
- Añade un producto desde arriba y desde la barra fija cuando esté activada.
- Abre los productos relacionados y las ventas adicionales.
- Si el diseño usa una barra lateral fija, desplázate hacia abajo y hacia arriba y confirma que el encabezado visible nunca cubre su borde superior.
- Repite en teléfono, tableta y escritorio.
Resultado esperado: los clientes pueden entender el estado del producto y alcanzar una acción de compra inequívoca en todos los anchos compatibles.