Si estás usando woocommerce breakdance form builder y tu formulario se ve perfecto en el editor pero desaparece en el sitio en vivo, el problema casi siempre es caché sin limpiar, una condición de visibilidad mal configurada, o un conflicto con un plugin de seguridad. La solución existe y es técnica, no mística.
En 30 segundos
- El builder de Breakdance y el frontend usan contextos distintos: lo que ves en el editor no siempre refleja lo que ve el visitante.
- La causa más frecuente es caché sin purgar, tanto del plugin de caché como del navegador.
- Breakdance tiene un sistema de condiciones de visibilidad que puede ocultar elementos en el sitio en vivo sin que lo notes durante el diseño.
- Wordfence y otros plugins de seguridad pueden bloquear solicitudes del formulario o sus scripts asociados.
- Si el formulario solo aparece en un producto específico de WooCommerce, hay que revisar las condiciones de visualización por ID de producto o categoría.
WooCommerce es un complemento de código abierto para WordPress, desarrollado por Automattic, que permite crear y gestionar tiendas de comercio electrónico. Proporciona funcionalidades para procesar pagos, gestionar inventario y administrar carrito de compras.
Qué es el problema: el formulario que existe y no existe
Breakdance es un page builder visual para WordPress que incluye un módulo de Form Builder integrado. Es la herramienta con la que creás formularios directamente en el editor visual, sin plugins adicionales como Contact Form 7 o Gravity Forms.
El problema que le pasa a más de uno: diseñás el formulario en el builder, queda prolijo, lo guardás, abrís el sitio en vivo en otra pestaña y el formulario no está. O peor: está en algunas páginas de producto pero no en otras, sin ningún cambio aparente entre ellas.
Ponele que armaste un formulario de consulta personalizada para un producto de WooCommerce. En el preview del builder lo ves perfectamente. Pero cuando navegás a la URL del producto como visitante, el espacio donde debería estar el formulario está vacío. No da error. Simplemente no aparece. Eso desconcierta más que un error 500 con stacktrace.
Causas principales: por qué desaparece el formulario
Hay varias razones por las que esto ocurre, y conviene descartarlas en orden de probabilidad:
- Caché sin limpiar: el más común. El plugin de caché sirve una versión vieja de la página sin el formulario.
- Condiciones de visibilidad mal configuradas: Breakdance permite ocultar cualquier elemento con condiciones. Si dejaste configurada una condición de usuario logado o de URL específica, el visitante no ve nada.
- URLs HTTP/HTTPS inconsistentes: si WordPress está configurado con http pero el sitio sirve https (o al revés), algunos assets no cargan y el formulario queda en blanco.
- JavaScript no cargado: el Form Builder de Breakdance depende de JS para renderizar. Si un plugin bloquea o difiere ese script, el formulario no aparece.
- Conflicto con plugin de seguridad: Wordfence especialmente puede bloquear requests del formulario o sus recursos asociados.
- CSS personalizado que oculta el elemento: alguien (o algún tema) puede tener un
display: noneovisibility: hiddenapuntando al contenedor del formulario. - Condición por producto específico: si configuraste el elemento solo para ciertos IDs de producto en WooCommerce, en los demás simplemente no se renderiza.
Limpiar caché: por acá arrancás siempre
Antes de entrar en debugging complejo, limpiá todo el caché. Es el paso que resuelve el 60% de estos casos. Sobre eso hablamos en cómo funciona WooCommerce.
Según la documentación oficial de Breakdance sobre diferencias visuales entre el builder y el frontend, las discrepancias suelen originarse en capas de caché que no se actualizan al guardar cambios en el editor.
WP Rocket
Ir a WP Rocket > Dashboard > «Limpiar caché». Si usás caché de objetos (Redis o Memcached), también vaciarlo desde la misma pantalla.
LiteSpeed Cache
LiteSpeed > Purgar > «Purgar todo». Incluye el caché del servidor de LiteSpeed, no solo el de WordPress.
WP Super Cache
Configuración > WP Super Cache > «Eliminar caché». Luego recargá la página en modo incógnito para confirmar que no estás viendo caché del navegador.
Siempre probá en ventana de incógnito después de limpiar. El navegador también cachea, y si vas a la misma pestaña de siempre, no vale como prueba.
Verificar URLs y configuración de WordPress
Entrá a WP Admin > Configuración > General. Fijate que tanto «Dirección de WordPress (URL)» como «Dirección del sitio (URL)» usen exactamente el mismo protocolo y dominio: https://tusitio.com sin barra al final, sin variaciones.
Si hay inconsistencia entre http y https, o entre con y sin www, los assets del formulario (CSS, JS) no cargan correctamente. El browser bloquea contenido mixto y el formulario queda en blanco sin error visible en pantalla, lo que lo hace particularmente molesto de detectar. Más contexto en configuración de atributos en WooCommerce.
Condiciones de visibilidad en Breakdance: el elemento está oculto adrede
Breakdance tiene un sistema de condiciones que permite mostrar u ocultar cualquier elemento según usuario logado, fecha, referrer, tipo de dispositivo, o cualquier combinación de esas variables. Es una funcionalidad poderosa que, mal configurada, parece un bug.
Según la documentación de condiciones de Breakdance, las condiciones se aplican a nivel de elemento individual. Podés tener el formulario configurado para mostrarse solo a usuarios logados, y vos siempre lo ves porque estás logado como admin. El visitante no está logado, no ve nada.
Para verificarlo: seleccioná el elemento del formulario en el builder, buscá la opción «Conditions» o «Display Conditions» en el panel lateral. Si hay alguna condición activa, la vas a ver listada ahí. ¿Alguien la configuró? ¿Es la correcta? Revisalo.
Problemas específicos de WooCommerce con formularios por producto
Acá viene el caso particular: el formulario aparece en un producto pero no en otros. Esto casi siempre tiene que ver con cómo está configurada la plantilla de producto en Breakdance.
En Breakdance podés crear plantillas específicas para tipos de contenido de WooCommerce: producto simple, producto variable, o incluso IDs específicos de producto. Si la plantilla que incluye el formulario está asignada solo a un producto (por ID o por categoría), en los demás productos se usa otra plantilla, que no tiene el formulario.
Para verificarlo: en el builder, revisá la sección de «Conditions» de la plantilla de producto (no del elemento, sino de la plantilla completa). Si dice algo como «Product ID = 347», ese formulario solo aparece en ese producto.
| Escenario | Causa probable | Dónde revisar |
|---|---|---|
| Formulario invisible en todos los productos | Caché o condición de usuario | Plugin de caché / Display Conditions del elemento |
| Formulario solo en un producto | Template asignado por ID de producto | Conditions de la plantilla en Breakdance |
| Formulario visible en desktop, no en mobile | Condición de dispositivo activa | Responsive conditions del elemento |
| Formulario visible para admin, no para visitante | Condición de usuario logado | Display Conditions > User role/status |
| Formulario que carga un segundo y desaparece | JavaScript bloqueado por seguridad | Consola del browser / Wordfence logs |
Conflictos con plugins de seguridad y firewall
Wordfence es fantástico para proteger un sitio. También es uno de los plugins más agresivos bloqueando requests que le parecen sospechosas, incluyendo, a veces, los scripts del Form Builder de Breakdance o las solicitudes AJAX del formulario al backend. Lo explicamos a fondo en diferencias entre WordPress y WooCommerce.
El síntoma clásico: el formulario aparece visualmente pero al enviarlo no pasa nada, o directamente los scripts no cargan y el formulario se renderiza vacío o roto. En la consola del browser aparece algo como 403 Forbidden para algún archivo JS de Breakdance.
Para diagnosticarlo: temporariamente poné Wordfence en «Learning Mode» desde Wordfence > Firewall > «Learning Mode». Si el formulario empieza a funcionar, el firewall estaba bloqueando algo. Luego podés crear una regla de whitelist específica en lugar de dejar el modo de aprendizaje activo para siempre.
Lo mismo aplica para otros firewalls de aplicación web o plugins de hardening que bloqueen archivos CSS/JS de cargarse desde directorios que no reconocen.
Debugging avanzado con herramientas del navegador
Si los pasos anteriores no resolvieron el problema, abrí Chrome DevTools (F12) y revisá dos pestañas:
Network tab: recargá la página con DevTools abierto. Fijate si hay requests en rojo (status 403, 404, o 0). Un 404 en un archivo JS de Breakdance significa que el archivo no existe en esa ruta. Un 403 es bloqueo activo, probablemente de seguridad.
Console tab: buscá errores en rojo relacionados con Breakdance o con «form». Errores como ReferenceError: breakdanceFormsConfig is not defined indican que el script principal no cargó. Tema relacionado: alternativas más seguras para formularios.
También podés usar la pestaña Elements para buscar el contenedor del formulario en el DOM. Si el elemento existe en el HTML pero está oculto, vas a ver style="display: none" o una clase CSS que lo oculta. Si directamente no está en el DOM, el problema es más profundo: el elemento no se renderizó por una condición de visibilidad o un error en la plantilla.
Errores comunes
Creer que el problema es del formulario cuando es de la plantilla. Mucha gente pasa horas revisando la configuración del Form Builder cuando en realidad el problema es que la plantilla de producto que incluye el formulario no está asignada correctamente a todos los productos. Son dos niveles distintos de configuración.
Limpiar solo el caché del plugin pero no el del servidor. Con LiteSpeed Cache o con algún host que tenga caché a nivel servidor (como algunos planes de donweb.com), limpiar desde el plugin de WordPress no alcanza. Hay que purgar también desde el panel de hosting o el servidor web.
Probar con el mismo usuario administrador. Si el formulario está configurado para mostrarse solo a usuarios no logados (para un formulario de registro, por ejemplo), vos como admin siempre vas a ver lo contrario de lo que ve el visitante. Probá siempre con una sesión de incógnito.
Preguntas Frecuentes
¿Por qué mi formulario en Breakdance se ve en el preview pero no en el sitio en vivo?
El builder de Breakdance tiene acceso directo a los datos y está autenticado como admin, así que puede mostrar elementos que tienen condiciones de visibilidad activas. El visitante en vivo no tiene esos privilegios, y además puede estar viendo una versión cacheada de la página. Limpiá el caché y revisá las condiciones de visibilidad del elemento en el panel lateral del builder.
¿Cómo hago para que el Form Builder de Breakdance aparezca en todas las páginas de producto de WooCommerce?
La plantilla que contiene el formulario debe tener su condición de asignación configurada como «Post type = Product» o «All Products», no limitada a un ID específico. En el builder, abrí la plantilla de producto, buscá la sección de Conditions y verificá que cubra todos los productos que necesitás. Si tenés múltiples plantillas de producto, confirmá cuál tiene prioridad.
¿Qué hace que un elemento de formulario solo funcione en un producto específico de WooCommerce?
Las condiciones de Display en Breakdance permiten asignar elementos a IDs de post específicos, categorías de producto, o etiquetas. Según la documentación de condiciones, si el formulario tiene una condición «Post ID = 347», solo se renderiza en ese producto. Para extenderlo a otros, agregá condiciones adicionales o cambiá a «Product Category» o quitá la restricción.
¿Cómo limpiar el caché para que aparezca mi formulario Breakdance?
Desde WP Rocket: Dashboard > «Limpiar caché». Desde LiteSpeed Cache: Purgar > «Purgar todo». Desde WP Super Cache: Configuración > «Eliminar caché». Después de limpiar, siempre probá navegando en una ventana de incógnito para confirmar que el browser tampoco está sirviendo una versión vieja.
¿Por qué un formulario no se muestra si tengo activado Wordfence?
Wordfence puede bloquear archivos JavaScript de Breakdance o requests AJAX del formulario si los identifica como potencialmente peligrosos. El síntoma más común es un 403 en la consola del browser para algún archivo JS. Para confirmarlo, poné Wordfence en Learning Mode temporalmente y verificá si el formulario aparece. Si sí, revisá los logs del firewall para identificar qué regla disparó el bloqueo y configurá una excepción específica.
Conclusión
El problema de formularios invisibles en Breakdance con WooCommerce no es un bug raro: es la consecuencia de tener múltiples capas (caché, condiciones de visibilidad, seguridad, configuración de plantillas) que interactúan entre sí y donde cada una puede ocultar el formulario de manera diferente. El 80% de los casos se resuelve limpiando el caché y revisando las condiciones de display. El 20% restante requiere debugging con DevTools y revisar Wordfence. Seguí el orden que planteamos acá, probá en incógnito después de cada cambio, y en la mayoría de los casos vas a encontrar la causa antes del tercer paso.